Trigger mouse enter and leave events simultaneously
<p><br /></p>
<pre class="brush:php;toolbar:false;"><Drawer
anchor="left"
className="drawerArea left-navigate"
variant="permanent"
open={true}
PaperProps={{
style: {
width: "inherit",
background: "#172B4D",
backgroundImage: `linear-gradient(to right,#172B4D 60% , white 40%)`,
border: "none",
overflowY: "hidden",
},
}}
>
<Box>
<Box>
<Box>
<Box className="listing" sx={{ width: "100%" }}>
<List className="mp-0 wh-100 overflow-overlay">
{menus &&
menus.length > 0 &&
menus.map((item, index) => (
<Box key={index}>
<ListItem
ref={popoverAnchor}
className={`mp-0 navigationList flex-start-center`}
** onMouseEnter={(e) => {
setNestedArr([...item?.children]);
popoverEnter(e);
setAnchorEl(e?.currentTarget);
}}
onMouseLeave={(e) => {
popoverLeave(e);
}}**
onClick={(e) => {
console.log(item,'parent_clicked')
}}
>
<ListItemText>
<Box>
{micons[item?.name] ? (
micons[item?.name]
) : (
<Icon>{item?.icon_class}</Icon>
)}
</Box>
<Typography>
{item?.name}
</Typography>
</Typography>
}
/>
</ListItem>
</Box>
))}
</List>
</Box>
</Box>
</Box>
{open && nestedArr.length ? (
<NestedMenu
open={open}
setOpen={(val) => setOpen(val)}
anchorEl={anchorEl}
nestedArr={nestedArr}lightBackground={lightBackground}
secondaryColor={secondaryColor}
popoverAnchor={popoverAnchor}
popoverEnter={popoverEnter}
popoverLeave={popoverLeave}
/>
) : null}
</Box>
</Drawer></pre>
<p><strong> There are some menus on the left side of the page (using MUI library and material-ui-nested-menu-item library), when the mouse is hovered over the Listitems, it will show a menu with nested or sub menu and close the menu on mouse leave, but the problem I'm facing is that the onMouseLeave event is fired at the same time while hovering over the menu, so the menu doesn't open. I can't figure out what the problem is. </strong></p>