Having created a global modal with the intention of only utilizing it when necessary, I've encountered an issue where the snackbar div persists in the DOM. This persistence is causing certain elements to become blocked as they appear beneath this div. Any insights on what might be causing this problem?
This is my GlobalAlert component:
export function GlobalAlert() {
const {alertState, handleClose} = useAlertContext();
const {open, type, message} = alertState;
function TransitionDown(props: TransitionProps) {
return <Slide {...props} direction="down" />;
}
return (
<Snackbar
key={"top" + "center"}
TransitionComponent={TransitionDown}
anchorOrigin={{vertical: "top", horizontal: "center"}}
autoHideDuration={4000}
disableWindowBlurListener={true}
open={open}
onClose={handleClose}
>
<Alert severity={type} sx={useStyles.alert} variant="filled" onClose={handleClose}>
{message}
</Alert>
</Snackbar>
);
}
The context where information is retrieved from:
const AlertContextProvider = (props: any) => {
const [alertState, setAlertState] = React.useState<AlertState>({
open: false,
type: "error",
message: "",
});
const handleClose = React.useCallback((event?: React.SyntheticEvent | Event, reason?: string) => {
if (reason === "clickaway") {
return;
}
setAlertState({
open: false,
type: "error",
message: "",
});
}, []);
const value = React.useMemo(
() => ({
alertState,
setAlertState,
handleClose,
}),
[alertState, handleClose],
);
return <AlertContext.Provider value={value} {...props} />;
};
Reference image for the bug: https://i.stack.imgur.com/5UvCs.png