Material UI Menu not closing after clicking a menu item - reactjs

Question

This is code straight from MUI menu - customized menu.. I didn't want to put my code because there are some built in functions that make it more confusing.
In my code (not this) I open a MUI Dialog when a menu item is clicked. The issue is that the menu does not go away after the Dialog is submitted.
I would like to know how to make the menu close as soon as anything on the menu is clicked(menu items).
Thanks
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import Menu, { MenuProps } from '#material-ui/core/Menu';
import MenuItem from '#material-ui/core/MenuItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import InboxIcon from '#material-ui/icons/MoveToInbox';
import DraftsIcon from '#material-ui/icons/Drafts';
import SendIcon from '#material-ui/icons/Send';
const StyledMenu = withStyles({
paper: {
border: '1px solid #d3d4d5',
},
})((props: MenuProps) => (
<Menu
elevation={0}
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
{...props}
/>
));
const StyledMenuItem = withStyles((theme) => ({
root: {
'&:focus': {
backgroundColor: theme.palette.primary.main,
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
color: theme.palette.common.white,
},
},
},
}))(MenuItem);
export default function CustomizedMenus() {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Button
aria-controls="customized-menu"
aria-haspopup="true"
variant="contained"
color="primary"
onClick={handleClick}
>
Open Menu
</Button>
<StyledMenu
id="customized-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<StyledMenuItem>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</StyledMenuItem>
<StyledMenuItem>
<ListItemIcon>
<DraftsIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Drafts" />
</StyledMenuItem>
<StyledMenuItem>
<ListItemIcon>
<InboxIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Inbox" />
</StyledMenuItem>
</StyledMenu>
</div>
);
}

Answer 1

You can just assign handleClose handler to the onClick property of the <Menu> itself like this:
<StyledMenu
onClick={handleClose}
onClose={handleClose}
{...yourProps}
>
...
</StyledMenu>

Answer 2

You can put an onClick prop to the MenuItem:
<StyledMenuItem onClick={handleClose}>Text</StyledMenuItem>

Answer 3

I had a similar issue, couldn't apply hangindev.com solution to my problem. Only difference was that my menu items were children passed outside of the menu component.
You could use the onBlur event on StyledMenu.
<StyledMenu
id="customized-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
onBlur={handleClose}
>{children}<StyledMenu>
Sorry for posting after 2 years, I hope this contributes. I used #mui/material 5.4.0 version.

Answer 4

onBlur={handleClose} works correctly if pass comp as children for other

Answer 5

we may use onClick instead of onClose in
<StyledMenu
id="customized-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClick={onClose}
>