Material UI - Drawer does not open

Question

I have a react app with Material-UI 1.2.

Although the state is properly updated, the drawer does not open close. I have also correctly applied the bind on onLeftIconButtonTouchTap.

Here is my implementation of the TemporaryDrawer :

// .. imports

const styles = {
    list: {
        width: 250,
    },
    fullList: {
        width: 'auto',
    },
    menuButton: {
        marginLeft: 12,
        marginRight: 36,
    },
};

class TemporaryDrawer extends React.Component {

    render() {
        const { classes, toggleDrawer, isOpen } = this.props;

        const sideList = (
            <div className={classes.list}>
                <List>
                <ListItem button>
                        <ListItemIcon>
                            <InboxIcon />
                        </ListItemIcon>
                        <ListItemText primary="Inbox" />
                    </ListItem>
                </List>
            </div>
        );

        console.log(' isOpen ' + isOpen);
        return (    
            <div>
                <IconButton className={classes.menuButton} color="inherit" onClick={toggleDrawer}>
                    <MenuIcon />
                </IconButton>
                <Drawer open={isOpen} onClose={toggleDrawer}>
                    <div
                        tabIndex={0}
                        role="button"
                        onClick={toggleDrawer}
                        onKeyDown={toggleDrawer}
                    >
                        {sideList}
                    </div>
                </Drawer>
            </div>
        );
    }
}

TemporaryDrawer.propTypes = {
    classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TemporaryDrawer);

used in this MenuAppBar.js

// ... imports

const styles = {
    root: {
        flexGrow: 1,
    },
    flex: {
        flex: 1,
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20,
    },
};

class MenuAppBar extends React.Component {
    state = {
        auth: true,
        drawerOpen: false,
    };

    handleMenu = () => {
        this.setState({ drawerOpen: !this.state.drawerOpen });
    };

    render() {
        const { classes } = this.props;
        const { drawerOpen } = this.state;
        console.log(' state ' + this.state.drawerOpen);
        return (
            <div className={classes.root}>
                <AppBar position="static" onLeftIconButtonTouchTap={this.handleMenu.bind(this)}>
                    <Toolbar>
                        <TemporaryDrawer isOpen={drawerOpen} toggleDrawer={this.handleMenu} />
                    </Toolbar>
                </AppBar>
            </div>
        );
    }
}

MenuAppBar.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MenuAppBar);

package.json

{
  "name": "find-swim",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/codemod": "^1.1.0",
    "@material-ui/core": "^1.2.0",
    "@material-ui/icons": "^1.1.0",
    "firebase": "^4.8.0",
    "material-ui": "^0.19.4",
    "material-ui-autocomplete-google-places": "^2.2.0",
    "material-ui-places": "^1.1.7",
    "mui-places-autocomplete": "^2.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-ga": "^2.4.1",
    "react-google-button": "^0.4.0",
    "react-google-maps": "^9.2.2",
    "react-places-autocomplete": "^5.4.3",
    "react-redux": "^5.0.6",
    "react-redux-firebase": "^2.0.0-beta.16",
    "react-redux-form": "^1.16.5",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.16",
    "react-tap-event-plugin": "^3.0.2",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-devtools": "^3.4.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "set GENERATE_SOURCEMAP=false && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "firebase deploy"
  },
  "devDependencies": {
    "redux-devtools-extension": "^2.13.2"
  }
}

Answer 1

it s crazy but the issue was with the combination:

"@material-ui/core": "^1.2.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",

As soon as I ve updated my dependencies to those of Ramil in his codesandbox, it worked.

"@material-ui/core": "1.2.3",
"react": "^16.3.0",
"react-dom": "^16.3.0",

I hope this helps someone..

Answer 2

I don't know where you got this onLeftIconButtonTouchTap={this.handleMenu.bind(this)}

But what you can do is:

<AppBar position="static">
    <IconButton
        className={classes.menuButton}
        color="inherit"
        aria-label="Menu"
        onClick={this.handleMenu.bind(this)}
    >
        <MenuIcon />
    </IconButton>
    <Toolbar>
        <TemporaryDrawer
            isOpen={drawerOpen}
            toggleDrawer={this.handleMenu}
        />
    </Toolbar>
</AppBar>

Edit: I tried your code in sandbox. Apparently, nothing is wrong with your code. https://codesandbox.io/s/pk9921kkw0