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.
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.
Baca Juga
- Javascript / Jquery - How To Create A Proper Modal Page Overlay
- Reactjs - I Am Trying To Handle And Event In A Popup, But The Popup Is Not Being Rendered As It Should After An Event Execution
- How To Open A Bootstrap 5 Modal Which Is In Child From A Button Click Which Is In Parent , Without Installing Ng Bootstrap In Angular
<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}
.....
Post a Comment for "How To Handle "outside" Click On Dialog (modal) With Material-ui"