fix(composer): focus on text box when clicking in margins

internal_packages/composer/lib/composer-view.cjsx

@@ -4,6 +4,7 @@ React = require 'react'
 {File,
  Utils,
  Actions,
+ DOMUtils,
  DraftStore,
  UndoManager,
  ContactStore,
@@ -174,6 +175,7 @@ class ComposerView extends React.Component
     if @props.mode is "inline"
       <FocusTrackingRegion className={@_wrapClasses()}
                            ref="composerWrap"
+                           onFocusIn={@_onFocusIn}
                            tabIndex="-1">
         {@_renderComposer()}
       </FocusTrackingRegion>
@@ -486,6 +488,14 @@ class ComposerView extends React.Component
       @refs[Fields.Body].selectEnd()
     @_mouseDownTarget = null
 
+  # When a user focuses the composer, it's possible that no input is
+  # initially focused. If this happens, we focus the contenteditable. If
+  # we didn't focus the contenteditable, the user may start typing and
+  # erroneously trigger keyboard shortcuts.
+  _onFocusIn: (event) =>
+    return if DOMUtils.closest(event.target, DOMUtils.inputTypes())
+    @refs[Fields.Body].selectEnd()
+
   _onMouseMoveComposeBody: (event) =>
     if @_mouseComposeBody is "down" then @_mouseComposeBody = "move"
 

src/components/focus-tracking-region.cjsx

@@ -11,13 +11,20 @@ class FocusTrackingRegion extends React.Component
   @propTypes:
     className: React.PropTypes.string
     children: React.PropTypes.any
+    onFocusIn: React.PropTypes.func
+    onFocusOut: React.PropTypes.func
+
+  @defaultProps:
+    onFocusIn: ->
+    onFocusOut: ->
 
   constructor: (@props) ->
     @state = {focused: false}
     @_goingout = false
 
-    @_in = =>
+    @_in = (args...) =>
       @_goingout = false
+      @props.onFocusIn(args...) if @state.focused is false
       @setState(focused: true)
 
     @_out = =>
@@ -41,6 +48,7 @@ class FocusTrackingRegion extends React.Component
         # when the element receiving focus does not support selection (like a
         # div with tabIndex=-1)
         document.getSelection().empty()
+        @props.onFocusOut() if @state.focused is true
         @setState(focused: false)
         @_goingout = false
       , 100

src/dom-utils.coffee

@@ -169,6 +169,9 @@ DOMUtils =
     return unless li
     return DOMUtils.isFirstChild(li, anchor)
 
+  # Selectors for input types
+  inputTypes: -> "input, textarea, *[contenteditable]"
+
   # https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
   # Only Elements (not Text nodes) have the `closest` method
   closest: (node, selector) ->