如何禁用多个 material-ui 弹出窗口 windows 的自动对焦？

Question

这两个弹出窗口 windows 在页面加载时打开，而不是通过单击按钮等触发。现在用户不能在按严格顺序关闭两个弹出窗口 windows 之前单击其他地方，这不是预期的，用户应该能够单击页面上的任何位置，并且关闭顺序无关紧要试过 autoFocus={false} 属性，没用。

这里是 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);

用户在关闭框 A 然后 B 之前无法点击其他地方，如何解决这个问题？非常感谢！

Answer 1

来自文档：

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.

因此 Popover 的行为类似于模态对话框。因此，如果您打开一个然后另一个，就像从第一个打开第二个模态对话框，这就是为什么您需要以适当的顺序关闭它们。如果你不想要这种行为，你应该使用 Popper 来代替。

如何禁用多个 material-ui 弹出窗口 windows 的自动对焦？

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

reactjs

material-ui

popover