Does CLEAR_EDITOR_COMMAND shift focus?

[tpatalas]

I have two LexicalComposers that triggers editor.dispatchCommand(CLEAR_EDITOR_COMMAND, editor) upon submit button. (button is set outside of the LexicalComposers)

Focus is always reset to second (last) LexicalComposers and it overrides the autoFocus plugin: editor.focus()

Is this correct behavior?

[trueadm]

Yes. This is intended here, as when you clear the editor, it moves selection to the start of the empty editor – so in a way, it's triggering an auto selection by doing this. As you're doing clearing both editors, the 2nd will also get the last selection trigger. What would your desired effect here be?

I'd recommend maybe creating your own onClear function and passing it to <LexicalClearEditorPlugin>. That way you can opt to clear the editor, but not move focus to the end.

[tpatalas]

Glad I got the comment back in a light speed. I thought It was bug or something and could not find anywhere in the document.

My initial intention was to autoFocus on first LexicalComposers. I will try it out onClear. Thank you very much.

[chalecki]

@trueadm could you shed some light on the reasoning 🤔 why it's desirable?

From my perspective, we should be able to clear the editor's content without focusing or at least prevent that via another prop/argument.

I have the same issue and don't know how to prevent/overwrite the behavior - at this point, the page scrolls to the last editor that is displayed at the bottom of the page.

[trueadm]

You can easily create your own behiavor for this. You want to only be doing these lines:

lexical/packages/lexical-react/src/LexicalClearEditorPlugin.ts

Lines 32 to 36 in 30ad13b

	const root = $getRoot();
	const selection = $getSelection();
	const paragraph = $createParagraphNode();
	root.clear();
	root.append(paragraph);

You can even register your own command listener for the CLEAR_EDITOR_COMMAND command at a higher priority and override the the default so it does what you want.

[chalecki]

Thanks for your answer @trueadm.

I've dug more and found out I don't really need the ClearEditorPlugin at all. After further investigation it turned out, the focus is caused while I'm calling the root.append() method. So I wrote a plugin for setting up initial content (HTML string) that is fetched from the backend.

export const SetInitialValuePlugin: React.FC<{ initHtml: string }> = ({ initHtml = '' }) => {
  const [editor] = useLexicalComposerContext();
  const isFirstRender = useRef(true);

  useLayoutEffect(() => {
    editor.update(() => {
      if (isFirstRender.current && !!initHtml) {
        isFirstRender.current = false;

        const parser = new DOMParser();
        const dom = parser.parseFromString(initHtml, 'text/html');
        const nodes = $generateNodesFromDOM(editor, dom);

        const root = $getRoot();
        root.clear();
        root.append(...nodes);  // <--- this line causes focus / scorll to the editor

        editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
      }
    });
  }, [initHtml, isFirstRender.current]);

  return null;
};

Is there any chance to prevent that behavior? I'm wondering if there is a possibility of just silently replacing the displayed content 🤔 or preventing focusing?

[trueadm]

Try setting selection to null? $setSelection(null)