How to blur lexical editor after input has been submitted

67 views Asked by At

After user clicks on submit button, I want clear the text editor and also blur it (or lose focus). In order to achieve that, I added a plugin, which takes in a prop indicating whether to clear editor if the value is true. When the value is true, I dispatch CLEAR_EDITOR_COMMAND which successfully clears the editor, however, I call the editor.blur() which from the docs is supposed to lose focus from the editor, but in my case, editor is has focus (with cursor active and user still able to type).

Here a code of the plugin below:

const RichTextClearPlugin = ({ shouldClear, handleShouldClearUpdate }) => {
  const [editor] = useLexicalComposerContext();
  React.useEffect(() => {
    if (shouldClear) {
      editor.blur();
      editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
      handleShouldClearUpdate(false);
    }
  }, [editor, shouldClear, handleShouldClearUpdate]);
};

I am calling editor.blur() and expecting the editor to lose focus as in docs: https://lexical.dev/docs/api/classes/lexical.LexicalEditor#blur. But it's not losing focus.

0

There are 0 answers