[Combobox] [React] Open and Clear Trigger can't be focused with keyboard

[benebene84]

Description

Current behavior

The combobox has open and clear trigger primitives to either open the combobox, or clear the selected value(s) in the input. Both triggers can be used by clicking them with the mouse. However it is impossible to focus them with the keyboard (tab on it). Both primitives have a tabindex of -1.

Expected behavior

I would expect both elements to be able to navigate with keyboard as well. Removing the negative tab index makes them focusable and controllable.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/stupefied-robinson-fgfpv9?file=%2Fsrc%2FApp.tsx

Steps to Reproduce

1. Open the sandbox
2. Inspect the triggers

Ark UI Version

"@ark-ui/react": "3.0.3"

Framework

• React
• Solid
• Vue

Browser

All

Additional Information

I don't know if there are any specific reasons why the negative tabindex is set, if so I'd be happy to know them :) Thanks a lot for your work, it's really a great base to build your components on.

[benebene84]

Okay, I did some follow-up and saw this behavior is defined in zag itself:

Trigger:
https://github.com/chakra-ui/zag/blob/main/packages/machines/combobox/src/combobox.connect.ts#L243

Clear Trigger:
https://github.com/chakra-ui/zag/blob/main/packages/machines/combobox/src/combobox.connect.ts#L329

For the trigger it seems it's configurable, for the clear trigger it's not.

[segunadebayo]

I love that you took the time to dig into the Zag codebase.

Yes, this is by design. Keyboard users can use the arrow down/up keys to open the combobox. The trigger serves as an affordance to open the combobox with the pointer.

The clear trigger one is arguable, but we removed it from the tab flow to be consistent with the trigger. Users can always apply a tabIndex:0 if they need to be in the tab flow. Perhaps we could introduce a focusable prop? I will think about it some more.

[benebene84]

Thanks for the quick response and the feedback!

This makes sense. Normally I try to allow focus on any element that can be clicked with a pointer as well, but using up and down keys is also the much faster way here for keyboard users.

Yes, the clear trigger is something that we need to be focusable for our multi selection combobox. I thought I tried to overwrite the tabindex with 0, but testing it now again, it works perfectly fine. It might be nice to have that as a focusable prop as well but I don't know how common this requirement is.