Recently, I crafted a reusable dialog/modal using React and Material UI. However, I encountered an unusual issue when attempting to close the modal by clicking on the overlay. Instead of the modal closing as expected and setting 'open' to false, it mysteriously reverts back to true.
The problem seems to be originating from the handleClickOpen function which triggers when clicking on the overlay, but I can't seem to pinpoint the exact cause.
Here is the Dialog component snippet:
const { onClose, open } = props;
const handleClose = () => {
onClose();
};
const preventDef = (e) => {
e.stopPropagation();
};
return (
<Dialog open={open} onClose={onClose} className={className} onClick={handleClose}>
<Container>
<Grid container className={`${className}__container`}>
<Grid item xs={12} sm={props.colsAmount} onClick={preventDef} className={`${className}__column`}>
{props.component}
{props.closeButton && (
<div className={`${className}__close`} onClick={handleClose}>
<Close />
</div>
)}
</Grid>
</Grid>
</Container>
</Dialog>
);
Now, let's take a look at the component where I load and trigger the dialog:
const [open, setOpen] = React.useState(false);
const handleClose = (e) => {
setOpen(false);
};
const handleClickOpen = () => {
setOpen(true);
};
return (
<div className={[classes.ShopCard]} onClick={handleClickOpen}>
<div className={`${classes.ShopCard}__image`}>
<div className={`${classes.ShopCard}__image__wrapper`}>
<img src={image} alt={alt} />
<div className={`${classes.ShopCard}__image__price`}>Vanaf €{price}</div>
</div>
</div>
<div className={`${classes.ShopCard}__content`}>
<Title title={title} size="h6" />
<Body>{description}</Body>
</div>
<div className={`${classes.ShopCard}__button`}>
<Button label="In winkelwagen" startIcon={<AddShoppingCart />} />
</div>
<CustomDialog
open={open}
onClose={handleClose}
colsAmount={6}
component={<ShopPopUp />}
closeButton="true"
/>
</div>
If anyone can shed some light on why the open state keeps getting set to true unexpectedly, please share your insights!