facebook / facebook/lexical

Bug: [TypeaheadMenuPlugin] Unexpected selectedIndex Jump to List Item Cursor is On When Navigating with Keydown/KeyUp

Open
#4,296 1 comment 0 reactions 0 assignees View on GitHub
all-platforms-bug popover typeahead
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.