ui
ui copied to clipboard
shadcn-ui
The focus outline looks not good!
not sure if this is what OP is talking about, but this looks weird
and on textarea:
yeah it is -- not sure why tho, the official repo template doesn't have it, but if you copy and paste the code it does -- will investigate
@hiql I was having the same issue... and I was able to fix it by adding these classes to the CommandInput component.
<CommandInput className='border-0 focus:ring-0'/>
tried a few different tailwind and global CSS tweaks, but nothing worked reliably
I ended up just reworking my template to build on top of the official template and everything works as expected
@colinricardo Could you share how you managed to fix the focus outline?
I tried investigating where it comes from in the dev tools, but it's nowhere to be seen...
I will say, the focus ring on the new york style looks out of place.
I'd recommend something like this:
ring-1 ring-inset focus:ring-2 focus:ring-inset [and assorted colors]
I was experiencing an issue where the outline was getting clipped by parent container.
Adding ring-inset helps instead of adding padding in parent container.
Without ring-inset
With ring-inset
Just had this issue and realised I was importing CommandInput from cmdk rather than from Shadcn. This was causing the LHS clipping issue @jsgv notes above.
Import from cmdk
Import from /ui/command
(ignore bounding boxes on the Button component)
I agree that the UI does not look good. Black shadow displayed when the element is focused. I solved problem as below for select. Hope it helps.
<SelectTrigger className="focus:ring-transparent">
The most important thing is to understand what it is and why it behaves like this. Please try this "focus:!ring-[#FF8B13]"
I use <Textarea placeholder="Type your message here." className="focus:!ring-transparent" /> to make the ring invisible
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
