Strange ring around the input on focus

[ahkhanjani]

On focus, I get a ring around my entire OTP component.

I use shadcn. This isn't unique to the new shadcn version of the component. Just the Tailwind might be the problem. Adding className="focus-visible:ring-0" fixes it. Could this become a default class?

There's a problem with the implementation of shadcn that I mentioned here: https://github.com/shadcn-ui/ui/issues/2953. I had to manually fix shadcn's code for this to work.

[guilhermerodz]

hi @ahkhanjani I believe it'd be good for ring-0 to become the default class.

[guilhermerodz]

@ahkhanjani can you show me your globals.css file?

can you use Chrome DevTools to figure out where is the outline declared, coming from a CSS perspective, when the input is active with modifier :focus-visible?

[ahkhanjani]

@guilhermerodz here's my globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --nav-height: 4rem;

    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.75rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply min-w-0 border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

It's mostly just shadcn's blue theme.

can you use Chrome DevTools to figure out where is the outline declared, coming from a CSS perspective, when the input is active with modifier :focus-visible?

The focus is always on the <input>.

[guilhermerodz]

77a0e30cc74dd844cdb6e007e120a93c8120b3c6 input-otp ships now with box-shadow:none