#javascript #reactjs #material-ui #frontend
#javascript #reactjs #материал-пользовательский интерфейс #интерфейс
Вопрос:
Я использую @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>
);
}
Ответ №1:
Установите disableRestoreFocus=true
в свой компонент меню. Это предотвратит восстановление фокуса ранее сфокусированного элемента после скрытия меню / модального.
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
disableRestoreFocus={true}
>
...
</Menu>
Этот реквизит задокументирован на модальном, но работает и для Menu
, потому что меню построено поверх модального.
Комментарии:
1. Спасибо. Я не нашел этого решения. Документация не нашла его при поиске ‘focus’.
Ответ №2:
Использовать disableAutoFocus
на Menu
компоненте
Комментарии:
1. Хотя этот код может решить проблему, включая объяснение того, как и почему это решает проблему, действительно помогло бы улучшить качество вашего сообщения и, вероятно, привело бы к большему количеству голосов. Помните, что вы отвечаете на вопрос для читателей в будущем, а не только для человека, задающего сейчас. Пожалуйста, отредактируйте свой ответ, чтобы добавить пояснения и указать, какие ограничения и предположения применяются.
2. не могли бы вы объяснить, почему?