Escaping from a nested material-ui dialog - material-ui

Question

When I have one dialog open and it opens another and I hit escape it closes both.
Is there any way to make the escape only close the top most dialog?

Answer 1

I dont think this will be possible without some hassle. In the dialog render function, this eventlistener is rendered and there is no prop that allows you to overwrite this.
{open &&
<EventListener
target="window"
onKeyUp={this.handleKeyUp}
onResize={this.handleResize}
/>
}
Which calls this method.
handleKeyUp = (event) => {
if (keycode(event) === 'esc') {
this.requestClose(false);
}
};
source
You can however dive into in node_modules/material-ui/Dialog/dialog.js and delete that code or change it. Removing this line will prevent it from ever closing on esc, but will count for all dialogs. Maybe after that you can implement a keycode event listener in you own class that handles the closing of the modal.
if ((0, _keycode2.default)(event) === 'esc') {
_this2.requestClose(false);
}
EDIT: possible solution.
I created 2 components, a DialogContainer class component and a Dialog functional component. To use this you have to npm install --save react-event-listener.
For this to work you still have to remove the above code from the node_modules.
When only one dialog is opened it will close that dialog when esc is clicked. If two dialogs are opened it will first close dialog2 and leave dialog1 open.
DialogContainer.js
import React, { Component } from 'react';
import Dialog from './Dialog';
import RaisedButton from 'material-ui/RaisedButton';
import EventListener from 'react-event-listener';
export default class DialogContainer extends Component {
state = {
openDialog1: false,
openDialog2: false
};
handleDialog1Open = () => {
this.setState({ openDialog1: true });
};
handleDialog2Open = () => {
this.setState({ openDialog2: true });
};
handleDialog1Close = () => {
this.setState({ openDialog1: false });
};
handleDialog2Close = () => {
this.setState({ openDialog2: false });
};
handleKeyUp = (event) => {
// 27 = esc
if (event.keyCode === 27) {
if (this.state.openDialog1 && this.state.openDialog2) {
this.handleDialog2Close();
} else {
this.handleDialog1Close();
this.handleDialog2Close();
}
}
};
render() {
return (
<div>
{(this.state.openDialog1 || this.state.openDialog2) &&
<EventListener
target="window"
onKeyUp={this.handleKeyUp}
/>}
<RaisedButton label="Open1" onTouchTap={this.handleDialog1Open}/>
<RaisedButton label="Open2" onTouchTap={this.handleDialog2Open}/>
<Dialog
openOtherDialog={this.handleDialog2Open}
open={this.state.openDialog1}
handleClose={this.handleDialog1Close}
number={1}/>
<Dialog
open={this.state.openDialog2}
handleClose={this.handleDialog2Close}
number={2}/>
</div>
)
}
};
Dialog.js
import React from 'react';
import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';
const DialogCustom = ({ open, handleClose, number, openOtherDialog}) => {
return (
<div>
<Dialog
title="Dialog"
modal={false}
open={open}
onRequestClose={handleClose}
>
{`this is dialog ${number}`}
{openOtherDialog &&
<RaisedButton label="Open2" onTouchTap={openOtherDialog}/>
}
</Dialog>
</div>
);
};
export default DialogCustom;

Answer 2

There is nearly always a better solution than having two dialogs/modals open at the same time. In our material-design app using MUI, we have this situation on a few occasions. The way we handle it: close the "underneath" dialog when the "top" dialog opens. Then (if needed), you can re-open the "underneath" dialog when closing the "top" dialog. Seems like a lot of work, but stacking dialogs gets to be tricky with both the code and the UX considerations.