wonder-blocks
wonder-blocks copied to clipboard
WB-1675: Implement Combobox component with single selection
Summary:
This is the first PR associated to the Combobox implementation. It includes the basic structure of the Combobox component with single selection support.
Combobox Implementation Plan:
- #2216
-
Add
Combobox
component with Single selection support. [CURRENT] - Add multiple selection support to
Combobox
component. - Add autocomplete support to
Combobox
component. - Add async/dynamic support to
Combobox
component.
Issue: https://khanacademy.atlassian.net/browse/WB-1675
Test plan:
Verify that the new Component
component works as expected and that the new
documentation is accurate.
/?path=/docs/packages-dropdown-combobox--docs
https://5e1bf4b385e3fb0020b7073c-mzmurnrasq.chromatic.com/?path=/docs/packages-dropdown-combobox--docs
Keyboard navigation:
- Focus on the input field to open the Listbox.
- Use the
ArrowDown / ArrowUp
keys to navigate through the options. - Use the
Enter
key to select an option. - Use the
Escape
key to close the Listbox. - Verify that the selected option is displayed in the input field.
https://github.com/Khan/wonder-blocks/assets/843075/64c47c5e-81f5-4e16-a22a-ccc8fcb7abb5