Styjun

I am using Material-UI Menu.
It should work as it was, but just using mouse hover, not click.
Here is my code link: https://codesandbox.io/embed/vn3p5j40m0

Below is the code of what I tried. It opens correctly, but doesn't close when the mouse moves away.

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

function SimpleMenu() 
 const [anchorEl, setAnchorEl] = React.useState(null);

 function handleClick(event) 
 setAnchorEl(event.currentTarget);
 

 function handleClose() 
 setAnchorEl(null);
 

 return (
 <div>
 <Button
 aria-owns=anchorEl ? "simple-menu" : undefined
 aria-haspopup="true"
 onClick=handleClick
 onMouseEnter=handleClick
 >
 Open Menu
 </Button>
 <Menu
 id="simple-menu"
 anchorEl=anchorEl
 open=Boolean(anchorEl)
 onClose=handleClose
 onMouseLeave=handleClose
 >
 <MenuItem onClick=handleClose>Profile</MenuItem>
 <MenuItem onClick=handleClose>My account</MenuItem>
 <MenuItem onClick=handleClose>Logout</MenuItem>
 </Menu>
 </div>
 );


export default SimpleMenu;

The code below seems to work reasonably. The main changes compared to your sandbox are to use onMouseOver=handleClick instead of onMouseEnter on the button. Without this change, it doesn't open reliably if the mouse isn't over where part of the menu will be. The other change is to use MenuListProps= onMouseLeave: handleClose . Using onMouseLeave directly on Menu doesn't work because the Menu includes an overlay as part of the Menu leveraging Modal and the mouse never "leaves" the overlay. MenuList is the portion of Menu that displays the menu items.

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

function SimpleMenu() 
 const [anchorEl, setAnchorEl] = React.useState(null);

 function handleClick(event) 
 if (anchorEl !== event.currentTarget) 
 setAnchorEl(event.currentTarget);
 
 

 function handleClose() 
 setAnchorEl(null);
 

 return (
 <div>
 <Button
 aria-owns=anchorEl ? "simple-menu" : undefined
 aria-haspopup="true"
 onClick=handleClick
 onMouseOver=handleClick
 >
 Open Menu
 </Button>
 <Menu
 id="simple-menu"
 anchorEl=anchorEl
 open=Boolean(anchorEl)
 onClose=handleClose
 MenuListProps= onMouseLeave: handleClose 
 >
 <MenuItem onClick=handleClose>Profile</MenuItem>
 <MenuItem onClick=handleClose>My account</MenuItem>
 <MenuItem onClick=handleClose>Logout</MenuItem>
 </Menu>
 </div>
 );


export default SimpleMenu;