Блог

Я использую @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>
  

Этот реквизит задокументирован на модальном, но работает и для Menu , потому что меню построено поверх модального.

Использовать disableAutoFocus на Menu компоненте