New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Error snackbar does not dissapear upon clicking the cross icon #567
Comments
This is because the close button isn't actually a close button; it's an icon that describes what type of snackbar pops up. If you do want the snackbar to close, you can use the Here's a part of the documentation that shows how to do that: |
This is what I actually did But this imperative way feels hacky import { Box } from '@mui/material';
import { SnackbarKey, useSnackbar } from 'notistack';
import { useEffect, useRef } from 'react';
interface Props {
snackbarKey: SnackbarKey;
}
const CloseSnackbarAction = ({ snackbarKey }: Props) => {
const { closeSnackbar } = useSnackbar();
const snackbarRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClick = () => closeSnackbar(snackbarKey);
const snackbarParent = snackbarRef.current?.parentElement?.parentElement;
if (snackbarParent && snackbarParent.className.includes('variantError')) {
const snackBarSvgIcon = snackbarParent.childNodes[0]?.childNodes[0];
snackBarSvgIcon?.addEventListener('click', handleClick);
return () => snackBarSvgIcon?.removeEventListener('click', handleClick);
}
}, [closeSnackbar, snackbarKey]);
return <Box ref={snackbarRef} />;
};
export default CloseSnackbarAction; Feels like there should have been a better built in setup for this or something |
Very hacky. I think they forgot about the close/dismiss. It should be an option e.g.:
|
Expected Behavior
Upon clicking the close button, snackbar should disappear
(This is the behavior seen in other libraries)
Current Behavior
Nothing happens the cross icon just confuses the user into believing it has some actions.
Context
I did hack the solution by myself, but I'd like this case to be covered in the documentation
Your Environment
Demo
Codesanbox
https://codesandbox.io/s/nostalgic-jennings-p60v3x?file=/MessageButtons.js
The text was updated successfully, but these errors were encountered: