Fix editor losing focus after first word on Android. (facebookarchive#907)

tonygentilcore · flarnie · commit d6cad2e26401 · 2017-02-26T16:56:30.000-08:00
* Fix editor losing focus after first word on Android. This patch narrows the scope of `restoreEditorDOM` to only blow away the `DraftEditorContents` instead of the entire editor. The key difference is that the `contentEditable` DOM element is not replaced, which means that the soft keyboard isn't dismissed on Android. Manually tested against "Cut" and "IME" tests: https://github.com/facebook/draft-js/wiki/Manual-Testing#cutcopypaste https://github.com/facebook/draft-js/wiki/Manual-Testing#ime Fixes facebookarchive#888, Ref facebookarchive#626, Ref facebookarchive#102 * Fix editor losing focus after first word on Android. This patch narrows the scope of `restoreEditorDOM` to only blow away the `DraftEditorContents` instead of the entire editor. The key difference is that the `contentEditable` DOM element is not replaced, which means that the soft keyboard isn't dismissed on Android. Manually tested against "Cut" and "IME" tests: https://github.com/facebook/draft-js/wiki/Manual-Testing#cutcopypaste https://github.com/facebook/draft-js/wiki/Manual-Testing#ime Fixes facebookarchive#888, Ref facebookarchive#626, Ref facebookarchive#102
diff --git a/src/component/base/DraftEditor.react.js b/src/component/base/DraftEditor.react.js
@@ -57,7 +57,7 @@ const handlerMap = {
 };
 
 type State = {
-  containerKey: number,
+  contentsKey: number,
 };
 
 /**
@@ -171,7 +171,7 @@ class DraftEditor extends React.Component {
     this.onDragLeave = this._onDragLeave.bind(this);
 
     // See `_restoreEditorDOM()`.
-    this.state = {containerKey: 0};
+    this.state = {contentsKey: 0};
   }
 
   /**
@@ -230,7 +230,6 @@ class DraftEditor extends React.Component {
         {this._renderPlaceholder()}
         <div
           className={cx('DraftEditor/editorContainer')}
-          key={'editor' + this.state.containerKey}
           ref="editorContainer">
           <div
             aria-activedescendant={
@@ -283,6 +282,7 @@ class DraftEditor extends React.Component {
               customStyleFn={this.props.customStyleFn}
               editorKey={this._editorKey}
               editorState={this.props.editorState}
+              key={'contents' + this.state.contentsKey}
             />
           </div>
         </div>
@@ -383,13 +383,14 @@ class DraftEditor extends React.Component {
   /**
    * Used via `this.restoreEditorDOM()`.
    *
-   * Force a complete re-render of the editor based on the current EditorState.
-   * This is useful when we know we are going to lose control of the DOM
-   * state (cut command, IME) and we want to make sure that reconciliation
-   * occurs on a version of the DOM that is synchronized with our EditorState.
+   * Force a complete re-render of the DraftEditorContents based on the current
+   * EditorState. This is useful when we know we are going to lose control of
+   * the DOM state (cut command, IME) and we want to make sure that
+   * reconciliation occurs on a version of the DOM that is synchronized with
+   * our EditorState.
    */
   _restoreEditorDOM(scrollPosition?: DraftScrollPosition): void {
-    this.setState({containerKey: this.state.containerKey + 1}, () => {
+    this.setState({contentsKey: this.state.contentsKey + 1}, () => {
       this._focus(scrollPosition);
     });
   }
