From 2affff30ffa594d3f962c3c5405155058d767f9e Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Tue, 14 Oct 2014 17:04:45 -0600
Subject: [PATCH] Handle events with native handlers to avoid shadow DOM issues
 with React

---
 src/input-component.coffee       | 6 ++++--
 src/text-editor-component.coffee | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/input-component.coffee b/src/input-component.coffee
index 230c4be37..5c893815d 100644
--- a/src/input-component.coffee
+++ b/src/input-component.coffee
@@ -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: ->
diff --git a/src/text-editor-component.coffee b/src/text-editor-component.coffee
index 6dc4700d0..fdda54f03 100644
--- a/src/text-editor-component.coffee
+++ b/src/text-editor-component.coffee
@@ -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