Theo's Typesafe Cult•5mo ago

How to stop outline from showing after closing dropdown?

I'm using shadcn-ui and is there a way to not show outline when closing dropdown? or only show the outline when navigating with keyboard.

Solution:

Fixed it. Added this line to the component ```tsx <DropdownMenuPrimitive.Content onCloseAutoFocus={(e) => e.preventDefault()} >...

Jump to solution

3 Replies

dex•5mo ago

<DropdownMenu>
  <DropdownMenuTrigger>
      <MoreVertical />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem>Flashcards</DropdownMenuItem>
    <DropdownMenuItem>Mindmap</DropdownMenuItem>
    <DropdownMenuItem>Pre-test</DropdownMenuItem>
    <DropdownMenuItem>Post-test</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

<DropdownMenu>
  <DropdownMenuTrigger>
      <MoreVertical />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem>Flashcards</DropdownMenuItem>
    <DropdownMenuItem>Mindmap</DropdownMenuItem>
    <DropdownMenuItem>Pre-test</DropdownMenuItem>
    <DropdownMenuItem>Post-test</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Solution

dex•5mo ago

Fixed it. Added this line to the component

  <DropdownMenuPrimitive.Content
    onCloseAutoFocus={(e) => e.preventDefault()}
  >

  <DropdownMenuPrimitive.Content
    onCloseAutoFocus={(e) => e.preventDefault()}
  >

dex•5mo ago

Stack Overflow

Shadcn focus-visible after click outside still stands

Added dropdown via Shadcn but button keeps beeing focused after clicking outside of menu, shoudn't be like this! Code Before click outside or select After click outside or select Tried to check Rad...

Gaming

Programming

How to stop outline from showing after closing dropdown?