Selected option is not highlighted when pressing up down navigation

[vinhlh]

The root cause is: outer component was using shallow-compare to determine when it should re-render:

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState)
  }

And the way mentions plugin triggers an update is:
https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-mention-plugin/src/MentionSuggestions/index.js#L245

    // to force a re-render of the outer component to change the aria props
    this.props.store.setEditorState(this.props.store.getEditorState());

[philipchmalts]

I use redux-form as the place to store the editorState and I am also experiencing this problem. Is there any way to force a re-render?

[deanshub]

Warning!!! ugliest hack ever

if (this.editorState === editorState){
  this.editorState = EditorState.forceSelection(editorState, editorState.getSelection())
}else{
  this.editorState = editorState
}

This made my mobx store to create a new editorState every-time thus inforcing re-render and this makes everything work again but this is stupid, I'll update if I'll find a better solution

[nikgraf]

Does any of you have a reproducible example to test?

[deanshub]

I belive I can make one this weekend

[nikgraf]

@deanshub any updates?

[deanshub]

thanks for reminding me @nikgraf

I found out what the issue was,
I created my editor component multiple times inside different components which are displayed at the same time, in my use case it is exactly the same editor component.

The problem was that I did not instantiate the draft plugins for each usage of the component,
I moved the plugin instantiation into the constructor of the editor component and it worked like a charm. 😎

can anyone else confirm that this was the issue for them too?

[nikgraf]

ok cool, then I close this issue for now and open it if we identify this wasn't actually the problem