Multiple selection support for useComboBox

[stephenh]

🙋 Feature Request

Update useComboBox to support multiple selection.

🔦 Context

We're building a type-ahead SelectField / MultiSelectField components, both on top of useComboBox and having to support multiple selections is of course making us do some hacky things, b/c it's not really supported.

I.e. we're not passing selectedKey to useComboBox b/c in a multiple selection scenario, the selectedKey could change, and so then odd things happen where useComboBox thinks its not controlled and/or the selectedKey !== inputValue, so it invokes various closing/reset behavior that we didn't mean to trigger.

Obviously this is on us for misusing useComboBox :-D , so just filing a request / wish list for it to get official multiple selection support. Thanks!

[devongovett]

We call this a tag field - a combination of a tag list and an input kinda like the "to" field in an email app. It's on the roadmap, but not sure when yet. We need to do some a11y research and testing to determine how best to implement it.

[stephenh]

@LFDanLu lazy ask, but is there a ticket created for the tag field that @devongovett mentioned? I'd like to follow it, so that I can see when react-aria lands support for it. Thanks!

[LFDanLu]

@stephenh I don't believe there is a ticket created for the tag field yet since it is still in its early germination phase unfortunately. https://github.com/adobe/react-spectrum/projects/1 is the best place to look regarding what is currently in flight.

[devongovett]

Going to keep this ticket open for tracking.

[ashiskumar-1999]

Hey @devongovett , Does it look like similar to this?
https://react-listbox.vercel.app/?path=/story/example-listbox--multiselect
https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/

[devongovett]

More like the second one, the first is only a select not a combobox (no textfield). Think similar to an email entry field like in Gmail. Here's a screenshot of the design from Spectrum that we'd be basing the pattern on:

[ashiskumar-1999]

@devongovett
If this falls under priority, I can start working on it.

[ashiskumar-1999]

Hey, @devongovett As I move forward trying to contribute to this task, I'm wondering if this use-case requires us to build another independent component/hook or this functionality could be incorporated into any existing component?

[beamery-tomht]

Is there a way to achieve this behaviour with existing hooks in react-stately and react-aria?

I'm working on a custom component library according to a design system and using react-aria extensively (without spectrum) and a multi-select is a new requirement. It would be great if we could leverage react-aria for this without having to lean on another library or build something from scratch.

From what I can see, some combination of a SelectionManager and ListBox looks like the most suitable approach

[jamesonhill]

Is there a way to achieve this behaviour with existing hooks in react-stately and react-aria?

I'm working on a custom component library according to a design system and using react-aria extensively (without spectrum) and a multi-select is a new requirement. It would be great if we could leverage react-aria for this without having to lean on another library or build something from scratch.

From what I can see, some combination of a SelectionManager and ListBox looks like the most suitable approach

This also matches my use case. Are we better off building something from scratch or is support for this use case on the near term roadmap?

[crazko]

Is there a way to achieve this behaviour with existing hooks in react-stately and react-aria?

I'm working on a custom component library according to a design system and using react-aria extensively (without spectrum) and a multi-select is a new requirement. It would be great if we could leverage react-aria for this without having to lean on another library or build something from scratch.

From what I can see, some combination of a SelectionManager and ListBox looks like the most suitable approach

I was facing this problem regarding multiselect as well. Since @react-aria/select and suitable stately hooks do not support multiple selection mode (and I totally get why it is the case), I followed the implementation of the Picker component, re-created hooks to support our needs (multiple selection, searching possibility, clear & select all buttons...) and built a new Select component with them.

So, instead of:

• useSelectState there's our new useMultiSelectState
  • inside it, useSingleSelectListState, there's useMultiSelectListState
• useSelect there's useMultiSelect

Basically it means a lot of copy-pasting and playing with properties of hooks underneath. Once I became more familiar with the original implementation I found it very flexible and customizable.