Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add multi value support for Listbox & Combobox #1243

Merged
merged 11 commits into from
Mar 16, 2022
Merged

Add multi value support for Listbox & Combobox #1243

merged 11 commits into from
Mar 16, 2022

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Mar 15, 2022 •
edited
Loading

This PR will add multiple values support for both the Listbox and Combobox components.

You can enable multiple value support by providing an array of items instead of a single value. When the value is an array, we automatically switch to multiple value mode.

This has a few implications:

  • Underlying aria attributes will be a bit different, but you don't have to worry about this.
  • When you are in multiple value mode, then the Listbox/Combobox will stay open when activating items.
    • This is to prevent that you have to re-open every time you make a change.
  • When you are in multiple value mode, then activating an option will function as a "toggle". So that it is possible to "unselect" a value.
  • The value passed to the v-model in Vue, and the onChange in React will now be an array.

You can play with it here:

Closes: #648

I see a lot of reactions on this PR which makes me happy! If you already want to play with it:

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

The documentation is in the works, but to enable multi-support is by providing an array of options to the value or v-model instead of a single item. The onChange in React would then be called with an array that can override your own state. (internally we already do the toggling of items for you). Similar in Vue, the v-model can be used as-is out of the box.

@vercel
Copy link

vercel bot commented Mar 15, 2022 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-vue – ./packages/playground-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/5zXQCbNiXoU9rQEAeLF6ukyGrwNA
✅ Preview: https://headlessui-vue-git-multi-value-support-tailwindlabs.vercel.app

headlessui-react – ./packages/playground-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/Demym8B8Ba312zpotLkuFuUpQFCf
✅ Preview: https://headlessui-react-git-multi-value-support-tailwindlabs.vercel.app

@jamesthomsondev
Copy link

This is fantastic news - looking forward to having this merged in. Thank you for all your hard work with Headless UI 🙏

@brandonleichty
Copy link

This PR couldn't have come at a more perfect time!

@RobinMalfait
implement multiple mode on Listbox
8e66445
@RobinMalfait
add multiple Listbox example to playground
fcd9857
@RobinMalfait
implement multiple mode on Combobox
df570d3
@RobinMalfait
make sure groupContext is not undefined or null
4ad61eb 
On vercel, getting a strange issue like `TypeError: undefined is not an
object (evaluating 'r.resolveTarget')` which doesn't happen locally or
once published. Would expect it to be `null` since we default to `null`.
Hopefully this fixes things.
@RobinMalfait
bump all the dependencies
5013136
@RobinMalfait
make sure that @types/react use set to the correct version
3f2ae17 
`@types/react-dom` hardcoded the `@types/react` to version `16.14.21`
instead of using the latest `16.14.24` resulting in type mismatches.

*cries in inconsistency*
@RobinMalfait
update changelog
dc606f0
@RobinMalfait
add multiple Combobox example to playground
c9feb67
@RobinMalfait
refactor Combobox, use actions
45b2a96
@RobinMalfait
use combobox data
3c979bf 
This is a first step in refactoring everything where we use dedicated
actions and data instead of accessing the reducer state directly.

It also allows us to get rid of mutations in render where we updated
some values in render directly which is not ideal.
@RobinMalfait RobinMalfait merged commit 40fee45 into main Mar 16, 2022
@RobinMalfait RobinMalfait deleted the multi-value-support branch March 16, 2022 14:14
@RobinMalfait RobinMalfait mentioned this pull request Mar 16, 2022
Closed
@greendesertsnow
Copy link

Oh I'm singing out of happiness!

@parssak
Copy link

parssak commented Apr 6, 2022

When can we expect to see this in an official release?

@preeteshjain
Copy link

So happy to see this. Thank you so much for the hardwork guys, this was much much needed! ❤️

@nynevi
Copy link

nynevi commented Apr 14, 2022

for people wondering what happened, it is in the insiders release:
#648 (comment)

@afercia afercia mentioned this pull request Dec 29, 2022
Closed
@zerosym zerosym mentioned this pull request Mar 23, 2023
Closed
@feruz111
Copy link

Hey just wondering, if the multi select Listbox is in yet as for now (React)

@RobinMalfait
Copy link
Member Author

@feruz111 Yep! Was released in April of 2022 (version 1.6.0)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
9 participants
@RobinMalfait @jamesthomsondev @brandonleichty @greendesertsnow @parssak @preeteshjain @nynevi @feruz111 @pvanliefland