Handle focusing on the editor line ourselves 🤷; fixes #39

src/TextEditor.js

@@ -20,6 +20,12 @@ class TextEditor extends Component {
     this.onChange = this.onChange.bind(this);
     this.handleKeyCommand = this.handleKeyCommand.bind(this);
     this.handleFormating = this.handleFormating.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.editorRef = React.createRef();
+  }
+
+  handleFocus() {
+    if (this.editorRef.current) this.editorRef.current.focus();
   }
 
   /** */
@@ -58,6 +64,7 @@ class TextEditor extends Component {
     const { classes } = this.props;
     const { editorState } = this.state;
     const currentStyle = editorState.getCurrentInlineStyle();
+
     return (
       <div>
         <ToggleButtonGroup
@@ -77,11 +84,12 @@ class TextEditor extends Component {
             <ItalicIcon />
           </ToggleButton>
         </ToggleButtonGroup>
-        <div className={classes.editorRoot}>
+        <div className={classes.editorRoot} onClick={this.handleFocus}>
           <Editor
             editorState={editorState}
             handleKeyCommand={this.handleKeyCommand}
             onChange={this.onChange}
+            ref={this.editorRef}
           />
         </div>
       </div>