I have problem with Material Menus. When I open menu and from there click on my Dialog the menu stay on the background without closing it. When I set onClick={handleClose}
on my MenuItem it closing the menu, but also close the Dialog
const RowMenu = ({ dataParams, refetch }) => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<IconButton
aria-label="more"
id="long-button"
aria-controls={open ? 'long-menu' : undefined}
aria-expanded={open ? 'true' : undefined}
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
id="long-menu"
MenuListProps={{
'aria-labelledby': 'long-button'
}}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
PaperProps={{
style: {
maxHeight: 48 * 4.5,
width: '20ch'
}
}}
>
<MenuItem sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<EditParams dataParams={dataParams} refetch={refetch} />
</MenuItem>
<MenuItem sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Typography>Изтриване</Typography>
</MenuItem>
</Menu>
</>
);
}