Feature: Support multiple selected items in Listbox.

[cdavis4]

Hi, I'm already using the Listbox for a single selection option. Looks and functions well. Would like to be able to reuse this component for a multiple selection as well with the existing OOTB code. Although, I can add the aria-multiselectable option. The existing button doesn't support this feature.

[RobinMalfait]

Hey! Thank you for your feature suggestion!
Much appreciated! 🙏

This is something we want to add in the future, but I can't give you an ETA on it yet. Will keep this issue open, thanks for the suggestion!

[shannonrothe]

+1 for multi-selection w/ Listbox, would be amazing 🙌

[parsch]

I also needed a multi-selection Listbox, here's a quick mockup: https://codesandbox.io/s/headlessuireact-listbox-multiple-mockup-widh4

The mockup is basically only using a workaround for selecting and deselecting options including determining the selected state of options.

[frandiox]

@parsch Thanks, I've done something similar in Vue. However, it always closes when clicking on a ListboxOption. Did you figure out any way to prevent that?

[parsch]

@frandiox You have to replace the default handling of {({ open }) => (<Your inner Listbox... />)} with manually controlling/setting the open state (forcing it to stay open when selecting options). I updated the mockup: https://codesandbox.io/s/headlessuireact-listbox-multiple-mockup-widh4

[tctrautman]

Thank you for posting your workaround @parsch! It's working beautifully for me in the codesandbox, but I'm unfortunately having a hard time replicating in v0.3.1 (I wouldn't expect you to maintain this -- just an FYI.)

As best I can tell, Listbox.Button no longer uses any onClick prop that's passed to it. IIUC this comes from some changes in v0.3.0, but that's a bit of a guess at this point. I'm exploring some workarounds and will post here if I come across any.

[mgambill]

@RobinMalfait - I have the code for this done if you're interested.

https://qc1f9.sse.codesandbox.io/listbox/multi

if the modelValue is an array the logic automatically allows multi selection. Let me know if you want me to do PR.

[parsch]

@tctrautman I can reproduce your point when using 0.3.1 with the Codesandbox, seems like they started controlling respective onClicks in 80402e7#diff-cb335fbe544f778130fb8f7c8eeb065f05c0038ade35c572cbfee6c35dac05a5R217

[Jbmanllr]

@RobinMalfait - I have the code for this done if you're interested.

https://qc1f9.sse.codesandbox.io/listbox/multi

if the modelValue is an array the logic automatically allows multi selection. Let me know if you want me to do PR.

Hey thanks, thats great, but im a it confused, your link include multiple examples that doesnt exist in the actual package, did you code it yourself or i have missed something here?

[landorid]

Actually, the code provided by @parsch can be easily modified:

Just create a separated ListBox Button and add like this: <Listbox.Button open={isOpen} as={Btn}> And on the Btn component you can set onClick event.

Here is the full Component: https://gist.github.com/landorid/f747c49342dd9eac1b89b251cbe39616 (Also added clickaway listener)

[gepd]

Would be good to support a multiple selection with tags like this example:

https://codesandbox.io/s/headlessuireact-listbox-example-forked-2snzy

I suppose it won't work with version v0.3.1 as well.

Note: the example have a glitch when you remove a selected person from the tag as it's just a concept test

[mgambill]

@Jbmanllr

Hey thanks, thats great, but im a it confused, your link include multiple examples that doesnt exist in the actual package, did you code it yourself or i have missed something here?

The link started out with me fixing a bug in the package ( #285 ). Since I was in the code base I added the multiple selection logic to the code. The site was for me to be able to regression test.
No it doesn't exist in a package the point of the link was for Robin to review and possibly implement it officially in the package.