<p dir="auto">On a regular <code class="notranslate">TextField</code>, the <code class="notranslate">onChange</code> event handler receives an event parameter that allows to know the name of the <code class="notranslate">TextField</code> as well as the value that was changed to:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="onChange = ({ target: { name, value } }) =&gt; {
  console.log('textfield changed', name, value); // -&gt; { 'username': 'john-doe' }
}"><pre class="notranslate"><span class="pl-en">onChange</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">target</span>: <span class="pl-kos">{</span> name<span class="pl-kos">,</span> value <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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'textfield changed'</span><span class="pl-kos">,</span> <span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">value</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// -&gt; { 'username': 'john-doe' }</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">However, on a <code class="notranslate">TextField</code> with nested options, which renders internally a <code class="notranslate">Select</code>, this is no longer the case. The element given as <code class="notranslate">target</code> in the <code class="notranslate">onChange</code> event is the <code class="notranslate">li</code> of the dropdown list, which only has a <code class="notranslate">value</code>, but no <code class="notranslate">name</code>.</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">The <code class="notranslate">onChange</code> event handler of a <code class="notranslate">&lt;TextField name="xyz"&gt;{options}&lt;/TextField&gt;</code> should receive an event object where <code class="notranslate">event.target.name</code> is <code class="notranslate">"xyz"</code>.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The <code class="notranslate">onChange</code> event handler of a <code class="notranslate">&lt;TextField name="xyz"&gt;{options}&lt;/TextField&gt;</code> receives an event object where <code class="notranslate">event.target.name</code> is <code class="notranslate">undefined</code>.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Visit <a href="https://codesandbox.io/s/nkq35z76wj" rel="nofollow">https://codesandbox.io/s/nkq35z76wj</a></li>
<li>Open the codesandbox.io console on the right bottom area of the page</li>
<li>Change the name text field, see that it changes visually, and the name and value are present in the console</li>
<li>Now change the gender select field. See that it does not change, and the console prints out undefined in place of the actual field name.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">Having the name reflected in the event target is not only more compatible with how actual form input events work in html, it is also convenient because you can use the same onChange event handler for many input elements, instead of dynamically having to generate a different event handler for different input elements of a form.</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.17</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome latest</td>
</tr>
</tbody>
</table>
<p dir="auto">Tooltips cause horizontal scroll when resizing the window to a smaller one.</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">Tooltips won't cause horizontal scroll</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Tooltips cause horizontal scroll when the page is resized to a smaller breakpoint.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Open <a href="https://material-ui-1dab0.firebaseapp.com/demos/tooltips/" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/demos/tooltips/</a> in desktop breakpoint size.</li>
<li>Start reducing the width of the window until you see the horizontal scroll bar</li>
<li>If you hover over each tooltip (even the tooltip to expand the example code), you'll see that the horizontal scroll disappear.</li>
</ol>
<h2 dir="auto">Context</h2>
    
<p dir="auto">The <code class="notranslate">transform: translate3d</code> property in the tooltips are the root of the issue. The tooltip is translated to a position but it's never updated when resizing the window, so the tooltip stays out of the viewport.</p>
<p dir="auto">Using the layers tab on chrome devtools can be easily detected.</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>v1.0.0-beta.18</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 61</td>
</tr>
</tbody>
</table>