Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material UI Menu not closing after clicking a menu item

This is code straight from MUI menu - customized menu.. I didn't want to put my code because there are some built in functions that make it more confusing.

In my code (not this) I open a MUI Dialog when a menu item is clicked. The issue is that the menu does not go away after the Dialog is submitted.

I would like to know how to make the menu close as soon as anything on the menu is clicked(menu items).

Thanks

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Menu, { MenuProps } from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5',
  },
})((props: MenuProps) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    {...props}
  />
));

const StyledMenuItem = withStyles((theme) => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white,
      },
    },
  },
}))(MenuItem);

export default function CustomizedMenus() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="customized-menu"
        aria-haspopup="true"
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <StyledMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <StyledMenuItem>
          <ListItemIcon>
            <SendIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Sent mail" />
        </StyledMenuItem>
        <StyledMenuItem>
          <ListItemIcon>
            <DraftsIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </StyledMenuItem>
        <StyledMenuItem>
          <ListItemIcon>
            <InboxIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </StyledMenuItem>
      </StyledMenu>
    </div>
  );
}
like image 312
Bjorn Birkelund Avatar asked Jun 19 '20 01:06

Bjorn Birkelund


People also ask

Why is [Menu] component not being closed after clicking outside of menu?

[Menu] component is not being closed after clicking outside of menu on Jun 19, 2021 Had this issue, make sure that Menu is not declared INSIDE of the component that has onclick to open it. Sorry, something went wrong.

What is react material UI menus?

In this article, we will discuss React Material UI Menus. Menu is used to show a list of options. Material UI is one of the most popular UI frameworks developed by Google. The Material UI library is designed for faster, easier and developer-friendly user interface development. Now Material-UI is supported by all major browsers and platforms.

How to use a selected menu item without impacting the initial focus?

To use a selected menu item without impacting the initial focus, set the variant prop to "menu". Because the Menu component uses the Popover component to position itself, you can use the same positioning props to position it. For instance, you can display the menu on top of the anchor: The Menu component uses the Popover component internally.

How to prevent the dropdown menu from closing the menu list?

In this article, We will use stropPropagation method to prevent the dropdown menu from closing the menu list. stopPropagation (): The stopPropagation () method is used to stop propagation of event calling i.e. the parent event is called we can stop the propagation of calling its children by using the stopProagration () method and vice-versa.


1 Answers

You can just assign handleClose handler to the onClick property of the <Menu> itself like this:

<StyledMenu
  onClick={handleClose}
  onClose={handleClose}
  {...yourProps}
>
 ...
</StyledMenu>
like image 157
Alex Zinkevych Avatar answered Sep 20 '22 08:09

Alex Zinkevych