[Popover] Allowing access to method for recalculating position

[gregnb]

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

Expected Behavior

That the Popover content will adjust to the dynamically loaded/delayed content

Current Behavior

The popover initially loads. You see a tiny little div because the data has not yet loaded in. Once it does come in, half of the div is now off screen.

Steps to Reproduce (for bugs)

1. Create a simple component that has a delayed render like so

class DelayedComponent extends React.Component {

  state = {
    isSet: false
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        isSet: true
      });
    }, 1000);

  }

  render() {
    if (!this.state.isSet)
      return <div></div>
    else
      return (
        <div>
          this is some really long text to test the Popover component with
          <FormControl component="fieldset">
              <FormLabel component="legend">anchorReference</FormLabel>
              <RadioGroup
                row
                aria-label="anchorReference"
                name="anchorReference"
                value={this.state.anchorReference}
              >
                <FormControlLabel value="anchorEl" control={<Radio />} label="anchorEl" />
                <FormControlLabel
                  value="anchorPosition"
                  control={<Radio />}
                  label="anchorPosition"
                />
              </RadioGroup>
            </FormControl>
        </div>
      );
  }
}

And use the Popover like so:

render() {
...
        <Popover
          open={open}
          anchorEl={anchorEl}
          anchorReference={anchorReference}
          anchorPosition={{ top: positionTop, left: positionLeft }}
          onClose={this.handleClose}
          anchorOrigin={{
            vertical: anchorOriginVertical,
            horizontal: anchorOriginHorizontal,
          }}
          transformOrigin={{
            vertical: transformOriginVertical,
            horizontal: transformOriginHorizontal,
          }}
        >
          <DelayedComponent />
        </Popover>
...
}

2. Position a button to trigger the Popover flush right
3. Open the popover

Context

When using Popover with content that could load in delayed I would hope the Popover could adjust for the change or a method could be provided. If there were access to the positioning method used inside Popover then it would allow for updating of delayed content. From what I see that would be setPositioningStyles() inside of Popover.

With that access provided I can then fire off that setPositioningStyles from outside the Popover and give it the proper positioning. If this were approved I would not mind taking on the work.

Thanks

Your Environment

Tech	Version
Material-UI	1.0.0-beta.23
React	16
browser	Chrome
etc