[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.

[abarani]

@segunadebayo Regarding this, what do you think of binding the escape key to the clear trigger?

https://github.com/chakra-ui/zag/blob/main/packages/machines/combobox/src/combobox.machine.ts#L174
https://github.com/chakra-ui/zag/blob/main/packages/machines/combobox/src/combobox.machine.ts#L774

Here I see that the key is already bound to the revertInputValue action and that function only reverts the custom input value to the selected one. Maybe a check can be added to clear the selection in case the input value matches the selected one to improve the behaviour.

I think this can be an improvement in terms of accessibility at least on non-multiple selections and get rid of the need for the clear trigger to be focusable.