How To Handle "outside" Click On Dialog (modal) With Material-ui

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 w

Solution 1:

I think what you need is disableBackdropClick passed down to <Modal /> component

<ModaldisableBackdropClick />

You can also disable close Dialog on Esc key press with disableEscapeKeyDown prop

Solution 2:

disableBackdropClick will not work in Material UI v5.

Dialog API (next)

You can use code from the migration guide to handle each closing source manually with the onCloseprop by detecting the source of the closing event.

<DialogonClose={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}
   .....