Add property to show Combobox options immediately

[pzcfg]

As per the discussion in #1236 even if Combobox.Options are immediately provided to the combobox, they aren't shown until you start typing or press the arrow keys. In my case (and seemingly many other cases) we would like to show options immediately, the same ones as if you pressed the arrow key or typed something and then deleted it. There are proposed workarounds like

onFocus={(e) => {
  if (e.relatedTarget?.id?.includes('headlessui-combobox-button')) return;
  !open && e.target.nextSibling.click();
}}

but these seem needlessly brittle and convoluted. Adding a property to Combobox allowing you to see options immediately seems like the reasonable solution.

[matijs]

Any official solution sounds desirable. Some of the workarounds in #1236 are incredibly hacky and break accessibility in very creative ways.

[marakalwa]

I 100% agree. We currently went with an invisible ComboboxButton that is clicked onFocus...

[RobinMalfait]

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

I moved it to a discussion since it is a feature request and not really a bug. You can already do it by using the static prop (because then you are in charge of rendering everything yourself).

[pzcfg]

This is great, thank you!

Can you clarify what else is involved in "rendering everything yourself"? I added this prop and everything else seems to be working the same / as expected, but I'm not sure what else I may be missing.

[stevecastaneda]

I'm hitting a snag when trying to implement this. I statically rendered options, and then I managed the internal focused state by adding:

onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}

...to Combobox.Input. However, this won't let me select an option as the input is blurred before the option is selected. My wrapper for the Combobox.Options is...

{(open || focused) && (<div>...</div>)}

I feel like this is easier than I'm making it out to be. If I do trigger the open prop by clicking on the button inside the Combobox.Input, then it works since the open prop seems to allow the selection to trigger.

[marakalwa]

Regarding #2035. I agree that just exposing openCombobox isn't a perfect solution either, however this kind of implementation is being used multiple times already in headlessui, so it should be already somewhat familiar. I also think it's important to keep in mind how hacky the workarounds that are currently being used are.

Another option would be a prop on the ComboboxInput like 'openOnFocus'. That wouldn't give full control but at least resolve most of the issues outlined in #1236.

@RobinMalfait Are there any other solutions that have been thought about? I'd really love to get rid of that invisible button in our project 😄

[stevecastaneda]

What are your thoughts on a focused render prop? You could then use either open or focused to trigger visibility of Combobox.Options when statically rendering.

[marakalwa]

I'm not sure that fixes anything. Creating a ref for the focus of the input is already doable. However, as you've shown, that also seems not to work as expected. There is also some more internal logic in openCombobox and closeCombobox, so this behaviour probably needs to be controlled internally, one way or another.

[stevecastaneda]

Here's the workaround solution you referenced with Typescript in case anyone needs it.

onFocus={(e: React.FocusEvent<HTMLInputElement, Element>) => {
  if (e.relatedTarget?.id?.includes("headlessui-combobox-button")) return;
  !open && e.target?.nextSibling instanceof HTMLButtonElement && e.target.nextSibling.click();
}}

[jamesarosen]

This works for me if I use the ENTER key to select a combobox option. But if I click a combobox option, headless-ui returns focus to the <input>, which then calls onFocus and reopens the combobox. It won't close until I click out or press ESC.

[phuhl]

The best way I found for me is just nesting the input within the button component:

              <Combobox.Button className="w-full" as="div">
                <Combobox.Input
                  className={/*...*/}
                  onChange={/*...*/}
                  displayValue={/*...*/}
                />
                <div className={/*...*/}>
                  <ChevronDownIcon
                    className={/*...*/}
                    aria-hidden="true"
                  />
                </div>
              </Combobox.Button>

If you style them appropriately, this works well. Did not notice issues, yet. No need for static on the options or any hacks.

EDIT: Added as="div" to Combobox.Button

[matijs]

The best way I found for me is just nesting the input within the button component:

A <button> element must not contain interactive content. You can use the as prop on Combox.Button to render something other than a button but from an accessibility point of view you probably shouldn't. You could do the same with Combobox.Input but the same applies here.

[phuhl]

That's a good point. I updated my code to use as="div". It's not perfect then, but from an implementation standpoint it has very low complexity and works in FF and Chrome just fine. But yeah, it is a workaround and prob not the best for accessibility.