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)

[timheerwagen]

Does your code support keyboard interactions? Because i wrote a similar code, the button is tab-bar and the listbox options open with enter, but you can't scroll with the arrow keys or close with escape.
https://gist.github.com/timheerwagen/89e95efe3934d67cacba9e6282f8932c

[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

[vhscom]

Cross-referencing potentially related request for a multi-select component: #1201

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

[bezreyhan]

@RobinMalfait I'm able to make multiselect work if I manage the selected options myself. The issue I'm running into is that ListBox will close when an option is selected. I can also manage the open state myself by using static and adding some event handlers, but then I lose out on a lot of the keyboard shortcuts and focus that ListBox takes care of (e.g opening and closing ListBox via the keyboard, applying focus to options when the ListBox is open).

One solution would be to create a prop that tells ListBox to not change the open state when an option is created.

[ManalLiaquat]

can you please tell me how can I close the list by clicking outside?
I want the functionality of backdrop hide

[marktellez]

@ManalLiaquat I use this: https://usehooks.com/useOnClickOutside/

[ManalLiaquat]

@marktellez Thanks for the recommendation 🙌. I did it by custom handling because I mostly don't overload the project by using external libraries 😅.

[ManalLiaquat]

I have used the code sandbox given in the above comment
and modify it for closing the select list on clicking the backdrop/background

CODE: https://codesandbox.io/s/headlessui-react-listbox-multiple-mockup-forked-squ0eo?file=/src/App.js

[ManalLiaquat]

I have used the code sandbox given in the above comment
and modify it for closing the select list on clicking the backdrop/background

CODE: https://codesandbox.io/s/headlessui-react-listbox-multiple-mockup-forked-squ0eo?file=/src/App.js

[philsp]

This combined with the new autocomplete combobox could be a great tailwind-friendly replacement for react-select. Keyboard navigation is still missing

[aronduby]

has anyone been able to pull this off with Vue? I've gotten super close based on the react example, but when I don't let the options close the focus goes back to the button and it breaks the active reference (so no highlighting on hover) until I use the keyboard navigation again.

I attempted to create a codesandbox for it, but it just keeps through that stupid import error 😠Will try again a little later.

[jamesthomsondev]

I've found Codesandbox is super buggy lately - so I've been using Stackblitz instead because of this.

I'm also in the same boat as you. I can get multiselect to work, but then keyboard nav has a number of issues. I've gotten closer by swapping in the Combobox (my use case requires a filterable search input), but the lack of multiselect support throws things out of whack.

[MJsuriya]

The same multiselect mockup is not working with Typescript and headless ui 2.5.0.

https://stackoverflow.com/questions/71406838/typescript-headless-ui-listbox-open-close-management

which is making the listbox closing at every selection. Any suggestion on this would be helpful.

[stuarthunter]

+1 for multi-select on listbox. We use multi-select comboboxes extensively in our admin portal and this is a must-have feature for us.

[pricklywiggles]

+1 on multi-select please.

[Redmega]

Wouldn't that just be the Combobox?

[RobinMalfait]

The multi value Listbox and Combobox features are already implemented and will be available in the next release.

You can install the insiders build to test it out!

[aronduby]

AWESOME! And great timing because I'm supposed to be looking at how to do this today. Are there docs for this version available somewhere yet?

[RobinMalfait]

There is no documentation yet (hence why it's not released yet). But you enable it by providing an array to the value property instead of a single value.

An example can be seen here:

• https://github.com/tailwindlabs/headlessui/blob/main/packages/playground-react/pages/listbox/multi-select.tsx
• https://github.com/tailwindlabs/headlessui/blob/main/packages/playground-react/pages/combobox/multi-select.tsx

[ibraelillo]

@RobinMalfait when this will be released?

[aronduby]

Wonderful, thank you

…

On Tue, Apr 12, 2022, 12:41 PM Robin Malfait ***@***.***> wrote: There is no documentation yet (hence why it's not released yet). But you enable it by providing an array to the value property instead of a single value. An example can be seen here: - https://github.com/tailwindlabs/headlessui/blob/main/packages/playground-react/pages/listbox/multi-select.tsx - https://github.com/tailwindlabs/headlessui/blob/main/packages/playground-react/pages/combobox/multi-select.tsx — Reply to this email directly, view it on GitHub <#668 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAE6WVSWPOY6ZR7QQDCBRG3VEWRUJANCNFSM5BP3NVTQ> . You are receiving this because you commented.Message ID: ***@***.***>

[ibraelillo]

When this will be released?

[aronduby]

I don't know the answer to that, but it's super easy to install the insider release with this in it, just have to use the insiders version tag instead of latest with npm install. They have it in the readme, I did it the other day and no problems so far