<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">do not autofocus AnchorElement onClose</p>

<h2 dir="auto">Current Behavior</h2>
<p dir="auto">autofocus AnchorElement onClose. this lead to the tooltip be activated  (occurred in Menu Model Dialog components)</p>

<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/l232olr27z" rel="nofollow">DEMO</a></p>

<h2 dir="auto">Context</h2>

<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>1.0.0-beta.23</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome  62.0.3202.94 (Official Build) (64-bit)</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">When using Hot Module Replacement with material ui, the style change cannot be reloaded.</p>
<p dir="auto">JSS and react-hot-loader should be able to work together<br>
<a href="https://github.com/cssinjs/react-jss/issues/29#issuecomment-192795272">https://github.com/cssinjs/react-jss/issues/29#issuecomment-192795272</a></p>


<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/callemall/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">HMR should replace/update the <code class="notranslate">&lt;style&gt;</code> tags in <code class="notranslate">&lt;header&gt;</code></p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The new component has been sent through, but <code class="notranslate">&lt;style&gt;</code> tags in <code class="notranslate">&lt;header&gt;</code> didn't change</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>create-react-app to create a new app</li>
<li>add <code class="notranslate">react-hot-loader@next</code> and <code class="notranslate">material-ui@next</code></li>
<li>eject the app to configure HMR by <code class="notranslate">yarn eject</code><br>
then change <code class="notranslate">entry</code> of <code class="notranslate">./config/webpack.config.dev.js</code> into following</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="entry: [
    'react-hot-loader/patch', // &lt;---add
    require.resolve('webpack/hot/dev-server'), // &lt;---uncomment
    require.resolve('webpack-dev-server/client') + '?/', // &lt;---uncomment
    // require.resolve('react-dev-utils/webpackHotDevClient'), // &lt;--- comment out this line
    paths.appIndexJs // &lt;-- unchanged
  ]"><pre class="notranslate">entry: <span class="pl-kos">[</span>
    <span class="pl-s">'react-hot-loader/patch'</span><span class="pl-kos">,</span> <span class="pl-c">// &lt;---add</span>
    <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'webpack/hot/dev-server'</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c">// &lt;---uncomment</span>
    <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'webpack-dev-server/client'</span><span class="pl-kos">)</span> <span class="pl-c1">+</span> <span class="pl-s">'?/'</span><span class="pl-kos">,</span> <span class="pl-c">// &lt;---uncomment</span>
    <span class="pl-c">// require.resolve('react-dev-utils/webpackHotDevClient'), // &lt;--- comment out this line</span>
    <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appIndexJs</span> <span class="pl-c">// &lt;-- unchanged</span>
  <span class="pl-kos">]</span></pre></div>
<ol start="4" dir="auto">
<li>add HOC for react-hot-loader, in <code class="notranslate">src/index.js</code></li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ... other imports
import { AppContainer } from 'react-hot-loader';

const render = App =&gt; {
  ReactDOM.render(
    &lt;AppContainer&gt;
      &lt;App /&gt;
    &lt;/AppContainer&gt;,
    document.getElementById('root')
  );
};
render(App);

registerServiceWorker();

// Enable hmr
if (module.hot) {
  module.hot.accept('./App', () =&gt; {
    render(require('./App').default);
  });
}
"><pre class="notranslate"><span class="pl-c">// ... other imports</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">AppContainer</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-hot-loader'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-en">render</span> <span class="pl-c1">=</span> <span class="pl-v">App</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">AppContainer</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">AppContainer</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
    <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'root'</span><span class="pl-kos">)</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-v">App</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">registerServiceWorker</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Enable hmr</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">hot</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">hot</span><span class="pl-kos">.</span><span class="pl-en">accept</span><span class="pl-kos">(</span><span class="pl-s">'./App'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./App'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<ol start="5" dir="auto">
<li>add babel config in package.json</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;babel&quot;:{
//...others
&quot;plugins&quot;:[
...other plugins,
&quot;react-hot-loader/babel&quot; &lt;--- add this line
]
}"><pre class="notranslate"><span class="pl-s">"babel"</span>:<span class="pl-kos">{</span>
<span class="pl-c">//...others</span>
<span class="pl-s">"plugins"</span>:<span class="pl-kos">[</span>
...<span class="pl-s1">other</span> <span class="pl-s1">plugins</span><span class="pl-kos">,</span>
<span class="pl-s">"react-hot-loader/babel"</span> <span class="pl-c1">&lt;</span><span class="pl-c1">--</span><span class="pl-c1">-</span> <span class="pl-s1">add</span> <span class="pl-s1">this</span> <span class="pl-s1">line</span>
<span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<ol start="6" dir="auto">
<li>try change text value to see hmr actually works (the page shouldn't refresh and there should be a request from url like <code class="notranslate">http://localhost:3000/0.d1087ac819fcd47659f1.hot-update.js</code>)</li>
<li>create a component and use <code class="notranslate">withStyles</code></li>
<li>try change the values in <code class="notranslate">styles</code> and the style isn't changed by HMR,</li>
<li>refresh the page the style will change.</li>
<li>see network tab can see the component change has been sent through (from url like <code class="notranslate">http://localhost:3000/0.d1087ac819fcd47659f1.hot-update.js</code> contain the transpiled code of this file)</li>
</ol>
<h2 dir="auto">Context</h2>
    
<p dir="auto">we cannot use HMR with webpack when we need to persist states in application and make changes through HMR.</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>1.0.0-beta.11</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 60.0.3112.113 (Official Build) (64-bit)</td>
</tr>
<tr>
<td>react-hot-loader</td>
<td>3.0.0-beta.7</td>
</tr>
<tr>
<td>webpack</td>
<td>3.5.1</td>
</tr>
<tr>
<td>webpack-dev-middleware</td>
<td>1.12.0</td>
</tr>
<tr>
<td>webpack-dev-server</td>
<td>2.7.1</td>
</tr>
</tbody>
</table>