[Select][material] Fix select menu moving on scroll when disableScrollLock is true

docs/pages/material-ui/api/popover.json

@@ -23,6 +23,8 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
+    "disableMarginThreshold": { "type": { "name": "bool" }, "default": "false" },
+    "disableScrollLock": { "type": { "name": "bool" }, "default": "false" },
     "elevation": { "type": { "name": "custom", "description": "integer" }, "default": "8" },
     "marginThreshold": { "type": { "name": "number" }, "default": "16" },
     "onClose": { "type": { "name": "func" } },

docs/translations/api-docs/popover/popover.json

@@ -21,6 +21,10 @@
     "container": {
       "description": "An HTML element, component instance, or function that returns either. The <code>container</code> will passed to the Modal component.<br>By default, it uses the body of the anchorEl&#39;s top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
+    "disableMarginThreshold": {
+      "description": "Disables the margin threshold so that when scrolled the popover stays in the correct position By default, false for backward compatibility."
+    },
+    "disableScrollLock": { "description": "Disable the scroll lock behavior." },
     "elevation": { "description": "The elevation of the popover." },
     "marginThreshold": {
       "description": "Specifies how close to the edge of the window the popover can appear."

packages/mui-material/src/Popover/Popover.d.ts

@@ -84,6 +84,13 @@ export interface PopoverProps
    * so it's simply `document.body` most of the time.
    */
   container?: ModalProps['container'];
+  /**
+   * Disables the margin threshold so that when scrolled the popover stays in the correct position
+   * By default, false for backward compatibility.
+   *
+   * @default false
+   */
+  disableMarginThreshold?: boolean;
   /**
    * The elevation of the popover.
    * @default 8

packages/mui-material/src/Popover/Popover.js

@@ -125,6 +125,8 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     TransitionComponent = Grow,
     transitionDuration: transitionDurationProp = 'auto',
     TransitionProps: { onEntering, ...TransitionProps } = {},
+    disableMarginThreshold = false,
+    disableScrollLock = false,
     ...other
   } = props;
 
@@ -244,13 +246,17 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
       const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
       // Check if the vertical axis needs shifting
-      if (top < marginThreshold) {
+      if (!disableMarginThreshold && top < marginThreshold) {
         const diff = top - marginThreshold;
+
         top -= diff;
+
         elemTransformOrigin.vertical += diff;
-      } else if (bottom > heightThreshold) {
+      } else if (!disableMarginThreshold && bottom > heightThreshold) {
         const diff = bottom - heightThreshold;
+
         top -= diff;
+
         elemTransformOrigin.vertical += diff;
       }
 
@@ -269,7 +275,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
       }
 
       // Check if the horizontal axis needs shifting
-      if (left < marginThreshold) {
+      if (!disableMarginThreshold && left < marginThreshold) {
         const diff = left - marginThreshold;
         left -= diff;
         elemTransformOrigin.horizontal += diff;
@@ -285,7 +291,14 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
         transformOrigin: getTransformOriginValue(elemTransformOrigin),
       };
     },
-    [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold],
+    [
+      anchorEl,
+      anchorReference,
+      disableMarginThreshold,
+      getAnchorOffset,
+      getTransformOrigin,
+      marginThreshold,
+    ],
   );
 
   const [isPositioned, setIsPositioned] = React.useState(open);
@@ -309,6 +322,13 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     setIsPositioned(true);
   }, [getPositioningStyle]);
 
+  React.useEffect(() => {
+    if (disableScrollLock) {
+      window.addEventListener('scroll', setPositioningStyles);
+    }
+    return () => window.removeEventListener('scroll', setPositioningStyles);
+  }, [anchorEl, disableScrollLock, setPositioningStyles]);
+
   const handleEntering = (element, isAppearing) => {
     if (onEntering) {
       onEntering(element, isAppearing);
@@ -403,7 +423,10 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
   });
 
   return (
-    <RootSlot {...rootProps} {...(!isHostComponent(RootSlot) && { slotProps: rootSlotPropsProp })}>
+    <RootSlot
+      {...rootProps}
+      {...(!isHostComponent(RootSlot) && { slotProps: rootSlotPropsProp, disableScrollLock })}
+    >
       <TransitionComponent
         appear
         in={open}
@@ -525,6 +548,18 @@ Popover.propTypes /* remove-proptypes */ = {
     HTMLElementType,
     PropTypes.func,
   ]),
+  /**
+   * Disables the margin threshold so that when scrolled the popover stays in the correct position
+   * By default, false for backward compatibility.
+   *
+   * @default false
+   */
+  disableMarginThreshold: PropTypes.bool,
+  /**
+   * Disable the scroll lock behavior.
+   * @default false
+   */
+  disableScrollLock: PropTypes.bool,
   /**
    * The elevation of the popover.
    * @default 8

packages/mui-material/src/Popover/Popover.test.js

@@ -844,9 +844,12 @@ describe('<Popover />', () => {
     });
   });
 
-  [0, 18, 16].forEach((marginThreshold) => {
-    describe(`positioning when \`marginThreshold=${marginThreshold}\``, () => {
-      function getElementStyleOfOpenPopover(anchorEl = document.createElement('svg')) {
+  describe('marginThreshold', () => {
+    [0, 18, 16].forEach((marginThreshold) => {
+      function getElementStyleOfOpenPopover(
+        anchorEl = document.createElement('svg'),
+        disableMarginThreshold = false,
+      ) {
         let style;
         render(
           <Popover
@@ -858,105 +861,125 @@ describe('<Popover />', () => {
               },
             }}
             marginThreshold={marginThreshold}
-            PaperProps={{ component: FakePaper }}
+            slotProps={{ paper: { component: FakePaper } }}
+            disableMarginThreshold={disableMarginThreshold}
           >
             <div />
           </Popover>,
         );
         return style;
       }
 
-      specify('when no movement is needed', () => {
-        const negative = marginThreshold === 0 ? '' : '-';
-        const positioningStyle = getElementStyleOfOpenPopover();
+      describe(`positioning when \`marginThreshold=${marginThreshold}\``, () => {
+        specify('when no movement is needed', () => {
+          const negative = marginThreshold === 0 ? '' : '-';
+          const positioningStyle = getElementStyleOfOpenPopover();
 
-        expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
-        expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
-        expect(positioningStyle.transformOrigin).to.match(
-          new RegExp(`${negative}${marginThreshold}px ${negative}${marginThreshold}px( 0px)?`),
-        );
-      });
-
-      specify('top < marginThreshold', () => {
-        const mockedAnchor = document.createElement('div');
-        stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
-          left: marginThreshold,
-          top: marginThreshold - 1,
-        }));
-        const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);
-
-        expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
-        expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
-        expect(positioningStyle.transformOrigin).to.match(/0px -1px( 0ms)?/);
-      });
-
-      describe('bottom > heightThreshold', () => {
-        let windowInnerHeight;
-
-        before(() => {
-          windowInnerHeight = window.innerHeight;
-          window.innerHeight = marginThreshold * 2;
-        });
-
-        after(() => {
-          window.innerHeight = windowInnerHeight;
+          expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
+          expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
+          expect(positioningStyle.transformOrigin).to.match(
+            new RegExp(`${negative}${marginThreshold}px ${negative}${marginThreshold}px( 0px)?`),
+          );
         });
 
-        specify('test', () => {
+        specify('top < marginThreshold', () => {
           const mockedAnchor = document.createElement('div');
           stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
             left: marginThreshold,
-            top: marginThreshold + 1,
+            top: marginThreshold - 1,
           }));
-
           const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);
 
           expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
           expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
-          expect(positioningStyle.transformOrigin).to.match(/0px 1px( 0px)?/);
+          expect(positioningStyle.transformOrigin).to.match(/0px -1px( 0ms)?/);
         });
-      });
-
-      specify('left < marginThreshold', () => {
-        const mockedAnchor = document.createElement('div');
-        stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
-          left: marginThreshold - 1,
-          top: marginThreshold,
-        }));
 
-        const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);
+        describe('bottom > heightThreshold', () => {
+          let windowInnerHeight;
 
-        expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
+          before(() => {
+            windowInnerHeight = window.innerHeight;
+            window.innerHeight = marginThreshold * 2;
+          });
 
-        expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
+          after(() => {
+            window.innerHeight = windowInnerHeight;
+          });
 
-        expect(positioningStyle.transformOrigin).to.match(/-1px 0px( 0px)?/);
-      });
-
-      describe('right > widthThreshold', () => {
-        let innerWidthContainer;
+          specify('test', () => {
+            const mockedAnchor = document.createElement('div');
+            stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
+              left: marginThreshold,
+              top: marginThreshold + 1,
+            }));
 
-        before(() => {
-          innerWidthContainer = window.innerWidth;
-          window.innerWidth = marginThreshold * 2;
-        });
+            const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);
 
-        after(() => {
-          window.innerWidth = innerWidthContainer;
+            expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
+            expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
+            expect(positioningStyle.transformOrigin).to.match(/0px 1px( 0px)?/);
+          });
         });
 
-        specify('test', () => {
+        specify('left < marginThreshold', () => {
           const mockedAnchor = document.createElement('div');
           stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
-            left: marginThreshold + 1,
+            left: marginThreshold - 1,
             top: marginThreshold,
           }));
 
           const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);
 
           expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
+
           expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
-          expect(positioningStyle.transformOrigin).to.match(/1px 0px( 0px)?/);
+
+          expect(positioningStyle.transformOrigin).to.match(/-1px 0px( 0px)?/);
+        });
+
+        describe('right > widthThreshold', () => {
+          let innerWidthContainer;
+
+          before(() => {
+            innerWidthContainer = window.innerWidth;
+            window.innerWidth = marginThreshold * 2;
+          });
+
+          after(() => {
+            window.innerWidth = innerWidthContainer;
+          });
+
+          specify('test', () => {
+            const mockedAnchor = document.createElement('div');
+            stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
+              left: marginThreshold + 1,
+              top: marginThreshold,
+            }));
+
+            const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);
+
+            expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
+            expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
+            expect(positioningStyle.transformOrigin).to.match(/1px 0px( 0px)?/);
+          });
+        });
+      });
+
+      describe('disableMarginThreshold', () => {
+        it('should not apply the marginThreshold when disableMarginThreshold is true', () => {
+          const lessThanThreshold = marginThreshold - 1;
+          const mockedAnchor = document.createElement('div');
+          stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
+            top: lessThanThreshold,
+            left: lessThanThreshold,
+          }));
+
+          const style = getElementStyleOfOpenPopover(mockedAnchor, true);
+
+          expect(style.top).to.equal(`${lessThanThreshold}px`);
+          expect(style.left).to.equal(`${lessThanThreshold}px`);
+          expect(style.transformOrigin).to.match(/0px 0px( 0px)?/);
         });
       });
     });