[Drawer] Close request ignored when clicking on Drawer overlay
See original GitHub issueProblem 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
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:11 (3 by maintainers)
Top Results From Across the Web
[Drawer] Close request ignored when clicking on Drawer overlay
When I click on the Overlay of the drawer, it doesn't close as expected, but pressing ESC key calls the event without troubles....
Read more >Developers - [Drawer] Close request ignored when clicking on ...
Problem description. When I click on the Overlay of the drawer, it doesn't close as expected, but pressing ESC key calls the event...
Read more >Close Persistent MUI Drawer on clicking outside
Now, the problem is that the Persistent Drawer does not provide backdrop functionality by default unlike temporary drawers hence I'm unable to ...
Read more >Drawer API - Material UI - MUI
API reference docs for the React Drawer component. Learn about the props, CSS, ... Callback fired when the component requests to be closed....
Read more >Create overlays in your prototypes - Figma Help Center
Create an overlay · Position: The location of the overlay relative to the original frame. · Close when clicking outside: Check this setting...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Only if you’re using an older release. From v1.0.0-beta.24 onwards it’s
onClose(https://github.com/mui-org/material-ui/pull/9451).If anyone comes here from the material-ui-next examples
onRequestCloseinstead ofonCloseis the trick to getting the overlay to work.