Transfer focus from editor component to its hidden input

spec/editor-component-spec.coffee

@@ -78,3 +78,8 @@ describe "EditorComponent", ->
     expect(cursorNodes.length).toBe 1
     expect(cursorNodes[0].offsetTop).toBe 6 * lineHeight
     expect(cursorNodes[0].offsetLeft).toBe 11 * charWidth
+
+  it "transfers focus to the hidden input", ->
+    expect(document.activeElement).toBe document.body
+    node.focus()
+    expect(document.activeElement).toBe node.querySelector('.hidden-input')

src/editor-component.coffee

@@ -18,7 +18,7 @@ EditorCompont = React.createClass
   mixins: [CustomEventMixin, SubscriberMixin]
 
   render: ->
-    div className: 'editor',
+    div className: 'editor', tabIndex: -1,
       div className: 'scroll-view', ref: 'scrollView',
         InputComponent ref: 'hiddenInput', className: 'hidden-input', onInput: @onInput
         @renderScrollableContent()
@@ -61,6 +61,7 @@ EditorCompont = React.createClass
   componentDidMount: ->
     @listenForCustomEvents()
     @refs.scrollView.getDOMNode().addEventListener 'mousewheel', @onMousewheel
+    @getDOMNode().addEventListener 'focus', @onFocus
 
     {editor} = @props
     @subscribe editor, 'screen-lines-changed', @onScreenLinesChanged
@@ -69,7 +70,6 @@ EditorCompont = React.createClass
 
     @updateAllDimensions()
     @props.editor.setVisible(true)
-    @refs.hiddenInput.focus()
 
   componentWillUnmount: ->
     @getDOMNode().removeEventListener 'mousewheel', @onMousewheel
@@ -83,6 +83,9 @@ EditorCompont = React.createClass
       'core:move-up': => editor.moveCursorUp()
       'core:move-down': => editor.moveCursorDown()
 
+  onFocus: ->
+    @refs.hiddenInput.focus()
+
   onVerticalScroll: ->
     animationFramePending = @pendingScrollTop?
     @pendingScrollTop = @refs.verticalScrollbar.getDOMNode().scrollTop