[Popover] Reposition when rerender

[KevinAsher]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

If the <Select> component is opened, and we are loading its items dynamically, it's expected that when the items are finally loaded the <Select>'s opened overlay adjusts itself to the current available space.

Current Behavior

The <Select>'s overlay overflows.

Steps to Reproduce (for bugs)

In the sandbox, click on the <Select> and wait for it to load.

https://codesandbox.io/s/vqvm1704q3

Your Environment

Tech	Version
Material-UI	1.0.0-beta.35
React	16.2.0
browser	Google Chrome 64.0.3282.186

[oliviertassinari]

@KevinAsher We have added an action prop to the Popover component since to solve the problem. You can trigger the .updatePosition() method when you need to update the position of the Popover (it was added in #9588)

For instance:

function MyPopover() {
  const [itemCount, setItemCount] = React.useState(0);
  const popoverActions = React.useRef();

  React.useEffect(() => {
    setTimeout(() => setItemCount(100), 1000);
  }, []);

  React.useEffect(() => {
    if (popoverActions.current) {
      popoverActions.current.updatePosition();
    }
  }, [itemCount]);

  const items = [];
  for (let i = 0; i < itemCount; i++) {
    items.push(<p key={i}>item</p>);
  }

  return <Popover action={popoverActions}>{items}</Popover>;
}

However, it might require too much boilerplate, a workaround is to trigger a window resize event (don't abuse it!):

window.dispatchEvent(new CustomEvent('resize'))

In the future, we should consider using the ResizeObserver API for out of the box support:

• https://caniuse.com/#feat=resizeobserver (not supported everywhere yet)
• https://github.com/que-etc/resize-observer-polyfill (bundle size overhead implication)

Alternatively, we can consider updating the position at each render. It could be a low hanging fruit :).

[oliviertassinari]

We should be able to apply a similar fix than #18310 (comment). I would propose something close to:

diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js
index 9f23c25e2..722ee83b6 100644
--- a/packages/material-ui/src/Popover/Popover.js
+++ b/packages/material-ui/src/Popover/Popover.js
@@ -335,32 +335,40 @@ const Popover = React.forwardRef(function Popover(props, ref) {
     paperRef.current = ReactDOM.findDOMNode(instance);
   }, []);

-  const updatePosition = React.useMemo(() => {
-    if (!open) {
-      return undefined;
-    }
-
-    return debounce(() => {
+  React.useEffect(() => {
+    if (open && paperRef.current) {
       setPositioningStyles(paperRef.current);
-    });
-  }, [open, setPositioningStyles]);
+    }
+  });

-  React.useImperativeHandle(action, () => (open ? { updatePosition } : null), [
-    open,
-    updatePosition,
-  ]);
+  React.useImperativeHandle(
+    action,
+    () =>
+      open
+        ? {
+            updatePosition: () => {
+              setPositioningStyles(paperRef.current);
+            },
+          }
+        : null,
+    [open, setPositioningStyles],
+  );

   React.useEffect(() => {
-    if (!updatePosition) {
+    if (!open) {
       return undefined;
     }

-    window.addEventListener('resize', updatePosition);
+    const handleResize = debounce(() => {
+      setPositioningStyles(paperRef.current);
+    });
+
+    window.addEventListener('resize', handleResize);
     return () => {
-      window.removeEventListener('resize', updatePosition);
-      updatePosition.clear();
+      handleResize.clear();
+      window.removeEventListener('resize', handleResize);
     };
-  }, [updatePosition]);
+  }, [open, setPositioningStyles]);

   let transitionDuration = transitionDurationProp;

Does somebody want to work on a pull request? :)

[SandraMarcelaHerreraArriaga]

Hello @oliviertassinari can I start to work on this issue? :)

[mbrookes]

@SandraMarcelaHerreraArriaga No permission needed. Thanks for working on it!