Multi-Listbox

[pvanliefland]

Hey there,

Just a first attempt/POC for a multi-select Listbox (see #181).

React-only at this stage.

Screen.Recording.2021-06-29.at.00.46.56.mov

It involves a few changes, mostly:

• Tracking the value in theListbox state, to be able to detect selected options while the Listbox is open
• Checking here and there if value is an array
• Focus handling

All in all, it seems to work ok, the only thing I can't get around is that when you use clickable items within Listbox.button (ex: badges with a remove action), the button gain focus on click, and it kind of messes things up.

I've added a basic test case - just a start.

Let me know if you'd like me to explore / improve this further, or if you prefer to handle this yourself :)

[vercel]

@pvanliefland is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

[gaa521]

this looks awesome. @RobinMalfait can we please include this next release. It is kind of most wanted feature.

[Talch87]

is this going to be approved? I really need it

[doutatsu]

Bumping this up

[CricketLaChica]

@pvanliefland Looks like @StreamlineBrett approved this, but we might need to resolve the conflicts first as it's been a while. Right now I'm using a forked version of headlessui just to be able to use this, but would be great if we can merge the PR to the main project! Let me know if I can help. 🙏

[eriktisme]

@RobinMalfait any plans on merging this?

[pvanliefland]

@CricketLaChica sorry, I haven't had the time to do any more work on this. I could dedicate a few hours to it if there is a clear interest from the authors.

[abetoots]

@RobinMalfait really a wanted feature, please? clearly a lot of interest from #181 as well

[adidoes]

any progress on this?

[doutatsu]

@RobinMalfait Is closing this means it's coming or it's not going to come any time soon? 👀

[RobinMalfait]

@doutatsu no, closing this means that I made a booboo and therefore GitHub decided to close all open PRs 🙃

[diego-lipinski-de-castro]

Any updates? I think a lot of people want this asap

[ChrisGV04]

I'm really hoping this feature gets added soon! I would use it very often

[sebastibe]

How can we help to get this branch merged?

[CricketLaChica]

I'm willing to pitch in help as well, let me know please. Our team's been using this feature.

[doutatsu]

+1 From me as well - I had to implement a very basic alternative, but I'd love something more polished like in this PR

[dukkee]

+1 we wait for a new release with this feature

[PudparK]

+1 more for this feature. I could totally use this right now. 🙏🏼

[ngajhede]

Any news on this?

[james-bowers]

Really looking forward to this 🙌🏼

[johnsonthedev]

damn I always get an heart attack when Robin closes this PR 🤣🤣

[RobinMalfait]

@johnson444 We will get to this PR, but I trusted GitHub's You can safely remove this branch when I closed #1039 but it closed a dozen PRs instead of changing the base 😓

[beeirl]

Any update on this one?

[brandonleichty]

Really really hoping to see this merged soon 🤞🤞🤞

[dukkee]

Hey, @RobinMalfait any updates on this PR? if you need help with merge conflicts, you can just write about it and we will help

[frndchagas]

I´ve read all posts about this and decided to implement myself, until I saw this...

RobinMalfait self-assigned this yesterday

It´s better to wait ^^

[RobinMalfait]

Yep I started a new pr with multi support for Listbox and Combobox components for both React and Vue based on this PR as a starting point. Going to continue on it next week. It's coming!

[RobinMalfait]

Thank you for your initial work, @pvanliefland.

I continued on your work in #1243 where I also implemented multi select for the Listbox in Vue. But also for the Combobox in both React and Vue.

I started from your PR so that you are still marked as a contributor.

---

This will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

[AHBruns]

So, this is awesome, and I think it's worth merging as is, but there does seem to be some sort of bug around scrolling. Using your example (https://headlessui-react-git-multi-value-support-tailwindlabs.vercel.app/combobox/multi-select). If I select one of the top options then quickly scroll down to the bottom, it will wait a moment then jump me to the top which is a bit disorienting. @RobinMalfait

[pvanliefland]

Awesome @RobinMalfait , glad I could help!

[RobinMalfait]

@AHBruns

This should be fixed by #1264, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

If you experience other issues, please open a new issue instead of commenting on this PR otherwise there is a (big) chance that I miss them 😅

[arezookheirabedi]

tank you @RobinMalfait
would you please code how using multi select in sandbox example

[erfurtjohn]

@RobinMalfait thanks for updating the wiki.