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

WB-1676: Combobox - Add multiple Selection support

Open jandrade opened this issue 9 months ago • 6 comments

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:

  1. #2216
  2. #2221
  3. Add multiple selection support to Combobox component.[CURRENT]
  4. Improve accessibility support on Combobox (labels, aria-live).
  5. Add autocomplete support to Combobox component.
  6. Add async/dynamic support to Combobox component.

Issue: https://khanacademy.atlassian.net/browse/WB-1676

Test plan:

  1. Navigate to: /?path=/docs/packages-dropdown-combobox--docs#multiple%20selection
  2. Use the multi-select version of the Combobox.
  3. Navigate using the keyboard.
  4. 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

jandrade avatar May 07 '24 19:05 jandrade