draft-js-plugins / draft-js-plugins

React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers

Home Page:https://www.draft-js-plugins.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Text cursor moves to the beginning after immediately clear the editor content

cabutler10 opened this issue · comments

I would like to reopen issue #2469.

Description
I am using @draft-js-plugins/editor v4.1.3 and the issue of the cursor shifting to the wrong position is currently happening.

Description from the original reported bug;
"I type something in the editor and hit Enter or click the button to clear the editor via EditorState.createEmpty().
If I continue to type some words, the text cursor moves to the beginning after I type the first letter."

Reproducible Demo

You can see here in a forked version of the original sandbox with upgraded @draft-js-plugins/editor:
https://codesandbox.io/s/draft-editor-example-forked-6p1joi?file=/src/App.js:163-187

Sure, can you provide a fix?

I have not looked into the code base at all so no, I do not currently have a solution to suggest. I would be willing to give it a try over the weekend and can get back to you.

Following some threads about the same issue with draft-js (here), I have found a way to get around the issue by updating the onChange function to:

 this.setState({
      editorState: !editorState.getSelection().getHasFocus()
        ? EditorState.moveFocusToEnd(editorState)
        : editorState
    });

You can see a reproducible example here:
https://codesandbox.io/s/draft-editor-example-forked-6p1joi?file=/src/App.js

As the fix does not need a change directly to draft-js-plugins, I would close this issue.