Keep the Combobox open on Enter/click of an item

[calthomson]

Hi! First off, thanks for a great library.

---

TL;DR: Is there a way to overwrite Enter or onClick of a Combobox item, to make the Combobox stay open?

I'm using the Combobox component, and my implementation so far is very similar to the first example here.

My custom use case is this: I want to select multiple items from the Combobox list, and show them in Combobox.Input as a list of selections.

My issue is this: When I select an item by pressing Enter, or by clicking the item, the Combobox closes. I assume this is by design, "the selection has been made, so close the Combobox" - however, is there a way to overwrite the onEnter/onSubmit such that I can force the Combobox to stay open so that I can continue making more selections.

[RobinMalfait]

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

If you use the insiders builds (npm install @headlessui/react@insiders or npm install @headlessui/vue@insiders) there we have multiple support available for the Combobox component. You enable it by passing an array to the value instead of a single element.

Doing this enables multiple value support which keeps the Combobox open while selecting items. It will also "toggle" items on and off if you press enter on them.

More information can be found in the PR: #1243

[calthomson]

Awesome! Thanks so much @RobinMalfait!