[Popover] Reposition when rerender

• 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 😃.

[smsteel]

How to use this?