Cursor jumps to beginning

[JClackett]

Not sure when this started happening but when typing the cursor randomly jumps to the start of the input

Deployed repro Code

Deployed using next.js and have to use next/dynamic for ssr issues.

Seems to be when using onChange + value, the onChange callback sets a weird value

https://user-images.githubusercontent.com/12549124/207074052-33c6c441-a86a-4ff4-bf61-7a1d21ae83c6.mov

[bluefqcebaby]

u need to set new value on onblur event, not on onchage

[JClackett]

Wow, crazy thats the simple fix, thank you!

[prasanthvgts]

but didn't worked for me but i using in react web

[akscrv]

u need to set new value on onblur event, not on onchage

thank you dear.

[Shahilgope1520]

it worked but when we directly navigate backword with browser's back button and our cursor is on editor it throws error like undefined

[Archisketch-Finn]

onBlur seems to fix this problem, but it won't work well if I want to validate the form during import. Please fix it soon.

[strongui]

Any update on this? Blur only options isn't really viable, especially if you need to validate the field on change.

[nitingoyal0996]

@bluefqcebaby thanks dude 😄 Could you please add a bit detail as in why does onBlur work not onChange?

[rahulohol]

u need to set new value on onblur event, not on onchage

Thanks, bro

[robin-garnham]

Also affected by this.

I want to track changes within the input so I can trigger changes in the UI (e.g. enabling the save button). Only being able to run this logic after the input blurs makes it more complicated to achieve this effect.

[robin-garnham]

I've found there's heaps of other tickets for this same issue, going back several years and no solid resolutions... people trying to create a new wrapper (to replace this entirely).

Issues all stem from trying to control it as a controlled input (e.g. onChange updates a useState on every key stroke).

There's no onFocus handler, making it difficult to ignore updates.

The editor is great, but this library doesn't really make it react friendly...

[aburd]

For anybody reading this, this bug doesn't occur if you use the component as an uncontrolled component. Meaning, use JoditEditor's onChange property to maintain your state, but don't pump the state back into JoditEditor's value prop. However, since we don't have a defaultValue prop, we have to hack on our own. Obviously this is not an option for all usecases, but in my case I only needed to set the editor's data once the editor's initial state was fetched from the server. My final code look a bit like this:

function MyJoditEditor({ placeholder, defaultValue, onChange }: MyProps) {
  const editor = useRef<Jodit>(null);
  const defaultValueSet = useRef<boolean>(false);

  useEffect(() => {
    if (defaultValue && editor.current && !defaultValueSet.current) {
      editor.current.setEditorValue(defaultValue);
      defaultValueSet.current = true;
    }
  }, [defaultValue]);

  return (
    <JoditEditor
      ref={editor}
      config={{ readonly: false }}
      onChange={onChange}
    />
  );
}

[vladfedorov92]

I fixed it this way

export const TheJoditEditor = (props: Props) => {
      const [value, setValue] = useState('');

      const config = useMemo(
        () => ({
           some options...
          }),
          []
    );

    const onBlur = (newValue: string) => {
        setValue(newValue)
    };

    return <JoditEditor config={config} value={value} onBlur={onBlurValue}/>;
};

or u can in onChange dispatch value to store and don't use onBlur event to save it. useEffect({dispatch value from store},[])