Combobox Component (Multiselect)

[scurker]

Follow general ARIA practices guidelines: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

This should include guidelines outlined on #1088 with the addition of the following

Multiselect is configurable via a prop:

<Combobox label="Combobox" multiselect>
  <ComboboxItem value="...">
    Item
    Longer Description
  </ComboboxItem>
</Combobox>

When multiple items are selected, each item selected should be displayed via a removable tag:

When the selected items overflows the max-width of the contained area, they should naturally wrap and provide space for the input

Expected Behaviors

Backspace (with no text entered) should highlight the last selected "pill". Backspace again (or delete) should delete that selection. When any pill has active focus, backspace or delete should delete that selection.

Each pill should not be a tabstop but navigated with arrow keys. We should support arrow key navigation when the inner text field does not have any text.

When a selection is made to select an active selection, the combobox inner text field should be reset to blank.

When disabled, do not show the "x" for any of the pills and clicking on a pill should not remove it from the selections.

Form Fields

A single select combobox typically displays form field values as a single hidden input, e.g. <input type="hidden" name={name} value={value} />. When multiple values are selected, the hidden input field should be individual fields mapping to the same name for each value, example:

{selectedValues.forEach(value => (
  <input type="hidden" name={name} value={value} />
))}

[thuey]

Will value, defaultValue, and onSelectionChange also be enhanced to optionally take an array, perhaps only if multiselect=true?

[scurker]

That's a good question. It could either be a comma delimited list of items or an array of items (as you're suggesting). For form submissions I think we'd need the items to be comma delimited, so it might be useful to work out some of the use cases that we need this for to help better understand where we might want to land.