Cursor inside Entity after selection in draft-js

Question

I'm struggling making entities style work the way I would like to using draft-js. I'm adding styled entities to my input by selecting items in an autocomplete component. When I select one, it works, but the caret stays inside the entity until i add another character. Is there a way to move the caret after the actual entity without adding a space ?

I am using a library called draft-js-autocomplete, I don't mind making a pull request if necessary.

To illustrate:

Answer 1

You will have to add an empty character here.

 const newContentState = Modifier.insertText(
contentStateWithEntity,
currentSelection,
`...` + '\u200A',
null,
entityKey);

Moreover you will have to adjust your strategy as following:

    function placeholderFieldStrategy(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(
    (character) => {
      const entityKey = character.getEntity();
      return (
        entityKey !== null &&
        contentState.getEntity(entityKey).getType() === 'PLACEHOLDER_FIELD'
      );
    },
    (start, end) => callback(start, end - 1)
  );
}