Combox : open dropdown on click

[ootsun]

Hello,
I'm using combobox and I'd like that a click in the input causes the dropdown to open.
Is this comportement already implemented and I'm doing something wrong or is it normal that nothing happens on click?

[ootsun]

I found a workaround :

const [openOptions, setOpenOptions] = useState(false);

then use onFocus and onBlur on a div inside the Combobox

<Combobox value={selectedPerson} onChange={setSelectedPerson}>
                  <div  onFocus={() => setOpenOptions(true)}  onBlur={() => setOpenOptions(false)}>

and finally

<Combobox.Options static={openOptions}

[anubhav-sl]

@ootsun Great find.

How did you handle selection of an option. When I select an option onBlur is triggered first, and because of that I am not able to get an option selected.

[ootsun]

Yeah, you are right. Try using "onClick" instead of "onFocus" and let me know if it's solve your problem please. Will update workaround if you confirm "onClick" is the right approche.

[eakl]

onClick doesn't work either

[jonbellah]

Ran into this same issue. I was able to workaround the onBlur / item selection race condition by throwing a timeout on the close... not the most elegant solution but seems to be working okay so far.

onBlur={() => setTimeout(() => setOpen(false), 100)}

[wenis]

I know this is an old thread, but for search engine purposes, I'd like to provide a solution for selecting any default text in the input and opening the dropdown on click for vue3.

Create a ref for the ComboButton:

const comboboxButtonRef = ref()

In your template:

<ComboboxButton ref="comboboxButtonRef" class="..." />

Use v-on:click in the ComboboxInput component to handle the event method...

<ComboboxInput @click="onComboButtonClick($event, open)" ... />

And in your script handle the event...

  function onComboButtonClick(e, open) {
    e.target.select()
    if (!open) comboboxButtonRef.value.el.click()
  }

IMO, selecting placeholder text and opening combobox list items is the most user friendly way of handling this type of input.

[anubhav-sl]

Multiple timeouts gets added in this case the options closes unexpectedly.

…

On Thu, Jun 9, 2022, 02:15 Jon Bellah ***@***.***> wrote: Ran into this same issue. I was able to workaround the onBlur race condition by throwing a timeout on the close... not the most elegant solution but seems to be working okay so far. onBlur={() => setTimeout(() => setOpen(false), 100)} — Reply to this email directly, view it on GitHub <#1205 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXR23A7TDFUYS2K6PQH6UTTVOEA5RANCNFSM5QEQOOZQ> . You are receiving this because you commented.Message ID: ***@***.*** com>

[dimalakh]

my workaround for this issue:

1. make ref of Combobox.Button
2. emulate Button click while clicking on Input
   onClick={() => buttonRef.current?.click()}

[ayhanap]

I used your workaround with added a check on render prop.

onClick={() => { if (!open) openCloseButtonRef.current?.click(); }}

[cosileone]

For those of us using typescript here's how you make a ref that's .clickable:
const comboboxButtonRef = useRef<HTMLButtonElement>(null);

[knitevision1]

I approached it this way:

1. Wrap <Combobox.Button><Combobox.Input /><Combobox.Button>
2. Button will handle opening on click, while Combobox input would remain in control for onFocus, onBlur events

[richardstrnad]

Amazing, thank you!

<ComboboxButton>
  <ComboboxInput
    @change="query = $event.target.value"
    :displayValue="(c) => c.name"
  />
</ComboboxButton>

[ayhanap]

Easy solution but clicking on input multiple times closes the combobox, which is a bit strange UX.

I used solution with ref on this comment but added a condition with render prop open

onClick={() => { if (!open) openCloseButtonRef.current?.click(); }}

[jeffjenk]

I found another option for avoiding the closing issue when clicked again, just stop the click propagation on the input:

<Combobox.Button>
  {({ open }) => (
    <Combobox.Input
      onChange={event => setQuery(event.target.value)}
      onClick={e => {
        if (open) e.stopPropagation();
      }}
    />
  )}
</Combobox.Button>

[ThienLE0811]

Amazing, thank you!

[navinrangar]

thanks mate!

[dbousamra]

Hmm. What about if I want to open the Combobox when clicking the input, but only if it's not already open

[tembra]

Hmm. What about if I want to open the Combobox when clicking the input, but only if it's not already open

You must check if it's already opened with open render prop from <Combobox> component.

I used the same approach as @dimalakh posted here, only adding this verification I just mention.

[AnthonyAtSigma2]

I think a reasonable feature would be to allow people to control the state of the open property without forcing them to re-create the internal state changes that come out of the box. For example, I want to be able to open the ComboBox programmatically, but I don't want to lose all the other neat features that already cause the ComboBox to automatically open or close.

It seems like the closest thing that we have is the ability to open the ComboBox by ".click"-ing it, and there are some really good threads above discussing how to do that.

However, this is obviously a pretty brittle workaround, since it depends on including the ComboBox.Button element. It also doesn't give you an easy approach for closing the thing programmatically. I'm sure someone will chime in with a way to close it by clicking on an element outside of the ComboBox, but I think this is still very brittle.

The easiest solution I can think of from a design perspective is exposing some render props called openFn and closeFn, which can be used to go through Headless UI's state change doors, so to speak. Then the open prop continues to be a readonly property which can be used for the most common use cases, but also can be used for this more complicated version to reflect the internal state.

[alessiolilli]

Headlessui already merged a PR, but they haven't been released yet. If you install the @insiders version , you can use a props named 'immediate' that should do exactly what you need

[flkrnr]

btw this is the mentioned PR: #2686

[dheerajsinghnagdali]

In my opinion, the best way to achieve this is rendering div in the as prop of the button and using the input inside it. Moreover, you could use a simple span for rendering the icon.