Summary
The following features are being added to the Menu component specifically to support the use case of TypeaheadSearch on wikidata.org:
- T306932 will add configurable scroll behavior to the Menu component
- T316603 will add "load more" behavior to the Menu component
This task covers enabling these behaviors in TypeaheadSearch and making them configurable, specifically so that different wikis can enable and configure these behaviors based on their needs.
Implementation
Configurable scroll
Other components with menus have a menuConfig prop, which allows the implementer to specify a bunch of common menu behaviors in a single object, which is then passed down to the Menu component (see Lookup, Select, and Combobox).
TypeaheadSearch does not do this, instead creating the menuConfig object in the setup function and then passing it to the Menu component. It was set up this way because TypeaheadSearch is opinionated about some of the options in menuConfig.
In order to enable configurable scroll in TypeaheadSearch, the component will need to take in a prop for the number of items to display initially, then pass it to the Menu component via menuConfig (note that this is assuming this is how we will implement it in T306932, which may change). The default number of items should be 10.
Load more
First, "load more" behavior should be off by default and configurable via a boolean prop.
T316603 will add an event that gets emitted when the user gets to the end of a list of menu items. TypeaheadSearch will need to be updated to listen for that event and, if "load more" behavior is enabled, tell the parent component to fetch more menu items, then pass them to the Menu component.
Demo
The Wikidata example on the TypeaheadSearch demo page should be updated to demonstrate these behaviors.
Acceptance criteria
- Scrolling to additional menu items can be turned on via a prop that sets the number of items shown initially. (This can be tested in the Menu demo)
- Load more behavior can be turned on (off by default)
- Load more behavior works when turned on
- The Wikidata demo on the TypeaheadSearch demo page demonstrates and explains these behaviors