fix(composer): Pass in onFocus handler correctly to contenteditable

- Fixes issue where body lost focus when typing and focus switched to to
field
- Now passes the onFocus handler as part of a `ContenteditableExtension`
This commit is contained in:
Juan Tejada 2015-12-08 10:56:41 -08:00
parent aa20212431
commit 8525717ff9
2 changed files with 6 additions and 9 deletions

View file

@ -301,15 +301,19 @@ class ComposerView extends React.Component
<Contenteditable <Contenteditable
ref={Fields.Body} ref={Fields.Body}
value={@_removeQuotedText(@state.body)} value={@_removeQuotedText(@state.body)}
onFocus={ => @setState focusedField: Fields.Body}
onChange={@_onChangeBody} onChange={@_onChangeBody}
onScrollTo={@props.onRequestScrollTo} onScrollTo={@props.onRequestScrollTo}
onFilePaste={@_onFilePaste} onFilePaste={@_onFilePaste}
onScrollToBottom={@_onScrollToBottom()} onScrollToBottom={@_onScrollToBottom()}
extensions={@state.composerExtensions} extensions={[@_contenteditableHandlers()].concat(@state.composerExtensions)}
getComposerBoundingRect={@_getComposerBoundingRect} getComposerBoundingRect={@_getComposerBoundingRect}
initialSelectionSnapshot={@_recoveredSelection} /> initialSelectionSnapshot={@_recoveredSelection} />
_contenteditableHandlers: =>
{
onFocus: => @setState(focusedField: Fields.Body)
}
# The contenteditable decides when to request a scroll based on the # The contenteditable decides when to request a scroll based on the
# position of the cursor and its relative distance to this composer # position of the cursor and its relative distance to this composer
# component. We provide it our boundingClientRect so it can calculate # component. We provide it our boundingClientRect so it can calculate

View file

@ -42,14 +42,7 @@ class Contenteditable extends React.Component
# Passes an absolute top coordinate to scroll to. # Passes an absolute top coordinate to scroll to.
onScrollTo: React.PropTypes.func onScrollTo: React.PropTypes.func
onScrollToBottom: React.PropTypes.func onScrollToBottom: React.PropTypes.func
# Extension DOM Mutating handlers. See {ContenteditableExtension}
onFilePaste: React.PropTypes.func onFilePaste: React.PropTypes.func
onInput: React.PropTypes.func
onFocus: React.PropTypes.func
onClick: React.PropTypes.func
onKeyDown: React.PropTypes.func
onShowContextMenu: React.PropTypes.func
# A list of objects that extend {ContenteditableExtension} # A list of objects that extend {ContenteditableExtension}
extensions: React.PropTypes.array extensions: React.PropTypes.array