[Bug] Cursor will move to the beginning when using prop "value"

[noru]

In example, the value is assigned as a constant. However if the value is read from a state, like minor tweak of the example below:

export default function App() {
  let [val, setVal] = useState('console.log') // add this line
  return (
    <CodeMirror
      value={val} // use val from state
      height="200px"
      extensions={[javascript({ jsx: true }), scrollPastEnd()]}
      onChange={(value, viewUpdate) => {
        console.log("value:", value);
        setVal(value); // add this line
      }}
    />
  );
}

Here's the bug in v4:

1. put the cursor anywhere except the end of the text
2. edit
3. the cursor will be put in the very beginning of the text after every key stroke, which is a show stopper.
4. also reproducable with useCodeMirror hook

CodeSandbox:
https://codesandbox.io/s/react-codemirror-example-codemirror-6-forked-d9u0g?file=/src/App.js

[noru]

Temporary solution for this: use value as a initial value and don't change it if it's internal state is equal to the state passing in

export function CodeMirror({ value, onChange, ...rest }: ReactCodeMirrorProps) {

  let [initVal, setInitVal] = useState(value)
  let valRef = useRef(value)
  useEffect(() => {
    if (valRef.current !== value) {
      setInitVal(value)
    }
  }, [value])
  return (
    <CodeMirror
      onChange={(val, viewUpdate) => {
        valRef.current = val
        onChange && onChange(val, viewUpdate)
      }}
      value={initVal}
      {...rest}
    />
  )
}

[jaywcjlove]

It seems that I have fixed this feature.

@noru

[noru]

Thanks for your quick response! @jaywcjlove I'll bump my version.

[jsjoeio]

I feel like I'm running into this same issue. What I'm doing:

1. use value prop to set initial text
2. update text and listen in onChange. when value.includes(myString) I call a function to setValue and create a transaction to move the cursor

The value gets updated but the transaction with the cursor placement doesn't take effect. If I don't setValue, then the cursor update works as expected.

Video

https://www.loom.com/share/6180754f2b3c4a5db4ac222d4a7b8a66

https://codesandbox.io/s/v2-issue-n5rdj?file=/src/App.tsx