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.

[snowystinger]

Just an FYI that we are also on our way to building what was described in https://github.com/adobe/react-spectrum/issues/2140#issuecomment-902237781 This is the PR where TagGroup work has been started https://github.com/adobe/react-spectrum/pull/1922 Once we have that, we'll be able to consider joining it with a combobox or other components to handle multi select

[donaldpipowitch]

@crazko are your multi select compatible hooks public by any chance?

[crazko]

@donaldpipowitch let's check example at https://codesandbox.io/s/spectrum-multiselect-9be866-9be866. It is a simplified version of our Select component implementation with support for both single & multiple selection mode.

There's a bug though, which I was not able to find a fix for so far; it is not present in our library. But should give enough input for how this may work.

[donaldpipowitch]

Thank you very much!

[npearson72]

Wondering if it will be possible to update the input (or contenteditable element) with a mix of values. My use case is an omni-search box that allows users to type random search strings, but as they type a menu can appear to offer them selections for tags, categories, and other meta data fields. If they make a selection (ex: tag), it should appear in the input field where their cursor was, allowing them to continue typing/selecting as they wish from there.

[snowystinger]

If you are using our hooks to make your combobox, this should already be possible. I wouldn't actually update the input for mixed anything, but you could render anything you wanted before or after the combobox, then just make it visually look like it's part of the input.

Combobox has no plans to support multi select. Instead, when multiselecting, remove selected items and put them outside the combobox, just like you're suggesting with the tags.

[npearson72]

@snowystinger Thanks for the hint. But from what you're describing I'm struggling to understand how a user would interact with the data they've entered.

For example, say they enter the following:

The quick brown fox jumped over the lazy dog

But now they want to change the word "jumped" to "ran". How would it be possible if this was rendered outside of the input field (or contenteditable element)?

[snowystinger]

hmmm have you tried tokenizing to words, and each word is a combobox? because it doesn't seem like the whole thing is one combobox.

I'm not sure the accessibility implications of this approach, but I don't think it fits combobox otherwise at all. This is an, you're off the map, situation.

Keep in mind, this https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ is the aria pattern we have implemented.

A combobox is an input widget with an associated popup that enables users to select a value for the combobox from a collection of possible values.

[npearson72]

@snowystinger Got it. Thanks for the explanation. I think you're right in that it might be some hybrid pattern. Appreciate your feedback.

[andresgutgon]

Hi, yesterday I was also looking for this. I was able to do an autocomplete + tags using

1. useKeyboard
2. useListBox
3. useListState

Basically I reimplemented useComboBox with those primitives but configuring useListState as multiple to be able to handle multiple selection 🎉

[wporoslo]

@andresgutgon Could you kindly share your implementation? I'm struggling with this

[andresgutgon]

It's still in the oven, but when I have time I'll share a sandbox with the parts.

[andresgutgon]

@wporoslo sorry for the delay. I made a very ugly version of the one we built

But the parts necessary to do a combobox + multiple selection are there https://codesandbox.io/s/sleepy-keller-qjygke?file=/src/App.tsx

Final result on our side 🎉

[wporoslo]

@wporoslo sorry for the delay. I made a very ugly version of the one we built thank you so much!

[yarastqt]

Is there any status on this issue? This is a very important feature that we are waiting for 😔

[snowystinger]

Is there any status on this issue? This is a very important feature that we are waiting for 😔

Please see the discussion above, it should answer any questions you have as well as how to build your own. If the ask is specifically for a React Spectrum TagField component, that should be moved to a different place. useCombobox is a specific aria pattern that will not be supporting multiple selection on its own.

[amauryfischer]

Now that Taggroup is released i would love to see a Tagfield / comboBox with multiple selection. Like "Autocomplete" in material ui.

[tekno0ryder]

NextUI just dropped their select component and it supports multi selection 👏🏽

[sadeghbarati]

This project is using react-aria and has multi-select support

• https://project44.github.io/manifest/inputs/mult-combobox
• https://pluralsh-design.web.app/?path=/story/combo-box--cluster-tags
• https://pluralsh-design.web.app/?path=/story/select--default
• https://anvil.servicetitan.com/components/anvil-select/
• https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--multi-select-basic (react-select)

---

but I'm eager to see it in react-aria-components