wonder-blocks
wonder-blocks copied to clipboard
WB-1676: Combobox - Add multiple Selection support
Summary:
Create the multiple version that displays the selected values as individual Pill components that can be deleted/unchecked.
Added a new hook to manage keyboard navigation for the multiple selection logic.
Combobox Implementation Plan:
- #2216
- #2221
-
Add multiple selection support to
Combobox
component.[CURRENT] - Improve accessibility support on Combobox (labels, aria-live).
- Add autocomplete support to
Combobox
component. - Add async/dynamic support to
Combobox
component.
Issue: https://khanacademy.atlassian.net/browse/WB-1676
Test plan:
- Navigate to: /?path=/docs/packages-dropdown-combobox--docs#multiple%20selection
- Use the multi-select version of the Combobox.
- Navigate using the keyboard.
- Verify that you can select multiple options and can delete selected options using the keyboard.
Keyboard navigation instructions (when the combobox is focused):
-
Arrow Up | Arrow Down
: to navigate the listbox options -
Arrow left | Arrow right
: to navigate the selected options (pills displayed before the input) -
Backspace
: removes the last pill in the stack -
Enter
:- When the listbox is focused: unselects an option from the list
- When the pills are focused: removes the currently focused pill and unselects the associated option in the listbox.
https://github.com/Khan/wonder-blocks/assets/843075/7ad1476a-df73-42e0-87a3-2e7bf80c6b77