Material UI - Menu Component locks body scrollbar - reactjs

Question

I have made a dropdown menu using Material-ui Menu component.
The problem is once that dropdown menu is open, the body scrollbar disappears and can not scroll over the page.
I tried to find answers but there are only a few answers for Popper, Popover or Select component but seems like no answer for Menu component.
DropDownMenu component is like this.
import React from 'react'
import Menu from '#material-ui/core/Menu'
import MuiMenuItem from '#material-ui/core/MenuItem'
import styled from 'styled-components'
import MoreVertIcon from '#material-ui/icons/MoreVert'
import IconButton from '#material-ui/core/IconButton'
import SendIcon from '#material-ui/icons/Send'
import ListItemIcon from '#material-ui/core/ListItemIcon'
import ListItemText from '#material-ui/core/ListItemText'
const MenuItem = styled(MuiMenuItem)`
justify-content: flex-end;
`
export default function DropDownMenu() {
const [anchorEl, setAnchorEl] = React.useState(null)
const handleClick = (event) => {
setAnchorEl(event.currentTarget)
}
const handleClose = () => {
setAnchorEl(null)
}
return (
<div>
<IconButton
style={{ padding: 0 }}
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertIcon style={{ fontSize: 15 }} />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
getContentAnchorEl={null}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
</Menu>
</div>
)
}
Sharpening code to Menu props is as following.
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
getContentAnchorEl={null}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
The working example can be seen https://codesandbox.io/s/billowing-cache-042j1?file=/src/App.js
Thanks in advance.

Answer 1

Set the disableScrollLock prop to true. This prop is from the Material UI Modal component but it is also made available for the Menu component.
<Menu
...others
disableScrollLock={true}
>
</Menu>

Answer 2

You should use Popper instead of Menu. You should also create ref and use it for IconButton or Button.
import React from 'react'
import ClickAwayListener from '#material-ui/core/ClickAwayListener'
import Grow from '#material-ui/core/Grow'
import Paper from '#material-ui/core/Paper'
import Popper from '#material-ui/core/Popper'
import MenuItem from '#material-ui/core/MenuItem'
import MenuList from '#material-ui/core/MenuList'
import IconButton from '#material-ui/core/IconButton'
import MoreVertIcon from '#material-ui/icons/MoreVert'
import SendIcon from '#material-ui/icons/Send'
import ListItemIcon from '#material-ui/core/ListItemIcon'
import ListItemText from '#material-ui/core/ListItemText'
export default function DropDownMenu(props) {
const [open, setOpen] = React.useState(false)
const anchorRef = React.useRef(null)
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen)
}
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return
}
setOpen(false)
}
function handleListKeyDown(event) {
if (event.key === 'Tab') {
event.preventDefault()
setOpen(false)
}
}
const handleClick = () => {
// handle menu click here
setOpen(false)
}
return (
<div>
<IconButton
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
size="small"
>
<MoreVertIcon fontSize="small" />
</IconButton>
<Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleClick}>
<ListItemIcon>
<SendIcon fontSize="small"/>
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
<MenuItem onClick={handleClick}>
<ListItemIcon>
<SendIcon fontSize="small"/>
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
)
}
There is also an example code of it at Material UI Menus Documentation.