infinite open→close→open→close when trying to trigger dropdown on hover

[BorisTheTripper]

I'm trying to define a dropdown that is triggered on hover (mouseenter & mouseleave) instead of on click. However, when I hover over a trigger, it just creates an infinite event cycle of mouseenter, immediately followed by mouseleave, and going in circles ad infinitum. I suppose that changing the state causes the component to re-render, unmounting the previous trigger and firing mouseleave again.

I understand that this is more of a React question than a Radix question, but I thought I might get quality feedback here too. What might be a quick solution to this problem?

export const HoverDropdown = () => {
  const [open, setOpen] = useState(false);

  const handleMouseEnter = () => {
    console.log("onMouseEnter");
    setOpen(true);
  };

  const handleMouseLeave = () => {
    console.log("onMouseLeave");
    setOpen(false);
  };

  return (
    <Dropdown.Root open={open} onOpenChange={setOpen}>
      <Dropdown.Trigger
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        onClick={(e) => e.preventDefault()}
      >
        trigger
      </Dropdown.Trigger>
      <Dropdown.Portal>
        <Dropdown.Content>content</Dropdown.Content>
      </Dropdown.Portal>
    </Dropdown.Root>
  );
}

[ryanschiang]

This behavior is because Radix UI's dropdown menu by default treats the dropdown content as a modal, disabling pointer events on body when opened (causing mouseleave --> hide dropdown --> mouseenter --> show dropdown --> etc.)

You'll need to wrap everything in a <div onMouseLeave={handleMouseLeave> and set modal={false} on the Dropdown.Root. I explain here with a detailed example.