Cursor issues with React 18

[smorawski-mfgx]

Hello,

I'm trying to update my app to React 18 but I'm seeing some unexpected behavior with the cursor jumping while typing, as well as indentation not working the same as before. Please see the below codesandbox for a demonstration:

https://codesandbox.io/p/sandbox/react-codemirror2-9smx2h?file=%2Fsrc%2FApp.js

In the editor using React 18, if I try to start typing a JSON object with {, it jumps my cursor to after the closing curly brace that it added for me, instead of in between them as before. Next, if I move my cursor between the curly braces and press enter, it does add the newline but moves my cursor to the very start, before the opening curly brace. If I then move my cursor into the object and type " to start typing an object property, it moves my cursor back once again. There seem to be issues with the cursor when the editor tries to reformat things automatically, such as adding closing braces/quotes or adding extra newlines when pressing enter inside an object.

The codesandbox also includes the same code editor component rendered with ReactDOM.render instead, which reverts back to React 17, and it has no such issues.

Any help or insight with this would be appreciated, thanks!

[jacobcarrington]

Similar issues here. Also only appears to effect the controlled editor. Using the uncontrolled doesn't appear to have the same issues.

[pogman25]

the same issues

[mmmmaaaaarrrrrrkkkkkkkk]

Exact same issue here. It only seems to happen when I'm typing fast. If I type slow, the cursor stays where it needs to be.