Option to open combobox drawer when input is focused

[jdreic]

The documentation alludes to the combobox as useful as an autocomplete or command palette, but I think many users also would like to use it as a searchable version of the Listbox (see: #626), where the primary use case is to make it easy to narrow down selections before picking one. Or, seeing the options might help the user decide what to type. However, I've run into some issues using Combobox in this way - when focusing the input, you have to either start typing or use one of the command keypresses like ⬆️ /⬇️ to get the Combobox.Options to display. This isn't super intuitive for me, as if I'm expecting a dropdown of options I don't expect to have to start typing first.

I've tried a couple of workarounds:

• One is to nest the Combobox.Input inside of the Combobox.Button, but this runs into an issue described in Combobox.Button wrapper Combobox.Input auto close when I typing space #1209, where if the user types a space then the dropdown closes.
• The other is to manually manage the open/closed state myself and tap into focus/blur events on the Combobox.Input to help with that, but I haven't been able to crack it. There's some issue where if the control blurs before the onChange fires, it'll never fire at all. 🤷 it's a bit hacky either way.

So, my point is, it would be very convenient addition to the interface to have an option for Combobox to open immediately when the Combobox.Input is focused.

[jamesthomsondev]

I agree that we need more programmatic control over anything that opens/closes or toggles state.

In the meantime, here's the workaround I used for the same scenario.

Add the button in, but visibly hide it.

<Combobox.Button className="hidden" ref={comboBtn}></Combobox.Button>

then use a reference to trigger a click when you need it.

const handleInputFocus = () => comboBtn.current?.click();

I've also been using this method to keep the Combobox open to allow multiselecting options (soon not to be an issue).

It's not ideal, but it works.

[Aaronius]

One problem I'm finding with this approach is that if you call handleInputFocus whenever the input gains focus, it results in an issue where the user selects an option and the menu appears to stay open. That happens because when an option is clicked, the text input loses focus and then on the next frame Headless UI gives focus back to the text input, resulting in us calling handleInputFocus, which results in the menu being opened again. I don't see a clean way to tell when the text input received focus and was not after an option was just selected.

Maybe something gross like this (untested):

let previousFocusedElement;
document.addEventListener("focusin", (event) => { 
    if (event.target === comboBoxInput && !dropdownMenuElement.contains(previousFocusedElement)) {
      handleInputFocus();
    }
    previousFocusedElement = document.activeElement;
})

[jamesthomsondev]

it results in an issue where the user selects an option and the menu appears to stay open

Yep. My use case is to support multiselect. But, I also have to support only single select or limited # of selects. So my solution was to have a limit prop which blocks the trigger to reopen the menu.

Here's the code I came up with for that:

const handleSelect = (option: IMultiselectOption<T>) => {
    if (!isSelected(option)) {
      if (limit && limit === selected.length) {
        // If limit = 1, replace selection with new one
        if (limit === 1) {
          onSelectOption(option, [option]);
        }

        onLimitReached?.();
      } else {
        comboBtn.current?.click();
        onSelectOption(option, [...selected, option]);
      }
    } else {
      handleDeselect(option);
    }
  };

[connor11528]

Hey sorry for the late pile on here, but how are comboBtn and dropdownMenuElement defined and attached to the DOM?

[WonRhee]

Hey sorry for the late pile on here, but how are comboBtn and dropdownMenuElement defined and attached to the DOM?

@connor11528 I don't know about dropdownMenuElement . But comboBtn is just a ref:

...
const comboBtn = useRef(null);
...
<Combobox.Button className="hidden" ref={comboBtn}></Combobox.Button>

Just in case to be helpful, something like below worked out for me with @headlessui/react v1.7.7:

const onSearchInputFocus = () => comboBtn.current?.click()

const onSearchInputKeyDown = (e, open, activeOption) => {
    if (search.length > 2 && e.key === 'Enter') {
        !open ? comboBtn.current?.click() : onSearchResultClick(activeOption)
    }
}
...
<Combobox as="div" value={search}>
{ ({ open, activeOption }) => (
  <>
    <Combobox.Button className="hidden" ref={comboBtn}></Combobox.Button>
    <Combobox.Input 
        onChange={onSearchInputChange}
        onFocus={onSearchInputFocus}
        onKeyDown={(e) => onSearchInputKeyDown(e, open, activeOption)}
        displayValue={search}
    </>   
  </>
)
</Combobox>

[briavicenti]

I was able to get this working using something similar to @Aaronius's approach. Here's an approximation of it:

 // Set up a listener to save a reference to the last focused element in component state
  useEffect(() => {
    const handler = () => setLastFocusedElement(document.activeElement);
    document.addEventListener("focusin", handler);
    return () => document.removeEventListener("focusin", handler);
  }, []);

  // Set up a handler that simulates a Combobox.Button click if we are transitioning to input focus from anywhere
  // but the dropdown menu contents. This handler should be passed to the Combobox.Input onFocus prop
  const handleForceToggle = () => {
    const wasOptionLastFocused = lastFocusedElement && dropdownMenuElement.contains(lastFocusedElement);

    if (!wasOptionLastFocused) {
      comboButtonRef.current?.click();
    }
  }
  

[DhvanilPatel]

@briavicenti thank for explaining your approach — after struggling with it for days, I was finally able to get it working!

+1 for having the functionality natively in HeadlessUI, would be super helpful! :)

[lveillard]

+1 to this. I almost fixed it with this:

 <Combobox value={selectedItem} onChange={onChange}>
        {({ open }) => (
          <>
            <div className="relative">
              <Combobox.Input
                onFocus={() => !open && setIsActive(true)}
                onBlur={() => setIsActive(false)}
                onChange={(event) => setQuery(event.target.value)}
              />
              <Combobox.Button
                onClick={() =>
                  open || isActive ? setIsActive(false) : setIsActive(true)
                }
              >
                h
              </Combobox.Button>
            </div>

            <Transition
              show={open || isActive}
            >
              <Combobox.Options static>
                {filteredItems.map((item) => (
                  <Combobox.Option key={item} value={item}>
                    {item}
                  </Combobox.Option>
                ))}
              </Combobox.Options>
            </Transition>
          </>
        )}
      </Combobox>
      ```
  As i want both the onFocus and the button to work. However for some reason the first time I click on the button, only the combobox option works and not mine. Still i left the code here in case anyone wants a similar approach and fixes it

[nilansaha]

Using open worked for me too. And I was able to achieve my thing.

[victorcarvalhosp]

That worked for my use case as well!

[wescopeland]

This is a mega hack, but I managed to get this working by floating the Combobox.Button on top of the Input and setting it to be invisible.

<div className="relative w-full">
  <Combobox.Input />
  
  <div className="absolute top-0 w-full">
    <Combobox.Button className="w-full h-12">&nbsp;</Combobox.Button>
  </div>
</div>

[arvindell]

This worked for me but there's a small issue: this approach doesn't let the user select the text using the mouse (e.g., double click to select the whole query)

[lveillard]

I think this should be the behaviour by default, at least when the combobox is empty.
What do you think @RobinMalfait ?

If you go to the official example https://headlessui.dev/react/combobox and remove the default value (+ fix the display value formula), the behaviour for the first click has a bad UX

[pavloko]

How about adding openOnFocus prop to the Combobox component?

[lveillard]

That would be great!
At least when it's empty, the default UX is so weird.

[wfl-junior]

What about exposing the setOpen function in the render props for the Combobox component? So we can have more freedom on managing the state. And it would be useful for every component.

HeadlessUI is an amazing library, and I really like the idea of the library not dictating design patterns, and this thread kinda shows a way that it does the opposite

[fullstackninja864]

We can use

<Combobox.Button as='div'>
   <Combobox.Input />
<Combobox.Button />`

This will open combobox drawer when input is focused and it wont close dropdown when user types a space

[nilansaha]

Cleanest solution here

[legit-e2e]

Thanks this works!
However, keyboard navigation doesn't work anymore (I couldn't manage to focus no matter what I tried)

