Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Combobox Concerns

See original GitHub issue

Regarding https://github.com/tailwindlabs/headlessui/pull/1047

What package within Headless UI are you using?

@headlessui/react @insiders; Commit: 6fc28c610f14a3ab88a425cf97a67cee9bcb8e71 (third commit on Feb 2, 2022)

Chrome and Safari

Reproduction URL

headless/packages/playground-react/pages/combobox/combobox-with-pure-tailwind

Describe your issue

We needed to add a z-index as the select menu was showing below other input fields on the screen.
It would be great if the search box was cleared when you reopen it after selecting an item from dropdown. I’m happy to make a quick video to demonstrate this. Via HeadlessUI’s discussion board, I see other users are using https://react-select.com which behaves this way: (a) select United States via dropdown, (b) type in England to change my selection rather than (a) select United States via dropdown, (b) start typing England, © notice you get no results so you hit backspace a bunch of times until United States is no longer in the search field, (d) type England again.
Add w-full so the field matches the select menus on tailwindui.com.

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:11

Top GitHub Comments

11reactions

timomehcommented, Feb 9, 2022

Regarding point 2, i noticed the same behavior today and I think react-select offers a nicer UX here. I didn’t find a way to implement the same behavior using Headless UI, it seems like the Combobox.Input always displays the current value when the search query is empty.

react-select seems to solve this by overlaying the current value as an absolute positioned div above the input. The input itself is empty, and if a query is entered, the overlay is being hidden.

I made a quick video (hope you don’t mind @ACPK – and I hope we mean the same thing 🙂 )

Example using react-select

https://user-images.githubusercontent.com/4227520/153291221-1333eb7b-61f7-40a9-8b29-a4cfbbf85bc1.mp4

Example using Headless UI

https://user-images.githubusercontent.com/4227520/153291249-bc0cab3e-9ed0-4cf3-b81f-645fe138a209.mp4

8reactions

eaklcommented, Jun 6, 2022

Regarding point 2, i noticed the same behavior today and I think react-select offers a nicer UX here. I didn’t find a way to implement the same behavior using Headless UI, it seems like the Combobox.Input always displays the current value when the search query is empty.

react-select seems to solve this by overlaying the current value as an absolute positioned div above the input. The input itself is empty, and if a query is entered, the overlay is being hidden.

I made a quick video (hope you don’t mind @ACPK – and I hope we mean the same thing 🙂 )

Example using react-select

ScreenShot.2022-02-09.at.22.11.25.mp4

Example using Headless UI

ScreenShot.2022-02-09.at.22.12.41.mp4

I second this feature request. I have played with both Headless UI and react-select. react-select is hard to style with tailwind but IMO this is the best UX for a combobox. It would be amazing to have such UX possibility. I have tried to build it but couldn’t get the all event handlers to work nicely.

I have tried to add a div below the Combobox.Input with the last known selection but then it becomes hard to manage the input state which is reseted on selection change and the the div state which hold the value. Making the combobox a controlled component and managing all keyboard events is out of my current knowledge in React.