Material-ui: Menu component is not being closed after clicking outside of menu.

[podeig]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When I click outside of menu, it must be dissmised.

Current Behavior

After update from 1.0.0.beta 21 to 1.0.0 beta 31 menu is not being closed after clicking outside of menu. I have to choose something from menu to go on. Otherwise all the page is blocked.

Steps to Reproduce (for bugs)

1. Open the menu
2. Click outside of the menu

Context

Some code:

state = {
    anchorLangMenu: null
};

selectLanguage = (langId) => {
    this.props.activateLanguage(langId);
    this.setState({ anchorLangMenu: null });
}

handleClick = event => {
    this.setState({ 
        anchorLangMenu: event.currentTarget
    });
};

render() {

.....
                    <Button 
                        className="headerBtn"          
                        aria-owns={this.state.anchorLangMenu ? 'languageMenu' : null}
                        aria-haspopup="true"
                        onClick={this.handleClick}
                    >
                        Languages
                    </Button>
                    <Menu
                        id="languageMenu"
                        anchorEl={this.state.anchorLangMenu}
                        open={Boolean(this.state.anchorLangMenu)}
                        onRequestClose={() => this.setState({ anchorLangMenu: null })}
                    >
                        <MenuItem onClick={() => this.selectLanguage('en')} className="languageName">
                            <img 
                                src="/images/language-usa.svg" 
                                className="languageFlag" 
                                alt="English" 
                            /> 
                            English
                        </MenuItem>
                        <MenuItem onClick={() => this.selectLanguage('nb')} className="languageName">
                            <img 
                                src="/images/language-norway.svg" 
                                className="languageFlag" 
                                alt="Norsk" 
                            />
                            Norsk
                        </MenuItem>
                    </Menu>
.....
}

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.31 |
| React | 16.2.0 |
| browser | Chrome, Safari |
| etc | |

[oliviertassinari]

@podeig Check the breaking changes section of the documentation before upgrading. Also, check the warnings in your console.

-onRequestClose
+onClose

[podeig]

Nice! Thank you! onClose works. I'll check the documentation. :)

[thiagodp]

@oliviertassinari Not working with version 4.8.1.
I also checked with the examples from the website.

[JorgeOsorio97]

I am having this issue in version 4.0.2
I realized that when clicking outside the menu, the onClose is beign fired but onExit is not.

[diminishedprime]

I'm also having this issue with the following version:

    "@material-ui/core": "^4.9.10",

[oliviertassinari]

Do you have a minimal live reproduction?

[singulart]

The issue persists in
"@material-ui/core": "^4.11.0"

[ClydeFrog04]

I am also having the issue with
"@material-ui/core": "^4.11.0"

[Chimpaya]

I also had this problem. Turns out it's because i set the width of the Menu component via className props.
Was able to solve it by setting the width via the PaperProps prop
<Menu PaperProps={{ style: { minWidth: 200, maxWidth: 300, }, }} />