menu popover adds padding-right to the body

[nabium]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

This may be same as #10000 but since it is closed I'm opening a new issue.

Current Behavior 😯

When IconButton wrapped with Tooltip is used to open Menu, it adds 17px padding-right to the body tag.

Expected Behavior 🤔

I expect that unneccesary padding-right will not be inserted.
When I use IconButton without Tooltip wrapped around, it behaves as expected.

Steps to Reproduce 🕹

import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';
import ThumbDownIcon from '@material-ui/icons/ThumbDown';
import Tooltip from '@material-ui/core/Tooltip';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';


function App() {
  const [menuAnchor, setMenuAnchor] = React.useState(null);
  function openMenu(event) {
    setMenuAnchor(event.currentTarget);
  }
  function closeMenu() {
    setMenuAnchor(null);
  }

  return (
    <div style={{border: 'solid 5px', boxSizing: 'border-box', height: '100vh'}}>
      <IconButton onClick={openMenu}>
        <ThumbUpIcon />
      </IconButton>
      <Tooltip title="with tooltip">
        <IconButton onClick={openMenu}>
          <ThumbDownIcon />
        </IconButton>
      </Tooltip>
      <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={closeMenu}>
        <MenuItem onClick={closeMenu}>menu item</MenuItem>
      </Menu>
    </div>
  );
}

export default App;

Steps:

1. Replace above code with create-react-app's src/App.js, add @material-ui/core and @material-ui/icons and run
2. Click ThumbUpIcon and the Menu is shown as expected
3. Click ThumbDownIcon and the Menu is shown with additional padding

Context 🔦

Layout is corrupted when menu is popped.

Your Environment 🌎

Tech	Version
Material-UI	v4.7.1
React	16.12.0
Browser	chrome r78, firefox r70

[oliviertassinari]

Duplicate of #17353. For the layout shift, it should be noticeable.

[Geocodlea]

I found that adding event.stopPropagation(); to the Menu open and close functions and disableScrollLock={true} inside the Menu component stops adding padding-right to the body:

  const [anchorEl, setAnchorEl] = React.useState(null);
  const openMenu = Boolean(anchorEl);
  const handleOpenMenu = (event) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };
  const handleCloseMenu = (event) => {
    event.stopPropagation();
    setAnchorEl(null);
  };

[wanderingfella]

@Geocodlea That's perfect timing for me, thank you!

[MarDan02]

I found that adding event.stopPropagation(); to the Menu open and close functions and disableScrollLock={true} inside the Menu component stops adding padding-right to the body:

  const [anchorEl, setAnchorEl] = React.useState(null);
  const openMenu = Boolean(anchorEl);
  const handleOpenMenu = (event) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };
  const handleCloseMenu = (event) => {
    event.stopPropagation();
    setAnchorEl(null);
  };

THANK YOU

[waxmar]

For me stopPropagation() was not necessary and only disableScrollLock did the trick

[stevemk42]

For me stopPropagation() was not necessary and only disableScrollLock did the trick

Could you post some code about how you did that, please ? Im having the same problem, your solution seems shorter.
Thanks ahead

[jinkwon]

@waxmar Thanks, it works for me. :)

[stevemk42]

@waxmar Thanks, it works for me. :)

Could you post some code about how you did that, please ? Thanks ahead

[stevemk42]

Found it. Fixed it for me too. Thanks