Closed ahkhanjani closed 5 months ago
hi @ahkhanjani I believe it'd be good for ring-0 to become the default class.
@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
?
@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>
.
77a0e30cc74dd844cdb6e007e120a93c8120b3c6 input-otp ships now with box-shadow:none
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.