Skip to content

cursor moves to the beginning of the line while typing quickly if the CodeMirror is controlled and the render of the component containing CodeMirror takes too long #694

@andreimatei

Description

@andreimatei

Hello! I believe I'm running into a bug. My symptoms are similar to the old #199, but I'm using the latest version (4.23.6) and also the workaround from #199 (comment) does not work for me.

So, I'm typing into my controlled <CodeMirror> and, every few keystrokes, the cursor jumps to the beginning of the text box. I believe triggering the issue is dependent on <CodeMirror> being used in a "heavy" component: if the parent of <CodeMirror> (which supplies the value) is simple, then I don't get the cursor jump. If the parent component has a bunch of other sub-components (and so the render takes longer), then I do get the bug -- so I suspect the issue is some sort of race condition whereby an update of value arrives "too late", after more key presses.

My CodeMirror invocation looks like this:

    const [value, setValue] = useState("");
    <CodeMirror
      value={value}
      onChange={(value) => setValue(value)}
    />
    
    <MyOtherHeavyComponent/>

If I remove <MyOtherHeavyComponent/>, then it all works fine. Also, if I type slowly, it again works fine.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions