How to disable autofocus of multiple material-ui popover windows?

Question

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.

Here is the code example:

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 (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Grid container spacing={24}>
          <Grid item xs={12} md={6}>
            <Typography
              autoFocus={true}
              style={{ fontSize: 16, fontFamily: "Museo Sans" }}
              color="textSecondary"
              gutterBottom
            >
              This is C
            </Typography>
          </Grid>
          <Grid item xs={12} md={3}>
            <div ref={this.aRef}>
              <Card id="id_a_card">
                <CardContent>
                  <Typography
                    autoFocus={true}
                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}
                    color="textSecondary"
                    gutterBottom
                  >
                    This is A
                  </Typography>
                </CardContent>
              </Card>
            </div>
            <SimplePopover
              popoverId={"first"}
              anchor={this.state.aCard}
              className=""
              data={{}}
            />
          </Grid>
          <Grid item xs={12} md={3}>
            <div ref={this.bRef}>
              <Card id="id_b_card">
                <CardContent>
                  <Typography
                    autoFocus={true}
                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}
                    color="textSecondary"
                    gutterBottom
                  >
                    This is B
                  </Typography>
                </CardContent>
              </Card>
            </div>
            <SimplePopover
              popoverId={"second"}
              anchor={this.state.bCard}
              className=""
              data={{}}
            />
          </Grid>
        </Grid>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MyPopover />, rootElement);

User cannot click elsewhere before closing box A then B, how to fix this? Thanks a lot!

Answer 1

From the docs:

Things to know when using the Popover component:

• The component is built on top of the Modal component.
• The scroll and click away are blocked unlike with the Popper component.

So Popover behaves like a modal dialog. So if you open one and then another, it is like opening a second modal dialog from the first and that is why you need to close them in the appropriate order. If you don't want this behavior, you should be using Popper instead.