States are out of sync on android when auto-correction is enabled

[PedroRestrepo]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

on Android devices with auto-correction enabled on the keyboard, the editor state is not updating until the word is autocorrected (until a while space or special character is typed). This causes issues with inline styles as they cannot be applied correctly.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/gmertk/e61z7nfa/.

https://angry-archimedes-e81339.netlify.app/
https://jsfiddle.net/z83ehc1x/

What is the expected behavior?

That the editor state is updated as the user is typing (even before the auto-correction changes the spelling of the word)

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

"dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "draft-js": "^0.11.7", "es6-shim": "^0.35.6", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.0", "web-vitals": "^0.2.4" }

Might be related to #2171, #2176

[appaquet]

@PedroRestrepo I see you are using React 17. I had similar out-of-sync / jumping cursors issues on iOS using React 17 and reverting to React 16 fixed it. My hunch is that it may be related to the events handling changes in React 17.

[PedroRestrepo]

@appaquet Thanks for the suggestion! just tried with React 16 and still seeing the same issue unfortunately

[splintor]

I seem to have the same problem. 😞
Any workaround?

[splintor]

(Might be related to #1895)

[markcorrea]

I'm also having this issue on Android. Has anyone already figured out a workaround for this?