Element loses focus on first state change in React 18

[pieter-berkel]

When you first change the content of the element you are interrupted, as if the element loses focus. I have tested this in multiple browsers and in multiple react versions. This problem only ocurs in React 18 Codesandbox

[mechanical-turk]

i'm seeing this error on react 18.2.0. first onChange loses focus, but the following ones keep focus. Example code:

// EditableBlock.tsx

export const EditableBlock = ({
  content,
  onChange,
}: {
  content: string;
  onChange: (content: string) => void;
}) => {
  const editorRef = useRef(null);

  useEditable(editorRef, onChange);

  return <div ref={editorRef}>{content}</div>;
};

// index.tsx

export default function Home() {
  const [content, setContent] = React.useState('Hello world!');
  const onChange = useCallback((content: string) => {
    setContent(content);
    console.log({ content });
  }, []);

  return <EditableBlock content={content} onChange={onChange} />;
}

[Mihir-Karbelkar]

Is this library alive? Looking to use it in a project because it's approach looks better than react-contenteditable which doesnt really work properly with hooks

[nyacg]

I have the same issue, did anyone ever find a workaround?

[thijsgadiot]

Should be fixed in https://github.com/FormidableLabs/use-editable/pull/29 🎉

[inokawa]

Hello, I'm developing a library inspired by use-editable. It will work in React 18 (and also in other frameworks). https://github.com/inokawa/edix