Cursor is being reset to the start of document
Opened this issue · 3 comments
The cursor resets to the beginning of the document when you try to enter text chaotically and quickly. This problem also occurs if you type two characters at the same time.
I tried to reproduce the problem in codesandbox https://codesandbox.io/p/sandbox/zp9j4s but it is not reproduced there: only locally.
The project I am running locally that is experiencing this problem is a copy of the project on codesandbox. There are no additional dependencies or styles.
Also the problem only appears in Chrome (Safari and Firefox have no problem)
Chrome version 129.0.6668.59
What could be the problem? Could this be a codemirror problem? I will be grateful for any help
2024-10-09.17.49.58.mov
2024-10-10.14.32.58.mp4
I can’t reproduce your issue in Chrome.
2024-10-10.14.32.58.mp4
I can’t reproduce your issue in Chrome.
I'm talking about the same thing, I can't reproduce the problem in codesandbox either, but it appears when this project is run locally through the code editor. (I tried creating a project through create react app and adding markdown editor component to it, removing all styles - the problem appeared there.)
I came across this error before on my local machine, think it has to something to do with useState, as the setState function is asynchronous in nature. I created a temporary workaround for this which seemed to solve the problem, but I am unsure if it fits your use case.
For my use case, because I was intending to do an autosave function 500ms after the user stops typing, I used a setTimeout in the onChange handler, and only set the state after the user finishes typing. This did not affect the display of the MarkdownEditor at all, fixed the cursor issue despite erratic typing / double characters being typed, and is able to capture the updated value, provided your screen / app does not get closed after 500ms.
Here is a codesandbox snippet, adapted from yours: https://codesandbox.io/p/sandbox/bold-rhodes-y6gflx