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>
);
}
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();
}