title: How to disable autofocus of multiple material-ui popover windows?
body: <p>These two popover windows open on page load, not triggered by button click, etc.
  now user cannot click elsewhere before they close the two popover windows in strict  order, which is not expected, user should be able to click anywhere on page, and close order doesn't matter
  have tried autoFocus={false} attribute, doesn't work.</p>
  
  <p>Here is the <a href="https://codesandbox.io/s/3rvkp9ox46" rel="nofollow noreferrer">code example</a>:</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Card from "@material-ui/core/Card";
  import CardContent from "@material-ui/core/CardContent";
  import Grid from "@material-ui/core/Grid";
  import Typography from "@material-ui/core/Typography";
  import SimplePopover from "./SimplePopover";
  import "./styles.css";
  
  class MyPopover extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        aCard: {},
        bCard: {}
      };
  
      this.aRef = React.createRef();
      this.bRef = React.createRef();
    }
    componentDidMount() {
      this.setState({ aCard: this.aRef.current, bCard: this.bRef.current });
    }
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
          &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
          &lt;Grid container spacing={24}&gt;
            &lt;Grid item xs={12} md={6}&gt;
              &lt;Typography
                autoFocus={true}
                style={{ fontSize: 16, fontFamily: "Museo Sans" }}
                color="textSecondary"
                gutterBottom
              &gt;
                This is C
              &lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12} md={3}&gt;
              &lt;div ref={this.aRef}&gt;
                &lt;Card id="id_a_card"&gt;
                  &lt;CardContent&gt;
                    &lt;Typography
                      autoFocus={true}
                      style={{ fontSize: 16, fontFamily: "Museo Sans" }}
                      color="textSecondary"
                      gutterBottom
                    &gt;
                      This is A
                    &lt;/Typography&gt;
                  &lt;/CardContent&gt;
                &lt;/Card&gt;
              &lt;/div&gt;
              &lt;SimplePopover
                popoverId={"first"}
                anchor={this.state.aCard}
                className=""
                data={{}}
              /&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12} md={3}&gt;
              &lt;div ref={this.bRef}&gt;
                &lt;Card id="id_b_card"&gt;
                  &lt;CardContent&gt;
                    &lt;Typography
                      autoFocus={true}
                      style={{ fontSize: 16, fontFamily: "Museo Sans" }}
                      color="textSecondary"
                      gutterBottom
                    &gt;
                      This is B
                    &lt;/Typography&gt;
                  &lt;/CardContent&gt;
                &lt;/Card&gt;
              &lt;/div&gt;
              &lt;SimplePopover
                popoverId={"second"}
                anchor={this.state.bCard}
                className=""
                data={{}}
              /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;MyPopover /&gt;, rootElement);
  </code></pre>
  
  <p>User cannot click elsewhere before closing box A then B, how to fix this? Thanks a lot!</p>