title: Wrong positioning of React Material UI Popover while creating a component
body: <p>I am working on creating separate components for every utilities provided by <a href="http://www.material-ui.com" rel="noreferrer">Material UI</a> using Redux framework.</p>
  
  <p>I got stuck in creating <a href="http://www.material-ui.com/#/components/popover" rel="noreferrer">Popover</a> component.</p>
  
  <p>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.</p>
  
  <p>Snippet of code: Popover.js</p>
  
  <p><pre><code></p>
  
  <pre><code>class PopoverTip extends Component {
  
      constructor(props) {
          super(props);
      }
  
    handleRequestClose = () =&gt; {
      this.props.togglePopover();
    };
  
    render() {
      const { isOpen, anchorEl } = this.props;
      return (
        &lt; div&gt;
          {isOpen &amp;&amp; &lt; Popover
            open={isOpen}
            anchorEl={anchorEl}
            anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
            targetOrigin={{horizontal: 'left', vertical: 'top'}}
            animation={PopoverAnimationVertical}
            onRequestClose={this.handleRequestClose}&gt;
            &lt; Menu&gt;
              &lt; MenuItem primaryText="Refresh" /&gt;
              &lt; MenuItem primaryText="Help &amp;amp; feedback" /&gt;
              &lt; MenuItem primaryText="Settings" /&gt;
              &lt; MenuItem primaryText="Sign out" /&gt;
            &lt;/ Menu&gt;
          &lt;/ Popover&gt;}
        &lt;/ div&gt;
      );
    }
  }
  
  export default PopoverTip;
  </code></pre>
  
  <p></pre></code></p>
  
  <p>ExampleComponent.js - from where I am calling the popover element and showing the popover</p>
  
  <p><pre><code></p>
  
  <pre><code>showPopover(event) {
      event.preventDefault();
      this.props.togglePopover(event.currentTarget);
  };
  
  &lt;IconButton onClick={ this.showPopover.bind(this) }&gt;
    &lt;HelpIco /&gt;
  &lt;/IconButton&gt;
  &lt;PopoverTip /&gt;
  </code></pre>
  
  <p></pre></code></p>
  
  <p>Please note that Popover functionality is working fine and I am also passing that event.currentTarget which is actually the current element.</p>
  
  <p>The only issue I am facing is placement of that popover.</p>