[Gofilord]

Thanks this works!
However, keyboard navigation doesn't work anymore (I couldn't manage to focus no matter what I tried)

[Jarzka]

This solution works great, but it results in an accessibility error, because the automatically added aria-expanded="false" is not valid. Any idea how to fix it?

EDIT: I was able to work around this by using my own Button (=div) component which drops the aria attributes.

[mkalafior]

There are additional side effects. For example, Combobox.Input appears to remain unchanged even when its parent component is remounted. When managing your form with react-hook-form, this can lead to the loss of references (as by default, react-hook-form unregisters each field on unmount)

[turbosheep44]

Just a couple of things to keep in mind for keyboard users:

• If the user tabs to a multiple selection Combobox (which subsequently opens) and then tabs away, the currently selected item is deselected which is undesirable. So this feature should also allow developers to choose whether or not the active item is selected when tabbing away (possibly a flag selectOnTab).
• Some of the current workarounds revolve around forcing they user to click an invisible ComboboxButton. This means that the behavior is not triggered when the ComboboxInput is focused using the keyboard.

[lveillard]

In most interfaces I've worked with:
Tab = move
Enter = confirm

I think is a more personal choice. I'm ok with that behavior I don't want users to set an item by error.

While opening the items menu on click when it's empty seems to be the standard and the rigth choice.

