From a3256963396364986ec91e9d0b4fe5b6a5497c4c Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjycui@users.noreply.github.com>
Date: Wed, 28 Mar 2018 14:15:51 +0800
Subject: [PATCH] fix: Editor[autoFocus] should work, close: #1669 (#1733)

---
 examples/rich-text/index.js                    | 1 +
 packages/slate-react/src/components/content.js | 7 -------
 packages/slate-react/src/components/editor.js  | 7 ++++++-
 packages/slate-react/src/plugins/after.js      | 1 -
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/examples/rich-text/index.js b/examples/rich-text/index.js
index 4da2cab3c..c0a0c5f69 100644
--- a/examples/rich-text/index.js
+++ b/examples/rich-text/index.js
@@ -263,6 +263,7 @@ class RichTextExample extends React.Component {
           renderNode={this.renderNode}
           renderMark={this.renderMark}
           spellCheck
+          autoFocus
         />
       </div>
     )
diff --git a/packages/slate-react/src/components/content.js b/packages/slate-react/src/components/content.js
index 549811a26..09de2e2cb 100644
--- a/packages/slate-react/src/components/content.js
+++ b/packages/slate-react/src/components/content.js
@@ -40,7 +40,6 @@ class Content extends React.Component {
 
   static propTypes = {
     autoCorrect: Types.bool.isRequired,
-    autoFocus: Types.bool.isRequired,
     children: Types.any.isRequired,
     className: Types.string,
     editor: Types.object.isRequired,
@@ -87,11 +86,9 @@ class Content extends React.Component {
    *
    *   - Add native DOM event listeners.
    *   - Update the selection, in case it starts focused.
-   *   - Focus the editor if `autoFocus` is set.
    */
 
   componentDidMount = () => {
-    const { editor } = this.props
     const window = getWindow(this.element)
 
     window.document.addEventListener(
@@ -105,10 +102,6 @@ class Content extends React.Component {
     }
 
     this.updateSelection()
-
-    if (this.props.autoFocus) {
-      editor.focus()
-    }
   }
 
   /**
diff --git a/packages/slate-react/src/components/editor.js b/packages/slate-react/src/components/editor.js
index b6c52ec61..c4103263b 100644
--- a/packages/slate-react/src/components/editor.js
+++ b/packages/slate-react/src/components/editor.js
@@ -145,11 +145,16 @@ class Editor extends React.Component {
   }
 
   /**
-   * When the component first mounts, flush any temporary changes.
+   * When the component first mounts, flush any temporary changes,
+   * and then, focus the editor if `autoFocus` is set.
    */
 
   componentDidMount = () => {
     this.flushChange()
+
+    if (this.props.autoFocus) {
+      this.focus()
+    }
   }
 
   /**
diff --git a/packages/slate-react/src/plugins/after.js b/packages/slate-react/src/plugins/after.js
index ccd91cf22..04754a38a 100644
--- a/packages/slate-react/src/plugins/after.js
+++ b/packages/slate-react/src/plugins/after.js
@@ -602,7 +602,6 @@ function AfterPlugin() {
       <Content
         {...handlers}
         autoCorrect={props.autoCorrect}
-        autoFocus={props.autoFocus}
         className={props.className}
         children={props.children}
         editor={editor}