Material-ui: [Popover] location inconsistent, often off-screen

[dangerismycat]

I'm having problems using a Popover with a couple of header buttons that are positioned close to the right side of the window. Though using these anchor/targetOrigins:

anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}

targetOrigin={{horizontal: 'right', vertical: 'top'}}

I often get this result for the first click on a button:

On repeated clicks, the popover continues to change position (and sometimes size), eventually coming completely onscreen. After 5-6 position changes, it settles into the correct position:

Anyone else seeing behavior like this? Any solutions?

Other relevant code (this is all within the same file, the second block within the render method):

showLoginPopover(key, e) {
    this.setState({
      activePopover: key,
      anchorEl: e.currentTarget,
      loginOrSignup: 'login'
    });
  }

  showSignupPopover(key, e) {
    this.setState({
      activePopover: key,
      anchorEl: e.currentTarget,
      loginOrSignup: 'signup'
    });
  }

  closePopover(key) {
    if (this.state.activePopover !== key) {
      return;
    }
    this.setState({
      activePopover:'none',
    });
  }

            {!this.props.loggedIn &&
              <FlatButton style={{float: 'right', marginRight: '30px'}}
                          label='Login'
                          onClick={this.showLoginPopover.bind(this, 'pop')} />}
            {!this.props.loggedIn &&
              <FlatButton style={{float: 'right', marginRight: '10px'}}
                          label='Signup'
                          onClick={this.showSignupPopover.bind(this, 'pop')} />}
          </div>

          <Popover className='signup-popover'
                   open={this.state.activePopover === 'pop'}
                   anchorEl={this.state.anchorEl}
                   anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
                   targetOrigin={{horizontal: 'right', vertical: 'top'}}
                   onRequestClose={this.closePopover.bind(this, 'pop')} >
            <div style={{padding: 20}}>
              <TextField hintText='Username' ref='username' />
              <TextField hintText='Password' type='password'  ref='password' />
              <FlatButton label='Submit'
                          onClick={this.state.loginOrSignup === 'login' ?
                            e => this.handleLogin(e) :
                            e => this.handleSignup(e)} />
              {this.state.failedAttempted ? <p style={{color: 'red'}}> Incorrect username or password</p> : ''}
            </div>
        </Popover>

[chrismcv]

can you try canAutoPosition=false on the Popover to see if that helps?

[dangerismycat]

Unfortunately no. It's as if the target horizontal starts at 'left', and moves to 'middle' and finally 'right' with subsequent clicks. The vertical property is correct, and the anchor properties are correct as well. The target horizontal property seems confused.

[TrySpace]

Right now I have the issue that I can't position it, other than giving it a invalid achorOrigin and targetOrigin (horizontal: 'middle') will put it top right on the screen instead of topleft.
And then when I scroll down one "tick"(depends on browser/mouse settings probably), it will move exactly 100px to the left for each tick, and will end up at the left side.
100px is probably the exact amount of pixels scrolled, and since middle belongs to vertical and not `horizontal (see: https://github.com/callemall/material-ui/issues/2550) this actually makes sense.

But can someone explain to me how to position this Popover because the documentation does not even talk about anchorEl other than having it in the code (https://github.com/callemall/material-ui/issues/2549) I've tried with e.currentTarget through a click or giving it a .ref as anchorEl but it won't let go of my topleft screen. I also see the style object in html giving only 0px for each axis.

[TrySpace]

I tried it from a different element, and now only the x axis (left) works, but the top doesn't even get a value:

Here I assigned the GO button as the anchorEl by using e.currentTarget.

So it aligns nicely horizontally, but not vertically. I first thought this might have something to do with css styling and fixed postions, but since the top value is non-existant in this case, it must be the code.

[ryanfields]

I'm having a problem where anchorEl just seems to be ignored. The popover always acts like its anchorEl is set to the parent of whatever anchorEl I've given it.

[mbrookes]

Closing due to lack of recent reports. Feel free to reopen if this issue still occurs.

[GregTheGreek]

I sort of have this issue when placing multiple elements into the popover, where it's not reponsive to CSS . bear in mind I'm new to react and my css skills aren't pro by any means.

My code:

         <Popover
           className="search-time-start"
           open={this.state.openTimeStart}
           anchorEl={this.state.anchorEl}
           anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
           targetOrigin={{horizontal: 'left', vertical: 'top'}}
           onRequestClose={this.handleRequestClose}
           canAutoPosition={false}
           >
           <div className="time-drop-container">
             <DropDownMenu
               className="search-time-start search-start-hour"
               maxHeight={300}
               value={this.state.valueHourStart}
               onChange={this.handleChangeTime.bind(this,"valueHourStart")}
               >
              {hoursStart}
              </DropDownMenu>
              <DropDownMenu
                 className="search-time-start search-start-minute"
                 maxHeight={300}
                 value={this.state.valueMinuteStart}
                 onChange={this.handleChangeTime.bind(this,"valueMinuteStart")}
                 >
                 <MenuItem value="00" key="00" primaryText="00" />
                 <MenuItem value="15" key="15" primaryText="15" />
                 <MenuItem value="30" key="30" primaryText="30" />
                 <MenuItem value="45" key="45" primaryText="45" />
              </DropDownMenu>
              <DropDownMenu
                 className="search-time-start search-start-minute"
                 maxHeight={300}
                 value={this.state.valuePMAM}
                 onChange={this.handleChangeTime.bind(this,"valuePMAM")}
                 >
                <MenuItem value={"am"} key={"amStart"} primaryText={"AM"} />
                <MenuItem value={"pm"} key={"pmStart"} primaryText={"PM"} />
            </DropDownMenu>
          </div>
         </Popover>