fix: Editor[autoFocus] should work, close: #1669 (#1733)

examples/rich-text/index.js

@@ -263,6 +263,7 @@ class RichTextExample extends React.Component {
           renderNode={this.renderNode}
           renderMark={this.renderMark}
           spellCheck
+          autoFocus
         />
       </div>
     )

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()
-    }
   }
 
   /**

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()
+    }
   }
 
   /**

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}