React-draft-wysiwyg: Switching between read only modes causes error: Cannot read property 'focus' of null

[rogier2012]

We use the editor in both read only and edit mode mode. This switch happens by changing the state using a onClick handler on the parent div.

However when going from read only mode to edit mode, the editor is not automatically focussed and the console logs the error: "Cannot read property 'focus' of null at react-draft-wysiwyg.js:6". It seems like this.editor is null at the moment of focussing, but I have no clue why this is the case.

Is this a problem of this component, Draft.js or are we using it wrong?

[miaosongjing]

How can it be read only mode?

[rogier2012]

Via the the prop readOnly which is passed down to the Draft Editor https://draftjs.org/docs/api-reference-editor.html#readonly according to the docs

[marton-levay]

Well this is pretty old but this happens for me when the editor is removed from the dom, doesn't matter whether I use readonly or not:
{ !isDescriptionWindowOpen && <Editor ..../> }

[ArtemMaximum]

The same for me. Has anyone found a solution?

[TkDodo]

Was chasing this bug as well today, but under a different circumstance. We want to use the editor in an uncontrolled mode via defaultEditorState, but we also have a button outside of the Editor where we can add some text (placeholders) to the editor. To achieve this, we use a key prop (see here if you are unfamiliar with this pattern: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key)

Unmounting the editor by giving it a new key results in this error. It seems similar to the scenario described here: https://github.com/jpuri/react-draft-wysiwyg/issues/712#issuecomment-490843899

Judging from the code, focus is called on the unmonted component instance, because it is done in a setTimeout, see: https://github.com/jpuri/react-draft-wysiwyg/blob/4d0aaf6b6bb28b7c04a46cef384c2594d26daacc/src/Editor/index.js#L348-L352

the focus method of the underlying draftJs editor has a guard, but the react-draft-wysiwyg wrapper has not. They even put this use-case in a comment, see here: https://github.com/facebook/draft-js/blob/6e87246506ca59060cb4c6ebc7a9ac3e97609a2a/src/component/base/DraftEditor.react.js#L494-L498

So I think the easiest "fix" / "workaround" would be to add an if (this.editor) around the focus call - relying on refs in a setTimeout seems a bit brittle anyways. However, then in my case, the editor was not focused. But focusing the editor manually if you click on it, well, that's easy enough to achieve 🤷 .
Happy to do a PR with this, too.