Wrong positioning of React Material UI Popover while creating a component

Question

I am working on creating separate components for every utilities provided by Material UI using Redux framework.

I got stuck in creating Popover component.

The problem is that when I call the Popover Container, It flies from top-left corner of the screen. However when creating that same popover using plain react framework. Everything is working fine.

Snippet of code: Popover.js

class PopoverTip extends Component {

    constructor(props) {
        super(props);
    }

  handleRequestClose = () => {
    this.props.togglePopover();
  };

  render() {
    const { isOpen, anchorEl } = this.props;
    return (
      < div>
        {isOpen && < Popover
          open={isOpen}
          anchorEl={anchorEl}
          anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
          targetOrigin={{horizontal: 'left', vertical: 'top'}}
          animation={PopoverAnimationVertical}
          onRequestClose={this.handleRequestClose}>
          < Menu>
            < MenuItem primaryText="Refresh" />
            < MenuItem primaryText="Help &amp; feedback" />
            < MenuItem primaryText="Settings" />
            < MenuItem primaryText="Sign out" />
          </ Menu>
        </ Popover>}
      </ div>
    );
  }
}

export default PopoverTip;

ExampleComponent.js - from where I am calling the popover element and showing the popover

showPopover(event) {
    event.preventDefault();
    this.props.togglePopover(event.currentTarget);
};

<IconButton onClick={ this.showPopover.bind(this) }>
  <HelpIco />
</IconButton>
<PopoverTip />

Please note that Popover functionality is working fine and I am also passing that event.currentTarget which is actually the current element.

The only issue I am facing is placement of that popover.

Solution 1

This is a bit late, but I just fixed this issue in my own project.

Because of a typo, I was passing undefined to the anchorEl prop of my <Popover> component. Without a valid anchor, the Popover defaults to the top-left of the viewport, I believe.

Solution 2

This happened to me when I made the popover component stateless, then imported it into my parent container. I forgot to pass anchorEl as a prop and ended up with a menu on top left. It seems the menu will do that by default if there is an error in popover.