Bug: Editor steals focus to other components when AutoLinkPlugin is present
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
- start the sandbox
- type something in the first input (should work)
- type something in the second one, the lexical editor (should work as well)
- type something in the first input (focus should return to the editor)
- remove the
AutoLinkPluginon line 42 ofEditor.tsx - type something in the first input (should work)
- type something in the second one, the lexical editor (should work as well)
- 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.
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.
Plus 1, also discovered this issue