search

scniro / react-codemirror2

Codemirror integrated components for React
MIT License
1.65k stars 192 forks source link

Cursor issues with React 18 #313

Open smorawski-mfgx opened 2 months ago

smorawski-mfgx commented 2 months ago

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 commented 1 month ago

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