cursor to the first position when use onEditorChange function

[yuer0608]

My code is similar that

function MyComponent({initialValue}) {
  const [value, setValue] = useState(initialValue ?? '');
  useEffect(() => setValue(initialValue ?? ''), [initialValue]);
  return (
    <Editor
      initialValue={initialValue}
      value={value}
      onEditorChange={(newValue, editor) => setValue(newValue)}
    />
  );
}

everytime, the cursor will to the first position when I edit content after. how I do ?

[exalate-issue-sync[bot]]

Ref: INT-3163

[lorenzo-pomili]

I cannot replicate it, can you provide use an example and the step by step instructions to replicate it?

also version of the editor and the browser are you using, could be a very useful information

[duongnq2798]

This problem is likely due to the way the component updates its internal state.

The issue is related to how the TinyMCE editor's state is being managed in the parent component. Since the parent component is re-rendering, it's causing the cursor to jump back to the beginning of the content.

[danoaky-tiny]

I agree with @duongnq2798, closing.

[hubertlepicki]

I think this is indeed related to state management of the parent component but the thing that may be confusing is the naming of properties for the Editor, or how it works.

I found that changing initialValue={initialValue}, i.e. changing the variable intialValue results in precisely the above behavior, i.e. the cursor jumps to the beginning of the editor.

In my case the fix was not to update the initialValue

[danoaky-tiny]

@hubertlepicki Correct, you can see https://www.tiny.cloud/docs/tinymce/6/react-ref/#initialvalue for more info.