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:

Feathers

some code would help to understand what's happening. – Truncated

why don't you use a decorator for the highlight rather than an entity? – Tamas

Here is the code example : github.com/WeshGuillaume/demo-autocomplete/blob/master/src/… – Feathers

@RamiSalim, I'm going to dig into that – Feathers

What about adding an invisible character (like a bell \x07) – Shortsighted

Did you ever figure out a solution to this? I'm having the same issue and am considering trying an invisible character. – Porridge

As of now adding an invisible character is the way to go. – Detriment

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)
  );
}

Detriment