Multi select option in useComboBox hook

[devanSAGA]

Hey folks!

I am using useComboBox hook from react-aria. Is there a way to enable a multi-select feature for this hook?

I found a similar ongoing discussion here, but is there any example or repo that implements the approach mentioned in the discussion? Can we handle the multi-selection without actually forking and updating the useComboBox and useComboBoxState hook?

EDIT:
On a side note, I was also curious about are react-aria and react-stately libraries tree-shakable? I am not able to find where it is mentioned in the docs.

[devongovett]

Please see #2140. Multiple selection is not built in at the moment. One possibility is to handle selection events from the combobox yourself, add the item to a list you maintain in your own state, and render that yourself outside the combobox somewhere. If you make the combobox controlled you could also clear the input when selection occurs and the item is added to your own selection state.

On a side note, I was also curious about are react-aria and react-stately libraries tree-shakable?

Yes. It should work with any modern bundler. You can also choose to import each package individually (e.g. import {useComboBox} from '@react-aria/combobox' rather than import {useComboBox} from 'react-aria') if it's not working for you for some reason.

[devanSAGA]

Thank you 👍

[devanSAGA]

One possibility is to handle selection events from the combobox yourself

@devongovett, I saw useComboBox hook internally uses useComboBoxState which accepts onSelectionChange as a valid prop but it only returns one single key (as it is single selection mode by default). So to enable multi-selection, and modify the selection event to return multiple selection keys I need to fork the useComboBoxState hook right? is there a way I can avoid forking and still manage to handle selection events?

Thanks in Advance 🙏

[devongovett]

You could handle the multi-selection outside combobox entirely. For example something like this:

let [selectedKeys, setSelectedKeys] = useState(new Set());

let onSelectionChange = key => {
  // Add the new key to the full list of selected keys
  setSelectedKeys(keys => new Set([...keys, key]));
};

<ComboBox onSelectionChange={onSelectionChange}>{/* ... */}</ComboBox>