How to handle "outside" click on Dialog (Modal) with material-ui
28,530
Solution 1
I think what you need is disableBackdropClick
passed down to <Modal />
component
<Modal disableBackdropClick />
You can also disable close Dialog on Esc key press with disableEscapeKeyDown
prop
Solution 2
disableBackdropClick
will not work in Material UI v5.
You can use code from the migration guide to handle each closing source manually with the onClose
prop
by detecting the source of the closing event.
<Dialog onClose={handleClose} />
And use the handler to stop it
const handleClose = (event, reason) => {
if (reason && reason == "backdropClick")
return;
myCloseModal();
}
Solution 3
Just remove the onClose
method
<Dialog
sx={{
position: 'absolute',
left: 300,
top: 35
}}
maxWidth="lg"
open={open}
// onClose={handleClose}
.....
Author by
rszaman
Updated on July 18, 2022Comments
-
rszaman almost 2 years
My box closes when clicking outside of the box making me lose all the input. I want my box to close only when clicking on the cancel button. I am not sure what is making it close when clicking outside. Any help?
I am using @material-ui/core
_close() { DeviceCreationActions.close(); } render() { const actions = [ <Button id="device-create-dialog-close" key="device-create-dialog-close" onClick={this._close} > {this.context.intl.formatMessage({id: 'Cancel'})} </Button> ]; if (0 < this.state.stepIndex) { actions.push(<Button id="device-create-dialog-back" key="device-create-dialog-back" onClick={this._previousStep.bind(this)} > {this.context.intl.formatMessage({id: 'Back'})} </Button> ); } if ( (1 >= this.state.stepIndex && 0 < this.state['formStep' + this.state.stepIndex].length) || (0 < this.state.stepIndex) ) { actions.push(<Button id="device-create-dialog-next" key="device-create-dialog-next" onClick={2 === this.state.stepIndex ? this._save.bind(this) : this._nextStep.bind(this)} > {this.context.intl.formatMessage({id: 2 === this.state.stepIndex ? 'Create' : 'Next'})} </Button> ); }