input fields inside ComboBoxOptions doesn't go into focus when clicked

[se-omar]

What package within Headless UI are you using? @headlessui/react

What version of that package are you using? v2.2.0

What browser are you using? Brave, Chrome, Firefox

Reproduction URL https://github.com/se-omar/combobox-bug

Describe your issue I'm using the autocomplete combobox component, and I need to add an input field below all the options like the below snippet

<ComboboxOptions anchor="bottom" className="border empty:invisible">
    {filteredPeople.map((person) => (
	<ComboboxOption key={person.id} value={person} className="data-[focus]:bg-blue-100">
	    {person.name}
	</ComboboxOption>
    ))}
	    <input // <<<---- this input doesn't focus when clicked
		onClick={() => { console.log('clicked') }}
		onFocus={() => { console.log('focused') }}
		className='bg-white text-black rounded-md border border-gray-900' type="text"
	    />
</ComboboxOptions>

this functionality worked fine in v1.7, but since upgrading to v2, when clicking the input, it doesn't go into focus, the focus stays on the original ComboBoxInput, I found a hack to fix this by manually focusing the input on click

  <input // <<<---- now the input will focus
		onClick={(e) => { e.target.focus() }}
		onFocus={() => { console.log('focused') }}
		className='bg-white text-black rounded-md border border-gray-900' type="text"
	    />

I also recorded a video for reproduction: https://jam.dev/c/d9e24fe6-641a-478c-be6e-4a0d6b513405

[mustafaucardev]

Same issue after version updated. My template in ComboboxOption does not work for onClick evet.

        <ComboboxOption
              ...
        >
        <div
          onClick={(e: React.MouseEvent) => {
            addToFavorites(e, item, !isFavorite)
          }}
        >
          ...
        </div>
        </ComboboxOption>

[RobinMalfait]

Hey!

It looks like you are using the Combobox component not for its intended purposes. Adding another element like an input inside the ComboboxOptions won't make it accessible because you won't be able to reach it via the keyboard.

I totally get that it worked in v1, but even there it was not accessible and intended to be used like this.

What's the use case for adding an additional input inside the Combobox? I would recommend to move it outside and render once an item is selected. If your use case is allowing to select any option instead of one from the list, then you can create a custom option based on the current input value.

More info about that use case can be found here: https://headlessui.com/react/combobox#allowing-custom-values

Going to close this as this is not something we support.