Material UI - Menu Component locks body scrollbar

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.

Concernment

Answer 1

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.

Wards

Thanks @Wards for your quick and correct answer. Your answer worked for me completely with single minor bug. IconButton imported twice in your code. If you fix that I will mark your answer as a correct one. Additionally I could customize menu position using placement props. – Concernment

Answer 2

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>

Mauro

Answer 3

Following up with answer from Tammibriggs, you could also make this default if you're using mui theme overrides

export default function Menu(theme) {
  return {
    MuiMenu: {
      defaultProps: {
        disableScrollLock: true,
      },
      // additional style overrides
      styleOverrides: {
        paper: {
          color: "#000000",
        },
      },
    },
  };
}

Rodney