How to Make Material-UI Menu based on Hover, not Click - reactjs

Question

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;

Answer 1

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;

Answer 2

I've updated Ryan's original answer to fix the issue where it doesn't close when you move the mouse off the element to the side.
How it works is to disable the pointerEvents on the MUI backdrop so you can continue to detect the hover behind it (and re-enables it again inside the menu container). This means we can add a leave event listener to the button as well.
It then keeps track of if you've hovered over either the button or menu using currentlyHovering.
When you hover over the button it shows the menu, then when you leave it starts a 50ms timeout to close it, but if we hover over the button or menu again in that time it will reset currentlyHovering and keep it open.
I've also added these lines so the menu opens below the button:
getContentAnchorEl={null}
anchorOrigin={{ horizontal: "left", vertical: "bottom" }}
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";
import makeStyles from "#material-ui/styles/makeStyles";
const useStyles = makeStyles({
popOverRoot: {
pointerEvents: "none"
}
});
function SimpleMenu() {
let currentlyHovering = false;
const styles = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
if (anchorEl !== event.currentTarget) {
setAnchorEl(event.currentTarget);
}
}
function handleHover() {
currentlyHovering = true;
}
function handleClose() {
setAnchorEl(null);
}
function handleCloseHover() {
currentlyHovering = false;
setTimeout(() => {
if (!currentlyHovering) {
handleClose();
}
}, 50);
}
return (
<div>
<Button
aria-owns={anchorEl ? "simple-menu" : undefined}
aria-haspopup="true"
onClick={handleClick}
onMouseOver={handleClick}
onMouseLeave={handleCloseHover}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
MenuListProps={{
onMouseEnter: handleHover,
onMouseLeave: handleCloseHover,
style: { pointerEvents: "auto" }
}}
getContentAnchorEl={null}
anchorOrigin={{ horizontal: "left", vertical: "bottom" }}
PopoverClasses={{
root: styles.popOverRoot
}}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
export default SimpleMenu;

Answer 3

Using an interactive HTML tooltip with menu items works perfectly, without requiring you to necessarily click to view menu items.
Here is an example for material UI v.4.
import React from 'react';
import { withStyles, Theme, makeStyles } from '#material-ui/core/styles';
import Tooltip from '#material-ui/core/Tooltip';
import { MenuItem, IconButton } from '#material-ui/core';
import MoreVertIcon from '#material-ui/icons/MoreVert';
import styles from 'assets/jss/material-dashboard-pro-react/components/tasksStyle.js';
// #ts-ignore
const useStyles = makeStyles(styles);
const LightTooltip = withStyles((theme: Theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
padding: 0,
margin: 4,
},
}))(Tooltip);
interface IProps {
menus: {
action: () => void;
name: string;
}[];
}
const HoverDropdown: React.FC<IProps> = ({ menus }) => {
const classes = useStyles();
const [showTooltip, setShowTooltip] = useState(false);
return (
<div>
<LightTooltip
interactive
open={showTooltip}
onOpen={() => setShowTooltip(true)}
onClose={() => setShowTooltip(false)}
title={
<React.Fragment>
{menus.map((item) => {
return <MenuItem onClick={item.action}>{item.name}</MenuItem>;
})}
</React.Fragment>
}
>
<IconButton
aria-label='more'
aria-controls='long-menu'
aria-haspopup='true'
className={classes.tableActionButton}
>
<MoreVertIcon />
</IconButton>
</LightTooltip>
</div>
);
};
export default HoverDropdown;
Usage:
<HoverDropdown
menus={[
{
name: 'Item 1',
action: () => {
history.push(
codeGeneratorRoutes.getEditLink(row.values['node._id'])
);
},
},{
name: 'Item 2',
action: () => {
history.push(
codeGeneratorRoutes.getEditLink(row.values['node._id'])
);
},
},{
name: 'Item 3',
action: () => {
history.push(
codeGeneratorRoutes.getEditLink(row.values['node._id'])
);
},
},{
name: 'Item 4',
action: () => {
history.push(
codeGeneratorRoutes.getEditLink(row.values['node._id'])
);
},
},
]}
/>

Answer 4

I gave up using Menu component because it implemented Popover. To solve the overlay problem I had to write too much code. So I tried to use the old CSS way:
CSS: relative parent element + absolute menu element
Component: Paper + MenuList
<ListItem>
<Link href="#" >
{user.name}
</Link>
<AccountPopover elevation={4}>
<MenuList>
<MenuItem>Profile</MenuItem>
<MenuItem>Logout</MenuItem>
</MenuList>
</AccountPopover>
</ListItem>
styled components:
export const ListItem = styled(Stack)(() => ({
position: 'relative',
"&:hover .MuiPaper-root": {
display: 'block'
}
}))
export const AccountPopover = styled(Paper)(() => ({
position: 'absolute',
zIndex:2,
right: 0,
top: 30,
width: 170,
display: 'none'
}))

Answer 5

use **MenuListProps** in the Menu component and use your menu **closeFunction** -
MenuListProps={{ onMouseLeave: handleClose }}
example-
<Menu
dense
id="demo-positioned-menu"
anchorEl={anchorEl}
open={open}
onClose={handleCloseMain}
title={item?.title}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
MenuListProps={{ onMouseLeave: handleClose }}
/>
I hope it will work perfectly.