wonder-blocks icon indicating copy to clipboard operation
wonder-blocks copied to clipboard

WB-1675: Implement Combobox component with single selection

Open jandrade opened this issue 9 months ago • 6 comments

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:

  1. #2216
  2. Add Combobox component with Single selection support. [CURRENT]
  3. Add multiple selection support to Combobox component.
  4. Add autocomplete support to Combobox component.
  5. 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

jandrade avatar May 01 '24 22:05 jandrade