Cursor jumps to the beginning of the text when two keys are pressed
wobini-fun opened this issue · comments
Versions used:
"react": "^18.2.0"
"easymde": "2.18.0"
"react-simplemde-editor" "5.2.0"
Used browser:
Brave
Hi there, i am facing a strange issue:
If i use the controlled component with the value assigned and a onChange listener (as shown in the README file) the cursor jumps from time to time at the beginning of the text. This seems to happen only when i press two keys at the same time.
Thanks in advance
Do you have a StrictMode wrapping it?
Please make reproduction and record a video of it. Use Loom or whatever you prefer.
Thanks.
Thank you for the fast reply. I created a minimal sample repository .
And here is a short video of the result:
cursor.jumping.webm
Additionally on this setup i have the problem that the preview is undefined see next screencast. The value seems not to be set.
preview.not.working.webm
You should use a newer version of the easymde 2.18.0 to fix the broken preview. It's a bug on their side.
Regarding the cursor going back, I cannot reproduce that in the demo I have hosted, so it may probably be related to older version of easymde or it being in the dev mode meaning it is a bit slower. In production, it won't be a thing probably.
Also, make sure you memoize your onChange
handler like that.
export const ControlledUsage = () => {
const [value, setValue] = useState("Initial value");
const onChange = useCallback((value: string) => {
setValue(value);
}, []);
return <SimpleMdeReact value={value} onChange={onChange} />;
};
You're not doing that and it may be causing these issues too.
Closing for now as it's not much actionable. If it's still broken even if it's built for production. then feel free to reopen. Also, I recommend you to host reproductions on codesanbox or similar as it's MUCH easier to check than doing git clone
and whatnot.