diff --git a/internal_packages/composer/lib/composer-view.cjsx b/internal_packages/composer/lib/composer-view.cjsx index 9ec97808b..7a79738ae 100644 --- a/internal_packages/composer/lib/composer-view.cjsx +++ b/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" {@_renderComposer()} @@ -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" diff --git a/src/components/focus-tracking-region.cjsx b/src/components/focus-tracking-region.cjsx index 8b806529b..1248737ba 100644 --- a/src/components/focus-tracking-region.cjsx +++ b/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 diff --git a/src/dom-utils.coffee b/src/dom-utils.coffee index ba3c344c2..a36ac54de 100644 --- a/src/dom-utils.coffee +++ b/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) ->