.focus() nor .click() triggers popup open when autoHighlight is true

[kylemh]

Bug report

Current behavior

If autoHighlight is true and a user clicks on the input in a combobox, the popup for the listbox will open (and the first item will be highlighted); however, .click() nor .focus() events on the input leads to the popup opening.

Expected behavior

The popup should open on input.click() when autoHighlight is true.

Reproducible example

https://stackblitz.com/edit/a3zpgezr?file=src%2FApp.tsx

Base UI version

Latest

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Additional context

On the surface, my point sounds pretty minor, but I think my usecase is one people will frequently face: adding a prefixed icon to the input area of the combobox. With multi-select combobox, it's not possible to put the Chips UI inside of a label because click events behave wildly (naturally). Since Chips cant go inside the label, the actual input and label are the only elements that open the popup when clicked if autoHighlight is true. This sucks because the input can get progressively smaller and is a moving target for seeing-eye users. I found myself and others clicking on the area where the prefixed icon is a safe, static place where I'd feel like the input could be targeted. So, I added a click handler to "click" the input if the area where the prefixed icon is clicked. This focuses the input, but it doesn't open the popup.

I don't actually believe I have any recourse besides changing Base UI source code because of the inability to switch between controlled and uncontrolled (not complaining about that bit though!)

[atomiks]

Is there a reason you can't use <Combobox.Trigger> around the icon instead of a <div>?

[kylemh]

wonderful! i incorrectly assumed because the trigger was meant to be used in place of input from the code in this example

I guess this made me realize the label is also not opening the popup. is the shape of the anatomy of Field required to be:

<Field.Root>
  <Field.Label />
  
  <Combobox.Root />
</Field.Root>

or can Field.Label exist within Combobox.Root? It doesn't seem to matter if I do nativeLabel or not, the popup still won't open when clicking on the label

https://stackblitz.com/edit/a3zpgezr?file=src%2FApp.tsx

If the anatomy is strict like that, I'll just re-organize my HTML and CSS.

edit: Oh, I guess even the docs don't have the popup open on label click if I activate autoHighlight. I guess I should transform this issue to be about that? It doesn't seem ideal to use Combobox.Trigger around the label because button's are invalid children of label and visa vis.

edit 2: this is my workaround i guess

<label htmlFor={inputId} className="relative other-classes">
  <BaseCombobox.Trigger
    aria-hidden
    className="absolute inset-0 size-[inherit]"
    aria-haspopup={null}
    aria-expanded={null}
  />
  {label.text}
  {isRequired && <span className="text-destructive-foreground"> *</span>}
</label>

but I get a type error when unsetting aria-haspopup and aria-expanded. i'm also a bit confused, if tabIndex="-1" on Combobox.Trigger, why do the aria props matter? Are there seeing-eye folks reliant on screen readers?

[atomiks]

It's intentional that the popup doesn't open when clicking the label (or receiving focus), which matches native <select> behavior. It just focuses the input or trigger. It's mentioned here:

Replace the rendered <label> element with a <div> element and add nativeLabel={false} so it does not inherit native label behaviors. This ensures clicking on the label will focus the combobox trigger without opening the associated popup to match native <select> behavior, and prevents CSS :hover from activating on the trigger when hovering over the label.

[kylemh]

thanks!