<h3 dir="auto">Problem description</h3>
<p dir="auto">When add <code class="notranslate">onBlur</code> to TextField, the label won't switch to un-focus when blur.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/313189/26436140/8c2b4f68-413e-11e7-87be-6e407c2e3d66.gif"><img src="https://cloud.githubusercontent.com/assets/313189/26436140/8c2b4f68-413e-11e7-87be-6e407c2e3d66.gif" alt="2017-05-25_11-35-53" data-animated-image="" style="max-width: 100%;"></a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// This work as normal
&lt;TextField label=&quot;First name&quot; /&gt;
// This won't work
&lt;TextField label=&quot;First name&quot; onBlur={() =&gt; {}} /&gt;"><pre class="notranslate"><span class="pl-c">// This work as normal</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"First name"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c">// This won't work</span>
<span class="pl-c1">&lt;</span><span class="pl-v">TextField</span> <span class="pl-s1">label</span><span class="pl-c1">=</span><span class="pl-s">"First name"</span> <span class="pl-s1">onBlur</span><span class="pl-c1">=</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-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">/</span>&gt;</pre></div>
<h3 dir="auto">Problem description</h3>
<p dir="auto">the onFocus floating effect is lost, when overriding the onFocus-props of a TextField- or FormControl-Component. (same problem with onBlur btw)</p>
<h3 dir="auto">Link to minimal working code that reproduces the issue</h3>
<p dir="auto"><a href="https://www.webpackbin.com/bins/-KkudROJc3XfIoli7IxX" rel="nofollow">https://www.webpackbin.com/bins/-KkudROJc3XfIoli7IxX</a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 1.0.0-alpha.15</li>
<li>React: 15.5.4</li>
<li>Browser: chrome 58.0.3029.110 (64-bit)</li>
</ul>
<h3 dir="auto">possible solution</h3>
<p dir="auto">override the handleFocus and handleBlur-function and rearrange the props in the FormControl-Component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class FormControl extends Component {
  (...)
  handleFocus = () =&gt; {
      if (!this.state.focused) {
        this.setState({ focused: true });
      }
      if (this.props.onFocus) {
        this.props.onFocus();
      }
  };
  
  render() {
      return (&lt;div
          className={classNames(classes.root, className)}
          {...other}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
        &gt;
          {children}
        &lt;/div&gt;
      );
  }
  (...)
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">FormControl</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span><span class="pl-c1"></span>
  <span class="pl-kos">(</span>...<span class="pl-kos">)</span>
  <span class="pl-s1">handleFocus</span> <span class="pl-c1">=</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-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">focused</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">focused</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">onFocus</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-en">onFocus</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>
  
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">div</span>
          <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">classNames</span><span class="pl-kos">(</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">root</span><span class="pl-kos">,</span> <span class="pl-s1">className</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
          <span class="pl-kos">{</span>...<span class="pl-s1">other</span><span class="pl-kos">}</span>
          <span class="pl-c1">onFocus</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleFocus</span><span class="pl-kos">}</span>
          <span class="pl-c1">onBlur</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleBlur</span><span class="pl-kos">}</span>
        <span class="pl-c1">&gt;</span>
          <span class="pl-kos">{</span><span class="pl-s1">children</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</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>
<p dir="auto">`</p>