<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">I have a <code class="notranslate">SnackBarController</code> component that I place at the root of my <code class="notranslate">Router</code>, this is backed by a redux reducer with some actions that allow me to open the <code class="notranslate">SnackBar</code> and pass properties to it for the message and such</p>
<h3 dir="auto">Custom Component</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class SnackBarController extends React.Component {
  render () {
    return (
      &lt;Snackbar
        open={this.props.snackBar.open}
        message={this.props.snackBar.message}
        autoHideDuration={this.props.snackBar.autoHideDuration}
        onRequestClose={() =&gt; this.props.dispatch(closeSnackBar())}
        action={this.props.action}
        onActionClick={this.props.onActionClick}
      /&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">class SnackBarController extends React.Component {
  render () {
    return (
      &lt;Snackbar
        open={this.props.snackBar.open}
        message={this.props.snackBar.message}
        autoHideDuration={this.props.snackBar.autoHideDuration}
        onRequestClose={() =&gt; this.props.dispatch(closeSnackBar())}
        action={this.props.action}
        onActionClick={this.props.onActionClick}
      /&gt;
    );
  }
}
</code></pre></div>
<h3 dir="auto">Actions</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export const SNACKBAR_OPEN = 'SNACKBAR_OPEN';

export const openSnackBar = data =&gt; ({
  type: SNACKBAR_OPEN,
  ...data,
  open: true
});

export const SNACKBAR_CLOSE = 'SNACKBAR_CLOSE';

export const closeSnackBar = data =&gt; ({
  type: SNACKBAR_CLOSE,
  open: false
});"><pre class="notranslate"><code class="notranslate">export const SNACKBAR_OPEN = 'SNACKBAR_OPEN';

export const openSnackBar = data =&gt; ({
  type: SNACKBAR_OPEN,
  ...data,
  open: true
});

export const SNACKBAR_CLOSE = 'SNACKBAR_CLOSE';

export const closeSnackBar = data =&gt; ({
  type: SNACKBAR_CLOSE,
  open: false
});
</code></pre></div>
<h3 dir="auto">Reducer</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { SNACKBAR_OPEN, SNACKBAR_CLOSE } from &quot;../actions/snackBar&quot;;

const snackBarInitialState = {
  open: false,
  message: 'There was an error',
  autoHideDuration: 3000,
  action: undefined,
  onActionClick: undefined
};

export default (state = snackBarInitialState, action) =&gt; {
  switch (action.type) {
    case SNACKBAR_OPEN:
    case SNACKBAR_CLOSE:
      const { type, ...rest } = action;
      return {
        ...state,
        ...rest
      };
    default:
      return state;
  }
};"><pre class="notranslate"><code class="notranslate">import { SNACKBAR_OPEN, SNACKBAR_CLOSE } from "../actions/snackBar";

const snackBarInitialState = {
  open: false,
  message: 'There was an error',
  autoHideDuration: 3000,
  action: undefined,
  onActionClick: undefined
};

export default (state = snackBarInitialState, action) =&gt; {
  switch (action.type) {
    case SNACKBAR_OPEN:
    case SNACKBAR_CLOSE:
      const { type, ...rest } = action;
      return {
        ...state,
        ...rest
      };
    default:
      return state;
  }
};
</code></pre></div>
<p dir="auto">I then call the open action when for instance a promise rejects</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.props.dispatch(openSnackBar({
  message: &quot;Use next?&quot;,
  onActionClick: this.makeUpdates,
  action: 'Use',
  autoHideDuration: 6000
}));"><pre class="notranslate"><code class="notranslate">this.props.dispatch(openSnackBar({
  message: "Use next?",
  onActionClick: this.makeUpdates,
  action: 'Use',
  autoHideDuration: 6000
}));
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">When I attempt to open a <code class="notranslate">SnackBar</code> this way, I only get a <code class="notranslate">SnackBar</code> with the message and the timeout, no action button shows at all</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto"><a href="https://codesandbox.io/s/jpy3opvr93" rel="nofollow">https://codesandbox.io/s/jpy3opvr93</a></p>
<ol dir="auto">
<li>Click button</li>
<li>See that there is no action</li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">Ideally this is supposed to allow me to control a snack bar from anywhere in my application including within other action generators</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>^0.19.4</td>
</tr>
<tr>
<td>React</td>
<td>^16.1.1</td>
</tr>
<tr>
<td>Redux</td>
<td>^5.0.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome Version 62.0.3202.94 (Official Build) (64-bit)</td>
</tr>
</tbody>
</table>
<ul dir="auto">
<li>[✔] I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">The <a href="http://www.material-ui.com/#/components/snackbar" rel="nofollow">docs for Snackbar Component</a> incorrectly use the onRequestClose prop in all examples. This was a breaking change in <a href="https://libupdate.com/libs/fab5b196-27af-4a2e-8ce9-d6cf4fe67bfc" rel="nofollow">Material UI 1.0.0-beta.24 Dec 17, 2017</a>. The docs should be updated to reflect the changes. Also, I haven't checked any other components as this is my first time using a Material component, but this issue may persist across other docs.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Expect onRequestClose to be the correct prop for the Snackbar, and possibly other, component(s).</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">onClose is the actual prop that Snackbar (and possibly other components) expect. Using onRequestClose throws a warning and the Snackbar will never trigger the function passed to onRequestClose, nor will the autoHideDuration trigger it.</p>
<h2 dir="auto">Breaking Change</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/21347228/35249601-4918d4f2-ff98-11e7-87b3-dbb2d92ef85a.png"><img src="https://user-images.githubusercontent.com/21347228/35249601-4918d4f2-ff98-11e7-87b3-dbb2d92ef85a.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Current Docs</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/21347228/35249722-aa873652-ff98-11e7-9e03-3db4d439b5dd.png"><img src="https://user-images.githubusercontent.com/21347228/35249722-aa873652-ff98-11e7-9e03-3db4d439b5dd.png" alt="image" style="max-width: 100%;"></a></p>