Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Support multiple selected items in Listbox. #181

Closed
cdavis4 opened this issue Dec 21, 2020 · 13 comments
Closed

Feature: Support multiple selected items in Listbox. #181

cdavis4 opened this issue Dec 21, 2020 · 13 comments
Assignees

Comments

@cdavis4
Copy link

cdavis4 commented Dec 21, 2020

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
Copy link
Member

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!

@RobinMalfait RobinMalfait self-assigned this Jan 8, 2021
@shannonrothe
Copy link

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

@parsch
Copy link

parsch commented Jan 15, 2021

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
Copy link

@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
Copy link

parsch commented Jan 27, 2021

@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
Copy link

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
Copy link

@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
Copy link

parsch commented Mar 30, 2021

@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
Copy link

Jbmanllr commented Apr 7, 2021

@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
Copy link

landorid commented Apr 11, 2021

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
Copy link

gepd commented Apr 14, 2021

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
Copy link

mgambill commented Apr 16, 2021

@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.

@tailwindlabs tailwindlabs locked and limited conversation to collaborators Jul 4, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Projects
None yet
Development

No branches or pull requests

11 participants