Material-ui when closing the dialog it wont let me touch my page

Question

So after i close the dialog box of material-ui, somehow i can't click or touch anything in my page

useState:

const [open, setOpen] = useState(false);

Function:

  const handleClose = () => {
setOpen(false);

};

Tag:

        <Dialogopen={open}TransitionComponent={Transition}keepMountedonClose={handleClose}></Dialog>

Answer 1

I guess it's because you use "Open" as value instead of "open".

<Dialog open={open} TransitionComponent={Transition} keepMounted onClose={handleClose}></Dialog>

If it not help try to remove "keepMounted" (it's description in API https://material-ui.com/ru/api/modal/ is not fully clear for me)

Answer 2

yeah i had thesame issue

i removed the transition props of material ui dialog component. That is a transition problem. i guess when you close the modal or dialog it closes with your customized transition

and also i never used the on mounted component

here is my code

//the code block to handle dialog

    const [openDialog, setOpenDialog] = useState(false);
    const handleClickOpenDialog = () => {
         setOpenDialog(true);
    };
    const handleCloseDialog = (event, reason) => {
         if (reason !== 'backdropClick') {
             setOpenDialog(false);
         }
    };

//the dialog component material ui

    <Dialog
         disableEscapeKeyDown
         open={openDialog}
         onClose={handleCloseDialog}
    >
         <DialogContent>
             //your dialog content here
         </DialogContent>
         <DialogActions>
                 <Button
                    onClick={() => {
                    handleCloseDialog();
                    }}
                 >
                 OK
                 </Button>
         </DialogActions>
    </Dialog>