Cursor jumps to the beginning of the text when two keys are pressed

[wobini-fun]

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

[RIP21]

Do you have a StrictMode wrapping it? Please make reproduction and record a video of it. Use Loom or whatever you prefer. Thanks.

[wobini-fun]

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

[RIP21]

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.