Summary
Currently, the menu component displays all menu items provided to it at once and does not support showing some of the menu items initially, then allowing the user to scroll to the rest of them (this would require the menu container having a max-height)
This behavior is critical to components with menus, which may have any number of menu items.
Current behavior
General menu behavior
If a menu component with many items is inside a container with limited height that becomes scrollable when it's too tall, it look like this:
 |  |  |
If it's not inside such a container, it expands over the rest of the page endlessly, and you have to scroll down the page to get to the item you're looking for (then back up once you've chosen an item).
 |  |  |
TypeaheadSearch
The default search client in Vector sets a default limit of 10 results. We need to make sure TypeaheadSearch continues to display up to 10 results without scroll in the existing implementation in Vector. There are 2 ways to achieve this, depending on what we define as default behavior:
- If the default behavior is to show all menu items at once, nothing needs to be done to keep TypeaheadSearch working as it currently works
- If another default number of results shown initially is set, we will need to configure this limit to be 10 for TypeaheadSearch
In a future task (T306933), we will make the number of results initially shown configurable within CdxTypeaheadSearch in order to enable scroll there, but for this task, we should maintain the status quo.
Design
| This Figma file contains the specifications for the configurable scroll of the Menu component. |
Considerations
- By default, Menu displays all available options at once (i.e. the current behavior).
- Allow setting a custom max number of visible menu items: Implementers of the component should be able to define the maximum number of items that menu will display by default. Recommendations regarding the minimum (3) and the maximum (10) number of options will be provided in the Menu's demo page.
- Item selection behavior in “scrollable” menus: Given that users have selected an item from a scrollable menu, when the menu is reopened, the scroll position will be maintained, and the item will display a highlighted state (selected + keyboard focus/hover). Headsup: this only applies to selection menus, since selection is not preserved in navigation menus (such as the TypeaheadSearch’s).
- Footer selection behavior in menus with custom scroll: Given a scrollable menu with a footer, when users scroll, the menu’s footer keeps a fixed position at the bottom. Users can use their mouse or keyboard to access available options that are not on sight. Keyboard users will be able to access the footer from the last option in the menu using one more down arrow (⬇) stroke or the end key.
Implementation
Number of items initially displayed
This could be configurable via a prop, or we could instruct library users to limit the number of menu items they provide to the Menu component in order to set a specific limit. If we do add a prop, it should probably default to null, or no limit.
This configuration will need to be part of the menuConfig object, so it can be provided to parent components like Lookup or Select, then passed down to Menu.
Add scroll behavior
We will need to:
- Set a max height of the menu, which may need to be calculated on the fly
- Test out and improve scrolling behavior so it meets UX standards
- Ensure keyboard navigation still works, and that an interactive footer (e.g. the search footer in TypeaheadSearch) can still be reached easily
- Ensure that, when the menu is closed then reopened, the resulting UX is as expected. We should especially consider this when a menu item is selected—should the menu open to that item?
Demonstrate this behavior
We should add the following demos:
- Menu: simple demo with an explanation of how this all works
- Lookup, Select: realistic demos showing how this can be configured, with a reference to the Menu page if needed (should we add one for Combobox, too?)
Acceptance criteria
- The Menu component can be configured to show an initial set of items, then allow scrolling through the entire list of menu items
- This behavior can be configured in the Combobox, Lookup, and Select components
and there are demos of at least the latter 2 present to show this behavior(demos for components that use a menu will be done later) - A demo is added to the Menu demo page displaying and explaining this behavior
- No changes are made to the current UX of TypeaheadSearch, as this will be implemented separately
