updating entities fail to trigger render

This seems to be a bug.

When updating the contentState of the Editor it is my understanding the child entity Components should be updated with new contentState prop. This does not seem to be happening.

The specific situation is that I am updating contentState with a new result from contentState.mergeEntityData and subsequent Editor.push.

In the following fiddle, I expect the activate and deactivate buttons to update the contentState, thus re-rendering the entity’s TestComponent which should resort in the toggling of a blue or yellow background. You can verify the {active} data triggers the background change by editing the initial rawData and verify that the contentState is updating with the “Log State” button.

https://jsfiddle.net/steckel/h9gd6bm0/

I am testing using Chrome 56.0.2924.87 and draft-js 0.10.0.

[noahlemen]

I agree, this is certainly annoying behavior!

The workaround that currently seems to be advised is to use EditorState.forceSelection to force an update. In your fiddle, pressing a button and then clicking to change selection does cause {active} to update.

For example, using forceSelection as workaround might look like:

_handleActiveEntityClick = () => {
  const entityKey = "1";
  const contentState = this.state.editorState.getCurrentContent();
  const entity = contentState.getEntity(entityKey);
  const newContentState = contentState.replaceEntityData(entityKey, {active: true});
    
  const editorState = EditorState.push(this.state.editorState, newContentState, "activate-entity-data");
  const selection = editorState.getSelection();
    
  this.setState({editorState: EditorState.forceSelection(editorState, selection)});
}

_handleDeactiveEntityClick = () => {
  const entityKey = "1";
  const contentState = this.state.editorState.getCurrentContent();
  const entity = contentState.getEntity(entityKey);
  const newContentState = contentState.replaceEntityData(entityKey, {active: false});

  const editorState = EditorState.push(this.state.editorState, newContentState, "deactivate-entity-data");
  const selection = editorState.getSelection();
    
  this.setState({editorState: EditorState.forceSelection(editorState, selection)});
}

Anyway, I agree that this is undesirable and would ideally be handled better…

[moontails]

How can one loop over the entities and update them ?