'Why Link not working on menu dropdown in material UI?
I was trying to open both menucard(subcategories) onhover over nav link and also let me click on the link(categories) but it's only opening the menucard and not letting me click on the Navlink. Navlink redirects to category whereas menu card links redirect to subcategory. It does not even letting me click on navlink
const [anchorEl, setAnchorEl] = useState(null);
const [subCategory, setSubCategory] =useState([]);
const [openCartSidebar, setCartOpenSidebar] = useState(false);
function handleClick(event, item) {
const selected = links.filter((i) => i.title == item.title);
setSubCategory(selected[0].sub);
if (anchorEl !== event.currentTarget){
setAnchorEl(event.currentTarget);
}
}
const toggleCartNav = () => {
setCartOpenSidebar((prev) => !prev);
};
function handleClose(sub) {
history.push(/productcategory/category/${sub});
setAnchorEl(null);
}
return (<>
<AppBar className={classes.header}>
<Toolbar className={classes.headerContainer}>
<Hidden only={["xs", "sm"]}>
<nav className={classes.navbar}>
{links.map((item, i) => (
<>
<NavLinkclassName={classes.navItem}
to={item.path}
activeClassName={classes.activeNav}
key={i}
exact={item.isExact}
aria-owns={anchorEl ? "simple-menu" : undefined}
aria-haspopup="true"
onMouseOver={(e) => handleClick(e, item)}>{item.title}
</NavLink>
</>
))}
<Menuid="simple-menu"
anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
className={classes.menu}
transformOrigin={{ vertical: "top", horizontal: "center" }}
open={Boolean(anchorEl)}
onClose={handleClose}
MenuListProps={{ onMouseLeave: handleClose }}>
{subCategory.map((subCategory, index) => (
<MenuItem className={classes.menuItem}
onClick={() => handleClose(subCategory)}>
{subCategory}
</MenuItem>))}
</Menu>
</nav>
</Hidden>
</Toolbar>
<>)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
