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
Advertisement
Answer
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> );