[Drawer] Close request ignored when clicking on Drawer overlay

[holywyvern]

Problem description

When I click on the Overlay of the drawer, it doesn't close as expected, but pressing ESC key calls the event without troubles.

Steps to reproduce

Let me show some bits of code:

class AppMenuComponent extends React.Component {

  render() {
    return (
      <Drawer 
        docked={false} 
        open={this.props.open} 
        onRequestChange={this.props.onRequestChange}
        disableSwipeToOpen={true}
      >
        Test
      </Drawer>
    );
  }

export default class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.openMenu        = this.openMenu.bind(this);
    this.requestMenuOpen = this.requestMenuOpen.bind(this);
    this.state           = { menuOpen: false };
  }

  openMenu() {
    this.setState({ menuOpen: true });
  }

  requestMenuOpen(menuOpen=false) {
    this.setState({ menuOpen });
  }

  render() {
    return (
      <div>
        <AppMenuComponent 
             open={this.state.menuOpen} onRequestChange={this.requestMenuOpen} />
        <AppBar 
          title="Menu"
          iconElementLeft={<IconButton  onClick={ this.openMenu }><MoreVertIcon /></IconButton>}
        />
      </div>
    );
  }

}

}

requestMenuOpen is called when I press ESC key, but not if I press outside of the Drawer.

Versions

• Material-UI: master
• React: 15.0.2
• Browser: Chrome 50.0.2661.94

[patsul12]

+1 also seeing this behavior

Versions

• Material-UI: master
• React: 15.0.2

[nathanmarks]

I haven't tested the code @holywyvern, but it looks like you have a scope issue there with the object that onRequestChange callback is bound to. In React, es6 class functions are not autobound, you have to explicitly bind them to the class using either the fat arrow syntax (es7 class property initializers) or using .bind() in the constructor() function of your class.

[patsul12]

@nathanmarks I am having the same issue.
Here is the relevant chunk of code. Everything else seems to be working but clicking on the overlay isn't working

export default class Sidebar extends React.Component {                                                                                                                                    
     constructor(props) {                                                                                                                                                                    
       super(props);                                                                                                                                                                         
       this.state = {open: false};                                                                                                                                                           
       this.handleToggle = this.handleToggle.bind(this);                                                                                                                                     
      this.handleClose = this.handleClose.bind(this);                                                                                                                                       
    }                                                                                                                                                                                       

    handleToggle() { this.setState({open: !this.state.open}); }                                                                                                                             

    handleClose() { this.setState({open: false}); }                                                                                                                                         

    render() {                                                                                                                                                                              
      return (                                                                                                                                                                              
        <div>                                                                                                                                                                               
          <div className="dashboard-header">                                                                                                                                                
            <ImageDehaze onClick={this.handleToggle} />                                                                                                                                     
            <span className="main-logo-dashboard">name</span>                                                                                                                          
          </div>                                                                                                                                                                            
          <Drawer                                                                                                                                                                           
            docked={false}                                                                                                                                                                  
            width={300}                                                                                                                                                                     
            open={this.state.open}                                                                                                                                                          
            onRequestChange={(open) => this.setState({open})}                                                                                                                               
            >                                                                                                                                                                               
            <ContentClear style={contentClearStyles} onClick={this.handleClose}/>                                                                                                           
            <MenuItem a href="/">Home</MenuItem>                                                                                                                                            
            <MenuItem onClick={this.handleClose}>Menu Item 2</MenuItem>                                                                                                                     
            <MenuItem>                                                                                                                                                                      
              <UploadFormModal />                                                                                                                                                           
            </MenuItem>                                                                                                                                                                     
          </Drawer>                                                                                                                                                                         
        </div>                                                                                                                                                                              
      );                                                                                                                                                                                    
    }                                                                                                                                                                                       
  }

[holywyvern]

No I'm not having a scope issue...
This clearly shows I'm binding it at the constructor...

  constructor(props) {
    /* ... */
    this.requestMenuOpen = this.requestMenuOpen.bind(this);
   /* ... */
  }

[ck86]

The internal Overlay component still uses the onTouchTap event, so I guess it is still necessary to include react-tap-event-plugin.

[shivekkhurana]

Did you find a solution for this ? My function has this bound and react-tap-event-plugin is also injected. onRequestChange fires only in pressing esc key.

class TopBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDrawerOpen: false
    };

    this.onDrawerMenuButtonClick = this.onDrawerMenuButtonClick.bind(this);
  }

  onDrawerMenuButtonClick() {
    console.log('erer');
    console.log(this.state);
    console.log('gsdhjhskd');
    this.setState({isDrawerOpen: !this.state.isDrawerOpen});
  }

  render() {
    return <AppBar
      className="TopBar"
      title="Hello Shivek"
      iconElementLeft={<IconButton
        onTouchTap={this.onDrawerMenuButtonClick}
        onClick={this.onDrawerMenuButtonClick}
      >
        <MoreVertIcon />
      </IconButton>}

      onLeftIconButtonTouchTap={this.onDrawerMenuButtonClick}
    >
      <div className="drawer">
        <Drawer
          docked={false}
          open={this.state.isDrawerOpen}
          onRequestChange={(open) => {
            console.log(open);
            this.setState({isDrawerOpen: open});
          }}
        >
          <MenuItem>Team Management</MenuItem>

        </Drawer>
      </div>
    </AppBar>;
  }
}

• React 15.1
• material-ui ^0.15.1
• react-tap-event-plugin ^1.0.0
• Chrome on MacBook

Thank you

---

Update 0 :
react-tap-event-plugin doesn't seem to work at all with React 15.1. onTouchTap events are not firing.

---

Update 1:
Don't know the internals but, I changed the location of react-tap-event-plugin injection from app bootstrap file (main.js in my case) to the file where initial ReactDom.render was being called and it started working !

[petermikitsh]

For me, moving the injectTapEventPlugin(); call before calling render solved the problem.

e.g.,

injectTapEventPlugin();
render(<Index />, document.getElementById('app'));

Working with react-tap-event-plugin@1.0.0, material-ui@0.15.2, and react@15.2.1.

[mpontikes]

@holywyvern Can this issue be issue be closed by @petermikitsh and @shivekkhurana 's solutions?

[kpennell]

If anyone comes here from the material-ui-next examples onRequestClose instead of onClose is the trick to getting the overlay to work.

[mbrookes]

Only if you're using an older release. From v1.0.0-beta.24 onwards it's onClose (#9451).

[kpennell]

Thx

…

On Thu, Dec 28, 2017 at 3:33 PM, Matt Brookes ***@***.***> wrote: Only if you're using an older release. From v1.0.0-beta.24 <https://github.com/mui-org/material-ui/releases/tag/v1.0.0-beta.24> onwards it's onClose (#9451 <#9451>). — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4217 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABAuIerUbtUCOvusuHZ3DEhG6euuuRteks5tFCVWgaJpZM4IaMob> .