Material UI input loses focus when opening menu

user_12158627 0
Viewed 1161

I'm trying to do input field which opens up menu when it's focused. Menu opens up just fine but input field loses focus and all custom styling when menu is visible. Any ideas how to keep focus on input while menu is visible at same time?

Here is my handler:

const [anchorElSearch, setAnchorElSearch] = React.useState(null);

const handleClickSearch = (event) => {
  setAnchorElSearch(event.currentTarget);
};

Here is my Input field and Menu components:

<Input
  className={classes.searchInput}
  classes={{ focused: classes.searchInputFocused }}
  aria-controls="searchMenu"
  aria-haspopup="true"
  onClick={handleClickSearch}
/>
<Menu
  id="searchMenu"
  anchorEl={anchorElSearch}
  keepMounted
  open={Boolean(anchorElSearch)}
>
  <MenuItem onClick={handleCloseSearch}>Works</MenuItem>
</Menu>
material-ui reactjs
1 Answers

I would forego the Menu component and implement something like this:

const { ClickAwayListener, Input, MenuList, MenuItem, makeStyles } = MaterialUI

const useStyles = makeStyles({
  searchInputFocused: {
    border: "1px solid hotpink"
  }
});

function App() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleClickSearch = () => {
    setOpen((prev) => !prev);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <ClickAwayListener onClickAway={handleClose}>
      <div>
        <Input
          classes={{ focused: classes.searchInputFocused }}
          onClick={handleClickSearch}
        />
        {open ? (
          <MenuList
            onClick={handleClose}
            style={{ background: "#eeeeee" }}
          >
            <MenuItem>Item 1</MenuItem>
            <MenuItem>Item 2</MenuItem>
            <MenuItem>Item 3</MenuItem>
          </MenuList>
        ) : null}
      </div>
    </ClickAwayListener>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

user_112471750
Related