First up/down arrow key press not switching items on static Combobox options

[oliwheeler]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.7.18

What browser are you using?

Reproducible on Chrome, Safari, Firefox.

Reproduction URL

Code sandbox Repro link

Describe your issue

Click the Panel Button to open panel containing the static combobox. An option is already pre-selected
Press up/down arrow keys to switch between options.
The first up/down arrow key press is does nothing and doesn't move between the options as expected.

[adamwathan]

Hey! So the important thing to understand is that the static prop is just for you to take control of whether the element is visible or not, but it doesn't influence the actual open state of the comobobox. Even though you can see the panel, the combobox is technically closed from an internal state perspective. What's happening when you hit up/down the first time is that the combobox is now opening, and the second up/down actually changes the selected item.

The static prop exists for integrating the component with things like Framer Motion where you need to let Framer Motion handle whether something is shown or not using a component like AnimatePresence — it's not meant for permanently showing the combobox list and making it permanently interactive, just for giving control over hiding it to something else, but it's still meant to be hidden when the combobox is in a closed state and behaves like it's hidden.

I'm not totally sure the best way to build what you're trying to build with Headless UI but will have a think on it. Perhaps hiding the Combobox.Input unless the combobox is open, and using Combobox.Button to hide/show. I'd play with that and see what you are able to do.

Going to convert this to a discussion because this is expected behavior but happy to help riff on a way to build the UI you are trying to build 👍

[oliwheeler]

Thanks for the clear explanation!

I was trying to recreate this shadcn/ui Combobox component using only HeadlessUI components: https://ui.shadcn.com/docs/components/combobox

[tkapitein]

Hello @adamwathan, I previously thought of a similar solution as you've now presented. However, there's an issue. The Combobox.Button component automatically gets a tabIndex="-1" property which I was unable to override. Is there a way to ensure this property can be overridden?