I have a Snackbar ponent that is controlled by checking the redux state. The onRequestClose() is an attempt to disable the clickaway close function. The problem I am having is that when the prop snackbarWarningOpen is set to false the first time, the snackbar does not dismiss.

Here is my code and how I am calling the Snackbar ponent. The snackbarWarningOpen is a boolean variable that es in as a prop, and that is accurately switching from true to false appropriately.

<Snackbar
      open={snackbarWarningOpen}
      message={
        <span>
          <i className="fa fa-exclamation-triangle ble-warning" aria-hidden="true" />
          <span> {snackbarWarningMessage}</span>
        </span>
      }
      style={styles.warningSnackbar}
      bodyStyle={styles.warningSnackbarBody}
      onRequestClose={(reason) => {
        if (reason === 'clickaway') {
          return;
        }
      }}
    />

I tracked down the problem to the setTimeout() function in ponentWillReceiveProps, and it always sets the open state to true the last time it runs, even when the prop I am passing is false. The weird part is that the condition on the IF statement returns false, but the setTimeout() function still runs. After the prop is set to false, a clickaway event will dismiss the snackbar, but I am trying to get it to dismiss on its own. Is my implementation incorrect, or is this a bug in the snackbar ponent?

This is code from the Material-UI source, and the setState within timerOneAtTheTimeId is where open switches back to true after I have passed the ponent an open prop as false.

ponentWillReceiveProps(nextProps) {
if (this.props.open && nextProps.open &&
    (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) {
  this.setState({
    open: false,
  });

  clearTimeout(this.timerOneAtTheTimeId);
  this.timerOneAtTheTimeId = setTimeout(() => {
    this.setState({
      message: nextProps.message,
      action: nextProps.action,
      open: true,
    });
  }, 400);
} else {
  const open = nextProps.open;

  this.setState({
    open: open !== null ? open : this.state.open,
    message: nextProps.message,
    action: nextProps.action,
  });
}

I have a Snackbar ponent that is controlled by checking the redux state. The onRequestClose() is an attempt to disable the clickaway close function. The problem I am having is that when the prop snackbarWarningOpen is set to false the first time, the snackbar does not dismiss.

Here is my code and how I am calling the Snackbar ponent. The snackbarWarningOpen is a boolean variable that es in as a prop, and that is accurately switching from true to false appropriately.

<Snackbar
      open={snackbarWarningOpen}
      message={
        <span>
          <i className="fa fa-exclamation-triangle ble-warning" aria-hidden="true" />
          <span> {snackbarWarningMessage}</span>
        </span>
      }
      style={styles.warningSnackbar}
      bodyStyle={styles.warningSnackbarBody}
      onRequestClose={(reason) => {
        if (reason === 'clickaway') {
          return;
        }
      }}
    />

I tracked down the problem to the setTimeout() function in ponentWillReceiveProps, and it always sets the open state to true the last time it runs, even when the prop I am passing is false. The weird part is that the condition on the IF statement returns false, but the setTimeout() function still runs. After the prop is set to false, a clickaway event will dismiss the snackbar, but I am trying to get it to dismiss on its own. Is my implementation incorrect, or is this a bug in the snackbar ponent?

This is code from the Material-UI source, and the setState within timerOneAtTheTimeId is where open switches back to true after I have passed the ponent an open prop as false.

ponentWillReceiveProps(nextProps) {
if (this.props.open && nextProps.open &&
    (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) {
  this.setState({
    open: false,
  });

  clearTimeout(this.timerOneAtTheTimeId);
  this.timerOneAtTheTimeId = setTimeout(() => {
    this.setState({
      message: nextProps.message,
      action: nextProps.action,
      open: true,
    });
  }, 400);
} else {
  const open = nextProps.open;

  this.setState({
    open: open !== null ? open : this.state.open,
    message: nextProps.message,
    action: nextProps.action,
  });
}

• javascript
• reactjs
• material-ui

• I am a little bit confused by the code you pasted. open={snackbarWarningOpen}, but you set open in your state. I understand that those two code snippets e from the same ponent, right? Also, I am not sure why you are not using autoHideDuration Snackbar prop, where you can set the timeout? – szymonm Commented Jan 31, 2017 at 7:11
• Ah, good point that I need to clarify. The bottom code snippet is from the Material-UI source, not my code. I added it because it seems like that is where my problem is ing from, but I'm not sure. I'll edit with clarifications. – Bonitis Commented Jan 31, 2017 at 23:31

1 Answer 1

This issue is over a year old, and the version of Material UI is not specified, but whoever es across the question: it can now be solved easily in version v1.x of Material UI:

The scnackBar ponent has an autoHideDuration prop that can be set to achieve what you need:

<Snackbar
    open={this.state.open}
    onClose={this.handleClose}
    autoHideDuration={6000}
/>

The "dismiss on clickaway" will still be active, though.

Make sure to check out the snackbar documentation for updated info.