Close Persistent MUI Drawer on clicking outside

Question

I am trying to use Drawer component in MUI React. I want that state inside the Drawer component should not lost on closing of Drawer component, hence I'm passing variant="persistent" in Drawer component.

Now, the problem is that the Persistent Drawer does not provide backdrop functionality by default unlike temporary drawers hence I'm unable to close it on outside click. I tried {{ModalProps={{ onBackdropClick: this.toggleDrawer }} }} also but still it is not working.

Is there any workaround for this?

MUI Version: 1.0.0

CodeSandbox link

Answer 1

For the sake of searchers landing on this question. If you are having trouble with ClickAwayListener and are not using variant='persistent'. Try this instead: Providing a toggle function to ModalProps onBackdropClick

<Drawer
  open={drawerIsOpen}
  ModalProps={{ onBackdropClick: this.toggleDrawer }}
>
  <MenuItem>drawer item 1</MenuItem>
</Drawer>

UPDATE July 2021:

I recently updated material-ui/core to version 4.12.1 and noticed that onBackdropClick is being deprecated. Instead they have added native support for this functionality, the onClose function will be called automatically when clicking outside the drawer, and it now gives a reason for why it was called:

Signature: function(event: object, reason: string) => void

event: The event source of the callback.

reason: Can be: "escapeKeyDown", "backdropClick"

See example here: https://material-ui.com/api/modal/ scroll down to onBackDropClicked - it works the same for the drawer as it does for the

Do this instead:

<Drawer
  open={drawerIsOpen}
  onClose={{ (ev, reason) => this.setState({ drawerIsOpen: false }) }}
>
  <MenuItem>drawer item 1</MenuItem>
</Drawer>

Answer 2

You can use the ClickAwayListener component for this.
https://material-ui.com/api/click-away-listener/

import ClickAwayListener from '@material-ui/core/ClickAwayListener';

const drawer = (
      <ClickAwayListener onClickAway={this.handleDrawerClose}>
        <Drawer
          variant="persistent"
          anchor={anchor}
          open={open}
          classes={{
            paper: classes.drawerPaper
          }}
        >
          <div className={classes.drawerHeader}>
            <IconButton onClick={this.handleDrawerClose}>
              {theme.direction === "rtl" ? (
                <ChevronRightIcon />
              ) : (
                <ChevronLeftIcon />
              )}
            </IconButton>
          </div>
          <Divider />
          <List>a asdasd</List>
          <Divider />
          <List>asdasd</List>
        </Drawer>
      </ClickAwayListener>
    );

https://codesandbox.io/s/072ny1rjw

Answer 3

I spend some time training to fix this, but I found a really a useful solution and is to change the variant to Temporary and use de onEscapeKeyDown and the onBackdropClick as follow:

  <Drawer
    variant="temporary"
    onEscapeKeyDown={handleDrawerClose}
    onBackdropClick={handleDrawerClose}
    open={open}
    ...rest of your code...

Answer 4

You can implement this yourself by adding a div in your appFrame which has an onClick that closes the drawer like this:

<div className={classes.appFrame}>
{this.state.open ? 
    <div style={{ position: "fixed", zIndex: 1, left: 0, right: 0, top: 0, bottom: 0 }} 
        onClick={() => this.handleDrawerClose()} /> 
    : null
}
// rest of your code