Fix editor losing focus after first word on Android. (facebookarchive…

…#907)

* 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

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);
     });
   }