draft-js-plugins: Forcing focus breaks plugins

I was able to find a temporary solution to this problem by using setTimeout on the call to focus:

setTimeout(this.editor.focus, 50)

Strangely enough, this seems to solve the problem even if you set the timeout value to 0.

My original guess on why this works was that there is still something in the mention suggestions that is still in the process of mounting or rendering, but the parent component’s componentDidMount should’t be called until after all this is complete…so really not sure.

I just spent about 2 hours to figure out why my mention and linkify plugin weren’t working. That was so frustrating.

We should give more attention to this issue.

This is a major issue, and has barely been acknowledged in 2 years :\ I guess this repo is no longer maintained?

+1, can we please at least add documentation for this?

The underlying issue is something like this (from memory):

1. A new editor component is created
2. The plugins component takes the initial state and adds all decorators from active plugins and then calls the passed in state updated function from the props (but doesn’t update the internal state, as it is expecting the component parent to do that)
3. focus is called in the same render cycle and reads from props.state, changes the focus and then calls update state with that new state (which doesn’t include the plugin decorators as the cycle from 2 didn’t finish updating)
4. 3 overwrites the new state from 2 kicking out all decorators, breaking mentions, emojis, etc.

tried switching from doing this

// render
<PluginEditor
  ref={el => { this.editor = el }}
  ...
/>

// componentDidMount
this.editor.focus()

to calling focus() on the DOM element directly like so

// componentDidMount
this.editor.getEditorRef().refs.editor.focus()

both focus the editor correctly, but the problems with mentions persisted