[英]Prevent restoring of focus when closing popup menu opened on mouse over
我正在使用@material-ui进行反应。 我有以下问题:
我有一个输入组件和一个弹出菜单,鼠标悬停时会打开。 当菜单打开时,输入组件失去焦点。 当菜单关闭时,焦点将恢复到输入组件。
我需要防止将焦点恢复到输入元素。
我怎样才能实现这种行为?
import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Input from "@material-ui/core/Input";
import { FormControl } from "@material-ui/core";
export default function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const inputRef = React.useRef();
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleCloseAndRemoveFocus = () => {
console.log(inputRef.current);
if (inputRef.current) inputRef.current.blur();
setAnchorEl(null);
};
return (
<div>
<FormControl>
<Input autoFocus inputRef={inputRef} />
<Button onMouseDown={handleCloseAndRemoveFocus}>Clear focus</Button>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onMouseOver={handleClick}
>
Hover to open
</Button>
</FormControl>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Return to focused</MenuItem>
<MenuItem onClick={handleCloseAndRemoveFocus}>Clear focus</MenuItem>
</Menu>
</div>
);
}
在您的菜单组件上设置disableRestoreFocus=true
。 一旦菜单/模式被隐藏,这将阻止先前聚焦的元素恢复其焦点。
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
disableRestoreFocus={true}
>
...
</Menu>
这个道具记录在Modal 上,但也适用于Menu
,这是因为 Menu 建立在 Modal 之上。
在Menu
组件上使用disableAutoFocus
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.