Dismiss button effect to closing all snackbars

[cbakkurt]

I want to add that when I click on screen anywhere with mause, all snackbars will close.
I can do this with your onClose callback function when I click anywhere in screen, it will works fine. However, when I close single snackbar with dismiss button, it also close all snackbars.
How can I detect this situtations ?

My code is below,
When I use onClose callback method

public render() {
const notistackRef = React.createRef();
const onClickDismiss = key => () => {
(notistackRef.current as any).closeSnackbar(key);
};

return (
  <MuiThemeProvider theme={this.state.muiTheme}>
    <SnackbarProvider
      autoHideDuration={null}
      preventDuplicate
      ref={notistackRef}
      action={key => (
        <div>
          <IconButton onClick={onClickDismiss(key)} aria-label="delete">
            <DeleteIcon />
          </IconButton>
        </div>
      )}
      maxSnack={5}
      onClose={(event, reason) => {
        if (reason === "clickaway") {
          (notistackRef.current as any).closeSnackbar();
        }
      }}
    >
      {this.props.children}
    </SnackbarProvider>
  </MuiThemeProvider>
);

}
}

[nildakuzu]

The "key" paramater will be passed to onClose callback function as a part of this: #214
Then adding key === undefined to if statement which is in onClose that will close all snackbars when you click anywhere except snackbar dismiss button.

onClose={(event, reason, key) =>
{
if (key === undefined && reason === "clickaway") {
(notistackRef.current as any).closeSnackbar();
}
}}

As a side effect onClose calllback function is fired one more time.

[iamhosseindhv]

Thanks @nildakuzu for your contribution. That is not true.

• We already pass key of a snackbar to onClose callback. Fix types for onExited, OnEntered, and onClose handlers #214 is regarding fixing types to reflect this behaviour.
• key parameter in onClose callback will never be undefined.

@cbakkurt

However, when I close single snackbar with dismiss button, it also close all snackbars.
How can I detect this situations?

This is expected. Say we have 3 snackbars on the screen; you dismiss one of them using a "Dismiss" button; the moment you click on the button, clickaway is triggered for the other two snackbars.

The only way that I can think of is to pass the onClose event to individual snackbars and not globally to SnackbarProvider.

props.enqueueSnackbar('my message', {
    onClose: (event, reason) => {
        if (reason === 'clickaway') {
            props.closeSnackbar();
        }
        if (reason === undefined) {
            // you/user closed the snackbar
        }
    },
});

NOTE: In future reason = instructed when a snackbar is closed using closeSnackbar function.