lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Bug: Editor steals focus to other components when AutoLinkPlugin is present

Open emaborsa opened this issue 2 years ago • 2 comments

Lexical version:

@lexical/react 0.10.0 lexical 0.10.0

as well with @lexical/react 0.12.2 lexical 0.12.2

Link to code example:

https://codesandbox.io/s/lexical-editor-focus-problem-with-autolinknode-88md65

Steps To Reproduce

  1. start the sandbox
  2. type something in the first input (should work)
  3. type something in the second one, the lexical editor (should work as well)
  4. type something in the first input (focus should return to the editor)
  5. remove the AutoLinkPlugin on line 42 of Editor.tsx
  6. type something in the first input (should work)
  7. type something in the second one, the lexical editor (should work as well)
  8. type something in the first input (should work as well)

The current behavior

One input is a simple text field and the other one is the lexical editor. When typing into the first one, the focus returns to the lexical editor. This happens only if AutoLinkPlugin is present.

The expected behavior

If typing something in the first input field the focus should stay there.

emaborsa avatar Sep 18 '23 09:09 emaborsa

I also encountered this issue - in my case it was causing cryptic scroll jumps. I have multiple editors in one page (they are a part of an infinite scroller), and the scroll was pinned to the bottom whenever new editors loaded in. The problem was caused by the last editor taking focus.

I implemented a workaround until this gets fixed - I attached focus listeners to the _rootElement, and only enable the AutoLinkPlugin when a particular editor gets focused.

ipeterov avatar Apr 01 '24 15:04 ipeterov

Plus 1, also discovered this issue

ruxandra-anghel avatar Nov 07 '24 07:11 ruxandra-anghel