Radix dropdownmenu to trigger on hover

[ayaniv]

I want to use the Radix Dropdown-Menu to be opened not on click but on hover instead.
So my idea is that you'll let the developer choose how to trigger the drop-down menu - "hover" or "click" while still keeping the amazing a11y.

[joaom00]

You can control the dropdown with open and onOpenChange props

const [open, setOpen] = React.useState(false)

<DropdownMenu.Root open={open} onOpenChange={setOpen}>
  ...
</DropdownMenu.Root>

[danielx-art]

Yes, but how to make it open on hover? When the trigger is hovered as well as clicked? Would be cool if it was implemented as a prop of the dropdown root itself, like trigger="click"|"hover"|"both".

[aditya22314]

But here i am not able to allowed to use states for the opening and closing of the triggerer.Is there any alternative way to trigger it while hovering ?

[pruthvi2103]

You can do
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
...

<Button onMouseOver={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>

remove onMouseLeave if you dont want it to close

[acharyarupak391]

but ideally you wouldn't want the menu to be closed when u are hovering in the menu itself,
but <Button onMouseOver={() => setOpen(true)} onMouseLeave={() => setOpen(false)}> will close the menu as well.

I know we can make it work by listening to different mouse events in menu element and debouncing in the button before closing and what not, but I think it would be a whole lot easier if we could just use some kind of trigeer prop in the dropdown trigger itself, as @danielx-art suggested

should I open a PR for this? Would it be useful @joaom00 ?

[ryanschiang]

You can solve this more simply by using modal={false} on the DropdownMenu.Root, which will prevent any flickering and open/close the dropdown upon hovering the trigger.

You'll need to wrap the DropdownMenu in a div so users can interact with the dropdown content without it closing.

<div onMouseLeave={() => setOpen(false)}>
    <DropdownMenu modal={false}>
        <DropdownTrigger onMouseEnter={() => setOpen(true)}>
        </DropdownTrigger>
    </DropdownMenu>
</div>

Here's a short example