Click outside to close Drawer with ES6

[AndriiDidkivsky]

Problem description

How to implement Click outside to close Drawer(or other popuped elements) with ES6

Steps to reproduce

Add component and try to click outside

Versions

• Material-UI: 0.15.0
• React: 15.1.0
• Browser: Any

We have found solutions here

[djleonskennedy]

also have this problem

[djleonskennedy]

Solution in stack overflow that was provided use ES5 mixins, any propositions with ES6?

[AndriiDidkivsky]

I tried to set docked property to false. it doesn't work and I don't understand why.
Code example :
<Drawer open={this.state.isDrawerOpen} docked={false} className="app-drawer"> <AppBar showMenuIconButton={false} iconElementRight={<IconButton onTouchTap={this.closeDrawer}><NavigationClose /></IconButton>}/> </Drawer>

[dvmorris]

I am also having this problem. Has anyone found a fix for this?

[AndriiDidkivsky]

I have found solution.

Here a source code from Drawer.js that run when docked property is false :
close(reason) { if (this.props.open === null) this.setState({open: false}); if (this.props.onRequestChange) this.props.onRequestChange(false, reason); return this; }

if Open property is true and no onRequestChange property method just return true.
We could handle click outside event via onRequestChange property.

My solution:
<Drawer open={this.state.isDrawerOpen} docked={false} className="app-drawer" onRequestChange={this.closeDrawer}>

Where:
closeDrawer() { this.setState({ isDrawerOpen: false }) }

[sanjibnarzary]

@AndriiDidkivsky Your solution help me to to toggle Drawer.
But i am getting this strange fading effect while opening drawer where as it was clean while docked={true}.
I have seen the same problem in material-ui.com project website too.

How do I get rid of this problem? I mean AppBar shifting a bit right while the Drawer is open.

[AndriiDidkivsky]

@sanjibnarzary As I can see this is because scrollbar at right side is disapear and content shift a bit right. Look at this point more detail. If you will find solution you can create pull request or open new issue.

[moacirosa]

Only for reference since it was difficult for me find an answer there is the autoFocus property as mentioned in other already closed issue.

[JohnWooS]

This no longer works? Borken?

state = {
    open: false,
  }

  handleDrawerOpen = () => {
    this.setState({ open: true })
  }

  handleDrawerClose = () => {
    this.setState({ open: false })
  }
<Drawer
        anchor={'right'}
        open={open}
        docked={false}
        onRequestChange={this.handleDrawerClose}
      >
        <div style={{ width: '150px' }}
        >
          <div>
            <IconButton onClick={this.handleDrawerClose}>
              <ChevronRightIcon />
            </IconButton>
          </div>
          <Divider />
          <List>
            {MenuItems}
          </List>
        </div>
      </Drawer>

[stevenaldinger]

just wanted to give an example of this using the beta version.
ModalProps -> onBackdropClick is the secret.

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

[renanferr]

just wanted to give an example of this using the beta version.
ModalProps -> onBackdropClick is the secret.

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

This solved my problem, and I also added the listener to the onEscapeKeyDown property from the Modal API Docs, so it became something like:

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

[yuliethc]

Work for me without this way, just:
<Drawer variant="temporary" open={open} onEscapeKeyDown={handleDrawerClose} onBackdropClick={handleDrawerClose} >