Material-ui: Scrollbar width padding misaligning pages caused by Menu + Tooltip

[archfz]

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

Current Behavior 😯

When using menu + menu items + tooltip: Opening the menu adds scrollbar width padding to the right side of the page and de-aligns all other elements.

Expected Behavior 🤔

No disalignement. No additional padding.

Steps to Reproduce 🕹

https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark
Note that the menu is duplicated only so that it can be seen better that items get shifted on open menu.

[mbrookes]

With MacOS you have to set "Show scroll bars" to "Always" in System Preferences / General in order to see this issue.

[LorenzHenk]

This problem seems to start appearing with version 4.7.0.

[LorenzHenk]

Forked the codesandbox: https://codesandbox.io/s/material-ui-issue-padding-menu-mwnze

Changes:

• use @material-ui/core version 4.7.0, the oldest one where this problem appears
• remove toolbar from the second button to better show the difference

[xhanix]

This solved the issue for me:

html {
overflow: hidden;
height: 100%;
}

body {
height: 100%;
overflow: auto;
}

[oliviertassinari]

You are right, the behavior has changed between v4.6.1 (OK) and v4.7.0 (KO). It's related to the changes in packages/material-ui/src/Tooltip/Tooltip.js. https://github.com/mui-org/material-ui/compare/v4.6.1...v4.7.0#diff-db872c13568b6f9d9dd4ea1f5e876cdb

What about this fix?

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 70829de9c..67f55a5f7 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -482,6 +482,19 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     }
   }

+  // Avoid the creation of a new Popper.js instance at each render.
+  const popperOptions = React.useMemo(
+    () => ({
+      modifiers: {
+        arrow: {
+          enabled: Boolean(arrowRef),
+          element: arrowRef,
+        },
+      },
+    }),
+    [arrowRef],
+  );
+
   return (
     <React.Fragment>
       {React.cloneElement(children, { ref: handleRef, ...childrenProps })}
@@ -495,14 +508,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
         open={childNode ? open : false}
         id={childrenProps['aria-describedby']}
         transition
-        popperOptions={{
-          modifiers: {
-            arrow: {
-              enabled: Boolean(arrowRef),
-              element: arrowRef,
-            },
-          },
-        }}
+        popperOptions={popperOptions}
         {...interactiveWrapperListeners}
         {...PopperProps}
       >

[netochaves]

Working on this.