shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
74.47k stars 4.6k forks source link

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

Open jkinley opened 2 months ago

jkinley commented 2 months ago

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

image

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

image

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"
          >
image

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

orendecor commented 1 month ago

@jkinley When I click on the select I don't see a ring until I click outside of the select: https://ui.shadcn.com/docs/components/select

Is this the desired behavior from your POV?

orendecor commented 1 month ago

Digging into it, it makes sense the ring does not appear on the combobox on click as we directly shift the focus to the popup, whereas while using the keyboard the focus is not shifting up until you click enter (and the ring disappears as intended).

I'm not sure there is a bug here