Prevent restoring of focus when closing popup menu opened on mouse over

Viewed 2045

I am using @material-ui with react. I've got the following problem:

I have an input component and a popup menu, that opens on mouse over. When the menu opens, the input component loses focus. When the menu closes, focus is restored to the input component.

I need to prevent the restoration of the focus to the input element.

How can I achieve this behaviour?

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>
  );
}

Demo

1 Answers

Set disableRestoreFocus=true on your Menu component. This will prevent the previously focused element to restore its focus once the menu/modal is hidden.

<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
  disableRestoreFocus={true}
>
  ...
</Menu>

This prop is documented on Modal but works for Menu too, this is because Menu is built on top of Modal.

Edit reverent-goldstine-uyqvz

Related