reactjs - How to disable autofocus of multiple material-ui popover windows?
问题描述
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!
解决方案
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.
推荐阅读
- ios - Xcode 12.4 调试器不在调试区域显示局部变量
- python - 我的 Discord 机器人在连接到语音通道后 2 分钟后断开连接并下线?我需要将我的机器人昵称更改为当前日期
- ruby-on-rails - S3 预签名 URL 过期太早
- firebase - 在 null 上调用了 getter 'path'
- python - Python - 硒 xpath
- azure-files - 如何使用“访问者”信息显示打开的文件
- flutter - Flutter Webwiw Cookie
- java - 如何在文本框下方显示地点建议?
- unity3d - 我如何制作它以便玩家可以扫射?(Unity 3D)
- javascript - 如何更新参数或如何在屏幕退出时清除参数。在本机反应