What is the problem?
When the dropdown menu has a scroll, you cannot always scroll it using keyboard navigation. The focus goes out of view.
I can reproduce it with all the demo dropdown menus on https://doc.wikimedia.org/codex/latest/components/demos/lookup.html except for "With fetched results and infinite scroll" and "Form field".
Steps to reproduce problem
- Go to https://doc.wikimedia.org/codex/latest/components/demos/lookup.html#default
- (Without scrolling the viewport) In the first dropdown menu, type "a"
- Press the down arrow to try to select an item not currently visible
Expected behaviour: The menu is scrolled down to follow the focus
Observed behaviour: The focus goes out of view
Environment
Browser: Firefox 115 and Chromium 120 on Debian 11. Safari 17.3 Mac OS Sonoma. Chrome 123 on Windows 11.
Screenshots
Example from Chromium 120:
Acceptance Criteria
- Keying up or down on a list of menu items should scroll the item into view.
- Inside Menu.vue, the maybeScrollIntoView() function calls a Web API method called scrollIntoView().
- Maintain the scroll index logic which says the scroll should start at the highlighted menu item when one exists, otherwise start at the top of the list (index 0).
- Ensure the Menu and components that have a Menu behave as expected.
- Check these components: Menu, Lookup, Select, MenuButton, Combobox, and TypeaheadSearch.
- Note: TypeaheadSearch is an exception. It doesn't have a scrollable menu nor does it implement FloatingUI.