Theo's Typesafe Cult•12mo 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

dexOP•12mo 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•12mo ago

Fixed it. Added this line to the component

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

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

dexOP•12mo 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?