[turbosheep44]

In most interfaces I've worked with:
Tab = move
Enter = confirm

I agree that this is what I would expect. However, when tabbing through a multiple selection Combobox, I wouldn't expect the selection to change (although with the suggested change this would be the case).

To be clear, for a multiple selection Combobox I think that 'autocomplete with manual selection' makes more sense than the current default 'autocomplete with automatic selection' described here. For a single selection Combobox I think the default behavior is great.

[AlejandroGutierrezB]

I strongly agree that exposing a setOpen prop will really make it more flexible and intuitive, this is the workaround that is working for me, using the initial docs example:

TLDR:
expose open prop and use it in the Combobox.Input to manage onFocus. If Combo is not open it will click the button, if button is clicked the event will bubble so we need to handle that to avoid triggering another sibling click that will result in being at the same state as before

 <Combobox value={selected} onChange={setSelected}>
        {({ open }) => (
          <div className="relative mt-1">
            <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
              <Combobox.Input
                className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
                displayValue={(person) => person?.name}
                onChange={(event) => setQuery(event.target.value)}
                onFocus={(e) => {
                  if (e.relatedTarget?.id?.includes('headlessui-combobox-button')) return;
                  !open && e.target.nextSibling.click();
                }}
              />
              <Combobox.Button
                className="absolute bg-black inset-y-0 right-0 flex items-center pr-2"
              >
                <ArrowDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
              </Combobox.Button>
            </div>
            <Transition
              as={Fragment}
              leave="transition ease-in duration-100"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
              afterLeave={() => setQuery('')}
            >
              <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                {filteredPeople.length === 0 && query !== '' ? (
                  <div className="relative cursor-default select-none py-2 px-4 text-gray-700">Nothing found.</div>
                ) : (
                  filteredPeople.map((person) => (
                    <Combobox.Option
                      key={person.id}
                      className={({ active }) =>
                        `relative cursor-default select-none py-2 pl-10 pr-4 ${
                          active ? 'bg-teal-600 text-white' : 'text-gray-900'
                        }`
                      }
                      value={person}
                    >
                      {({ selected, active }) => (
                        <>
                          <span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
                            {person.name}
                          </span>
                          {selected ? (
                            <span
                              className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                active ? 'text-white' : 'text-teal-600'
                              }`}
                            >
                              <LogoAppleIcon className="h-5 w-5" aria-hidden="true" />
                            </span>
                          ) : null}
                        </>
                      )}
                    </Combobox.Option>
                  ))
                )}
              </Combobox.Options>
            </Transition>
          </div>
        )}
      </Combobox>

[mike-luabase]

try this:

<ComboboxButton as="div" class="flex">
  <ComboboxInput 
    class="w-full rounded-sm border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 shadow-sm focus:border-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-500 sm:text-sm"
    @change="query = $event.target.value" 
    :display-value="(option) => option.name" 
  />
  <SelectorIcon class="h-5 w-5 text-gray-400 mr-2 mt-2 absolute right-0" aria-hidden="true" />
</ComboboxButton>

[amrap030]

try this:

<ComboboxButton as="div" class="flex">
  <ComboboxInput 
    class="w-full rounded-sm border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 shadow-sm focus:border-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-500 sm:text-sm"
    @change="query = $event.target.value" 
    :display-value="(option) => option.name" 
  />
  <SelectorIcon class="h-5 w-5 text-gray-400 mr-2 mt-2 absolute right-0" aria-hidden="true" />
</ComboboxButton>

Cool, that works for me, thank you :)

[ranlix]

It works when the comboboxes is closed.
but when select one option and then auto close itself, the focus event will be triggered again, options box will show again.

How to fix it?

[jecortez]

I'm attempting to go this approach, but my issue is that I want the dropdown to open without any options initially selected- it appears this approach will always automatically select the first entry from {options}. This then causes issues for our code because on Tab, that item is selected, and it acts as if that was intentionally navigated to (we have multiple comboboxes in a row.

Can you think of a way to simulate that button click to open the menu, but then deselect that first entry?

[sourcec0de]

This feels like the best hack until we have native control over opening.

[pzcfg]

Running into this as well. What would it take to get this property added?

[moritzkalwa]

Not a lot. I just created a PR to add this feature #2035

[foundgood]

Agreed - would be a lovely feature.

[pankajtechspotdev]

this work for me instead onFocus use onClick

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

[LinnJS]

I would recommend putting this tailwind class on your button rather than changing it to a div.

Nesting interactive elements is probably a bad accessibility idea but at least we are not lying to the user saying its a div when in reality its a interactive button.

className="w-full cursor-pointer border-none bg-none text-inherit outline-none" and keeping the default as="button"

[serzhan181]

Any updates on that? Is that even on headless ui's roadmap?

[Thinkro]

Any chance we could get this function natively?

[fqf2009]

Thanks for the suggestions above. They really helped. However, I have one situation can not be fixed by these workarounds. I have remove ("x") buttons in the search suggestion dropdown list. If I click the button, the list is closed. But I only want to remove one item, and keep the dropdown list open.

https://headlessui.com/react/combobox#showing-hiding-the-combobox

By default, your Combobox.Options instance will be shown/hidden automatically based on the internal open state tracked within the Combobox component itself.

If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a static prop to the Combobox.Options instance to tell it to always render, and inspect the open render prop provided by Combobox to control which element is shown/hidden yourself.

I think this is a design flaw. If the static property is set to true, why still use/control the open value, why still control the show/hide behavior? just leave it to the user-defined state variable. That is it.

I was wrong. The sample code is a little bit misleading. Although it is still using open when the static prop is set to true, actually it is not needed. When I replaced the open with the focused and other data state, everything is under control and work smoothly.

[fqf2009]

My workaround now is an extra click on the hidden dropdown button: dropdownBtnRef.current?.click(). Still working.
See above. I got rid of the open state and the hidden dropdown button. The logic is much simplified.

[YeyuanNielson1]

Could you let me know more details about focused? where does it come from?

[Marsony]

any news?

[noah-wardlow]

bump. please add focus events

[haretalfasi]

Bumping again, working on a project that requires this right now and it would be really helpful if this can be kindly prioritised 🙏

[jjalonso]

We want this boys, Please some hero to open PR :P

[BurningDog]

I got this working in Vue 3 (and TypeScript) thanks to #1236 (comment)

Added @focus="handleInputFocus" to the ComboboxInput and a function handler.

<ComboboxInput
  class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
  :displayValue="(person:any) => person.name"
  @change="query = $event.target.value"
  @focus="handleInputFocus"
/>

/**
 * A hack for showing the dropdown when the user clicks on the input.
 * @see https://github.com/tailwindlabs/headlessui/discussions/1236#discussioncomment-4902695
 */
const handleInputFocus = (e: Event) => {
  const target = e.target as HTMLElement;
  const button = target?.nextSibling as HTMLButtonElement;
  button?.click();
}

[Edit: the interaction here isn't great. Works fine the first time I click on the input, but when I select an element the dropdown list closes, but the focus is still on the input. If I click on it again I'm expecting the list to open...but instead nothing happens. This is weird and not a solution.]

[BurningDog]

A much better approach, which preserves the usability and fixes the issue in the edit in my previous comment above, is to nest the ComboboxInput inside the ComboboxButton. That way every time one clicks on the input, a button click is registered - and the dropdown list opens! No @focus or custom functions needed! Here's my working Vue 3 code:

<div class="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
  <ComboboxButton
    class="w-full"
  >
    <ComboboxInput
      class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
      :displayValue="(person:any) => person.name"
      @change="query = $event.target.value"
    />
    <div class="absolute inset-y-0 right-0 flex items-center pr-2">
      <ChevronDownIcon
        class="h-5 w-5 text-gray-400"
        aria-hidden="true"
      />
    </div>
  </ComboboxButton>
</div>

[Edit: the only downside here is if you tab into the input, the dropdown doesn't show. Seeing if I can fix this...]

[BurningDog]

To handle the case of tabbing into the input and having the the dropdown display, it's a bit more complicated. We need to know the state of open and then using the @focus=handleInputFocus function again, passing open as an argument. But the problem is that open is false at the point we tab into the input...so we need a different way of knowing if the dropdown is visible.

Instead, I've added an id to ComboboxOption and then use JavaScript to check if that element is visible (i.e. the dropdown is open) - and if the dropdown isn't open, click the button to open it. It's not great. But it works.

Add the @focus to the ComboboxInput from above:

<ComboboxInput
  class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
  :displayValue="(person:any) => person.name"
  @change="query = $event.target.value"
  @focus="handleInputFocus"
/>

Then add the id to ComboboxOptions as follows:

          <ComboboxOptions
            id="isVisibleElement"
          >

The function looks like this:

/**
 * A hack for showing the dropdown when the user tabs into the input.
 */
 const handleInputFocus = (e: Event) => {
  // A settimeout because we need to give a little bit of time for the dropdown to be rendered on screen
  setTimeout(() => {
    // Using document.getElementById because couldn't get Vue ref working - offsetParent would
    // always return undefined
    const isVisible = document.getElementById('isVisibleElement')?.offsetParent;
    if (!isVisible) {
      const target = e.target as HTMLElement;
      target?.click();
    }
  }, 50);
}

[davidysoards]

Better than Combobox as="div" IMO is to just position the button over the whole input.

<ComboboxButton
  class="absolute inset-0 flex cursor-default items-center px-2 focus:outline-none"
>

[danabrey]

I used this solution until #2686 is included in a release, but I added justify-end to ensure the dropdown icon still appears on the right of the inputs.

Having tested all the workarounds in this thread, this appears to be the best for now apart from it not supporting tabbing through. Pretty sure that's bad for accessibility!

[mattoni]

Agreed this should be added. The PR was unfortunately closed and I haven't seen any other discussion. Following the suggestion of wrapping the input with the button, any option you select keeps the option box open (due to refocusing) and I can't seem to find a solid workaround.

[RobinMalfait]

Hey all!

This feature has been implemented and you can use the immediate prop on the Combobox component (<Combobox immediate />), more info about this feature: #2686

This is currently available in the insiders build:

• npm install @headlessui/react@insiders
• npm install @headlessui/vue@insiders

[JshGrn]

@RobinMalfait When is this going to be merged? Is there a reason for the delay we are not seeing here?

[RobinMalfait]

You can try this feature already if you use the insiders version, and this feature will be available in Headless UI v2. Right now we have an alpha version available for React that you can use already. Test it, break it, enjoy it!

• npm install @headlessui/react@next

No exact ETA for Headless UI v2, but should be soon ish.

[JshGrn]

Hey @RobinMalfait thanks for replying back, I have been using the insiders branch which it works on, but I can't use this in production. I am using this for Vue, will the alpha version for Vue come after release of V2 for React or will it come shortly?

[davidysoards]

is there a reason this change can't go in 1.x? it's not breaking is it?

[JshGrn]

Just wondering if there is an update specifically on the alpha version for Vue or why this can't go into 1.x as above? Many thanks!

[lucasfcosta]

Just in case anyone is still running into this and doesn't want to use the insiders tag, I solved this by adding onFocus and onClick handlers which call the click method from the button ref.

<Combobox.Input
  onChange={(event) => setQuery(event.target.value)}
  displayValue={(c: Column) => c?.name}
  onClick={() => {
    if (!open) {
      buttonRef.current?.click()
    }
  }}
  onFocus={() => {
    buttonRef.current?.click()
  }}
/>

And for the button:

const buttonRef = useRef<HTMLButtonElement>(null)

<Combobox.Button
  ref={buttonRef}
>

[Nowocyn]

When will the new prop immediate move from the @insiders to the stable version?

[booper]

+1

[andrew-melnychuk]

+1

[JshGrn]

+1

[RedVelocity]

Hi,

Any idea when this will be available on stable/production build?

[JshGrn]

I don't think its coming to 1.x