ShadCN/Radix Dropdown Open on Hover Tutorial (Fix "Flicker")

Happy Sunday everyone!

Today I debugged an annoying UI bug when using shadcn / Radix UI's Dropdown Menu component.

The Bug

I wanted the dropdown menu on Featurable to open when hovering (my thinking was: why make the user do extra clicks?) and stay open while interacting with the dropdown.

My first attempt was to wrap the DropdownMenu in a <div>:

HeaderLink.tsx


const HeaderLink = () => {
    const [dropdownOpen, setDropdownOpen] = useState(false);

    return (
        <div
           onMouseLeave={() => {
               // Close when leaving the trigger or dropdown menu
               setDropdownOpen(false);
           }}
       >
           <DropdownMenu
               open={dropdownOpen}
               onOpenChange={setDropdownOpen}
           >
               <DropdownMenuTrigger
                   onMouseEnter={() => setDropdownOpen(true)}
               >
                   Open me!
               </DropdownMenuTrigger>
               <DropdownContent>
                   {/* Dropdown content goes here */}
               </DropdownContent>
           </DropdownMenu>
       </div>
    );
}

This worked! But it caused an annoying flicker:

If you were to console.log the mouseenter and mouseleave events, you'd see:


Entering
Leaving
Entering

So why was this happening?

After debugging, I noticed that upon opening the Dropdown Menu, Radix UI was causing the body tag to receive style="pointer-events: none", which prevented scrolling and any outside interaction while the dropdown was open.

Here's what was happening:

Hover the trigger --> mouseenter event (1st Entering console log)
Dropdown opens
Body receives pointer-events: none
Since the trigger (which is in the <body>) can not receive mouse events, it fires a mouseleave (Leaving console log)

The Fix

The fix is actually quite simple. Simply add modal={false} to the DropdownMenu component like so:


const HeaderLink = () => {
    const [dropdownOpen, setDropdownOpen] = useState(false);

    return (
        <div
            onMouseLeave={() => {
                // Close when leaving the trigger or dropdown menu
                setDropdownOpen(false);
            }}
        >
            <DropdownMenu
                open={dropdownOpen}
                onOpenChange={setDropdownOpen}
                modal={false} // This will prevent the dropdown menu from being a modal 
            >
                <DropdownMenuTrigger
                    onMouseEnter={() => setDropdownOpen(true)}
                >
                    Open me!
                </DropdownMenuTrigger>
                <DropdownContent>
                    {/* Dropdown content goes here */}
                </DropdownContent>
            </DropdownMenu>
        </div>
    );
}

Now when the DropdownMenuTrigger is hovered, the <body> tag will not receive pointer-events: none.

Let's see the fix in action:

It worked! Hope this quick fix helps you with this annoying UI bug when using shadcn or Radix UI.

Meet the Author

Ryan Chiang

Hey! I'm Ryan. I build things and write about them. This is my blog of my learnings, tutorials, and whatever else I feel like writing about.
What I'm currently building →.