React-draft-wysiwyg: automatically focus cursor in text area after draft wysiwyg editor renders

[PrimeLens]

I was able to automatically focus cursor in text area after draft wysiwyg editor mounts, Just leaving this here for others.

class MyEditor extends React.Component {
  constructor(){
    super();
    this.setDomEditorRef = ref => this.domEditor = ref;
  }
  componentDidMount(){
    // as per method in https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js
    this.domEditor.focusEditor();
  }
  render() {
    return (
        <Editor
          ref={this.setDomEditorRef}
          {/*  other attributes etc etc */}
         />
    )
  }

[jpuri]

Thanks @PrimeLens 😄

[RamonBalthazar]

Please, add this to the documentation :)

[jpuri]

Done :)
Thanks @PrimeLens , @RamonBalthazar

[jpuri]

To avoid react warning I have changes property name to editorRef. Using ref still may work but is avoidable.

[t880216t]

@jpuri Thanks for you do . And it not work when i have to write like this:

export default class EditableRichCell extends React.Component {
edit = () => {
    this.setState({ editable: true }, () => {
      // this.domEditor.focusEditor();
    });
  };
  render() {
    const { value, editable, editorState } = this.state;
    const setEditorReference = (ref) => {
      this.editorReferece = ref;
      ref.focusEditor();
    }
    return (
      <div className={styles.editable_cell}>
        {editable ? (
          <div
            style={{
              border: '1px solid #d9d9d9',
              borderRadius: 5,
              marginTop: 10,
              backgroundColor: '#fff',
            }}
          >
            <Editor
              editorRef={setEditorReference}
              editorState={editorState}
.
.
.

i got this error:

TypeError: ref.focusEditor is not a function
setEditorReference [as editorRef]
D:/react/case-tool/src/components/EditableRichCell/index.js:66
  63 | const { value, editable, editorState } = this.state;
  64 | const setEditorReference = (ref) => {
  65 |   this.editorReferece = ref;
> 66 |   ref.focusEditor();
  67 | }
  68 | return (
  69 |   <div className={styles.editable_cell}> 

please help me

[gregnb]

This does not work for me either. How can we access the focusEditor() function?

[NikkiMeganMoore]

@t880216t it looks like you have a typo on line 65
this.editorReferece = ref; should be this.editorReference = ref;

Also, it looks like the function is just called "focus", not "focusEditor"

You can access it by doing this
const setEditorReference = (ref) => { this.editorReference = ref; }

Then whenever you want to focus on the editor you can just call:

this.editorReference.focus()

[Utsav170]

when i called this.domEditor.focusEditor(), i have encountered an error TypeError: Cannot read property 'focusEditor' of undefined. Do i need to import something??

[atikmahbub]

can you give me an example using react hook ? i am getting focuseditor error when trying to implement with react hook(using useRef()}

[MaxWong03]

@atikmahbub Same here. Has anyone successfully implemented focus using react hook?

[katkat100]

I was able to get focus with react hooks like this

const EditorRef = useRef();

useEffect(() => EditorRef?.current.focus(), [EditorRef]);

<Editor
    editorRef={(ref) => (EditorRef.current = ref)}
    ...
/>