I'm new to Material-UI and just started fiddling around with their App bar with Menu example. When toggling the menu dropdown, it opens up over the Appbar itself, whereas I'd like it to open below the Navbar.
From the docs, I understand that this can be done with anchorEl as explained here. But when I implement this to my menu component nothing happens. What is "the right material-UI way" to take care of this?
class Header extends React.Component {
state = {
auth: true,
anchorEl: null,
anchorOriginVertical: 'bottom',
anchorOriginHorizontal: 'right',
transformOriginVertical: 'top',
transformOriginHorizontal: 'right',
anchorReference: 'anchorEl',
};
handleChange = (event, checked) => {
this.setState({ auth: checked });
};
handleMenu = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { classes } = this.props;
const { auth, anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Typography type="title" color="inherit" className={classes.flex}>
Title
</Typography>
{auth && (
<div>
<IconButton
aria-owns={open ? 'menu-appbar' : null}
aria-haspopup="true"
onClick={this.handleMenu}
color="contrast"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
open={open}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
</Menu>
</div>
)}
</Toolbar>
</AppBar>
</div>
);
}
}
I had a similar issue and the way I got it to work is by setting the properties on the menu itself like this:
<Menu
id="menu-appbar"
anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
open={open}
onClose={this.handleClose}
className={props.classes.menu}
>
I had to put in getContentAnchorEl={null} to get the vertical properties to work, which I eventually learned from this issue https://github.com/mui-org/material-ui/issues/7961 .
Not sure how to do this when using the state to set the properties of the anchor element, but maybe this will get you started.
This was my solution, hope this will help someone.
<Menu
open={this.state.openProps}
anchorEl={this.state.anchorEl}
onClose={onClose}
className={classes.styles}
disableAutoFocusItem
PaperProps={{
style: {
left: '50%',
transform: 'translateX(-77%) translateY(32%)',
}
}}
MenuListProps={{
style: {
padding: 0,
},
}}
>
There is an error in Matheus answer, the type of anchorEl is not boolean, in ReactHooks it would need to be:
const [menuOpen, setMenuOpen] = useState<boolean>(false);
const [anchorEl, setAnchorEl] = useState()
const recordButtonPosition = (event: any) => {
setAnchorEl(event.currentTarget);
setMenuOpen(true);
}
let closeMenu = () => {
setMenuOpen(false);
}
return (
<React.Fragment>
<Button onClick={recordButtonPosition}>
OPEN MENU
</Button>
<Menu
anchorEl={anchorEl}
open={menuOpen}
onClose={closeMenu}>
<MenuItem onClick={closeMenu}> ExampleMenuItem </MenuItem>
</Menu>
</React.Fragment>
);