Handle events with native handlers to avoid shadow DOM issues with React

This commit is contained in:
Nathan Sobo 2014-10-14 17:04:45 -06:00
parent 3b6189e94b
commit 2affff30ff
2 changed files with 6 additions and 3 deletions

View File

@ -7,9 +7,9 @@ InputComponent = React.createClass
displayName: 'InputComponent'
render: ->
{className, style, onFocus, onBlur} = @props
{className, style} = @props
input {className, style, onFocus, onBlur, 'data-react-skip-selection-restoration': true}
input {className, style, 'data-react-skip-selection-restoration': true}
getInitialState: ->
{lastChar: ''}
@ -17,6 +17,8 @@ InputComponent = React.createClass
componentDidMount: ->
@getDOMNode().addEventListener 'paste', @onPaste
@getDOMNode().addEventListener 'compositionupdate', @onCompositionUpdate
@getDOMNode().addEventListener 'focus', @onFocus
@getDOMNode().addEventListener 'blur', @onBlur
# Don't let text accumulate in the input forever, but avoid excessive reflows
componentDidUpdate: ->

View File

@ -102,7 +102,7 @@ TextEditorComponent = React.createClass
@useHardwareAcceleration, @performedInitialMeasurement, @backgroundColor, @gutterBackgroundColor
}
div ref: 'scrollView', className: 'scroll-view', onMouseDown: @onMouseDown,
div ref: 'scrollView', className: 'scroll-view',
InputComponent
ref: 'input'
className: 'hidden-input'
@ -380,6 +380,7 @@ TextEditorComponent = React.createClass
node.addEventListener 'mousewheel', @onMouseWheel
node.addEventListener 'focus', @onFocus # For some reason, React's built in focus events seem to bubble
node.addEventListener 'textInput', @onTextInput
@refs.scrollView.getDOMNode().addEventListener 'mousedown', @onMouseDown
scrollViewNode = @refs.scrollView.getDOMNode()
scrollViewNode.addEventListener 'scroll', @onScrollViewScroll