[bug]: Combobox should have similar focus to select and other inputs

[jkinley]

Describe the bug

Currently when you focus on the combobox there is no focus ring. However, if you tab to the combobox (using focus-visible) there is a ring. The goal should be to make the combobox work like the select regarding focus rings.

The problem is that the trigger for the combobox is a button and buttons in shadcn don't have a ring on focus.

The Combobox example does not have the correct classes on the trigger (Button).

The Select component has focus classes on the trigger (Button):

When I add the tailwind focus classes to my combobox it seems to work ok, but not quite the experience as the Select.

<Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={open}
            className="w-[200px] justify-between ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
          >

but maybe you want to have more integrated solution.

Affected component/components

Combobox

How to reproduce

1. Click on combobox, is no focus ring.
2. Tab to combobox, there is focus ring.
3. Click on select, there is focus ring.
4. Tab to select, there is focus ring.

Codesandbox/StackBlitz link

https://ui.shadcn.com/docs/components/combobox

Logs

No response

System Info

Chrome latest
Shadcn latest

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues