Bug: [TypeaheadMenuPlugin] Unexpected selectedIndex Jump to List Item Cursor is On When Navigating with Keydown/KeyUp
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 55
Description
The selectedIndex in the TypeaheadMenuPlugin unexpectedly jumps to the list item that the mouse cursor is currently on when scrolling down the menu using the keydown/keyup navigation. This behavior occurs because the list items are listening for the onMouseEnter event, which updates the selectedIndex.
https://github.com/facebook/lexical/blob/933ec6ada2b2f25db807cb125de75952ea0f7fd3/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx#L393
I am wondering if the onMouseEnter event is necessary. If it is not required, we could consider removing it to resolve this issue.
Lexical version: v0.9.1
## Steps To Reproduce
1. Visit the [playground](https://playground.lexical.dev/).
2. Enter `/`. (This will open the Typeahead Menu.)
3. Hover over one of the list items.
4. Press the down key until the menu scrolls down.
https://user-images.githubusercontent.com/4246353/230855874-feb61bf1-9c17-4348-808e-3172b5202d81.mp4
## The current behavior
In the TypeaheadMenuPlugin, while navigating the menu using the up and down arrow keys, the selectedIndex unexpectedly moves to the list item where the cursor is currently located.
## The expected behavior
When using the up and down arrow keys to navigate the menu, the selectedIndex should not unexpectedly move to the list item where the cursor is located. Instead, it should progress sequentially through the list items as intended.
Contributor guide
Assessment
This issue has not been assessed yet.