How to close both nested Material-ui popovers on button click or click away

Question

I have nested popovers from Material-ui to create a menu with sub-menus. When I click one of the menu options I would like all of the popovers to close. Similarly, I would like all of the popovers to close on click away instead of having to click away multiple times to close them one at a time.

This would be a little simpler if I kept all of the code within one component, but I need to be able to reuse this code, so I prefer to keep it separated like it currently is. I have tried to change the handle functions to the parent component to no avail.

I have created a CodeSanbox example of my code: https://codesandbox.io/embed/friendly-sunset-dznur

I'm not sure how to make the popovers close when I click a menu item, but at the very least I would expect both popovers to close on click away.

I recommend looking at the cascading menu example here: github.com/jcoreio/material-ui-popup-state/tree/master/demo/… — Ryan Cogswell
– Ryan Cogswell, Commented Jul 23, 2019 at 14:59

alvinsj · Accepted Answer · 2019-07-23 15:01:22Z

I had a quick try here: https://codesandbox.io/s/nostalgic-davinci-fd61v.

I would think you are trying to achieve:

Composition with the menus, e.g. DropdownMenu > SideMenu > MenuItem.
Making it reusable and clean APIs.

The below approach would be something I would try:

Example 1: Inject props to children

const childrenWithNewProps = React.Children.map(props.children, child =>
  React.cloneElement(child, { onClose: handleClose })
);

Alternatively, a less pretty solution will be making the children as function, e.g. children({onClose}), but this will make the onClose explicit and repetitive.

Example 2: children as function

// children({onClose})
<DropdownMenu>
  {({onClose}) => {
    return <Fragment>
      <SideMenu onClose={onClose}>
        <MenuItem onClose={onClose}/>
        <MenuItem onClose={onClose}/>
      </SideMenu>
    </Fragment>
  }}
</DropdownMenu>

Collectives™ on Stack Overflow

How to close both nested Material-ui popovers on button click or click away

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related