title: React input.focus() called by `ref` also invoking `onBlur` event
body: <p>I have an input element in React that I want to set <code>onFocus</code>, <code>onBlur</code>, and <code>ref</code> callbacks for. Setting the <code>ref</code> callback is having the unwanted behavior of firing the <code>onBlur</code> event when I run <code>input.focus()</code> inside of it.</p>
  
  <pre><code>&lt;input
      onFocus={() =&gt; {
          props.startSearch(); // set props.active === true
      }}
      onBlur={() =&gt; {
          props.endSearch(); // set props.active === false
      }}
      ref={(input) =&gt; {
          if (input &amp;&amp; props.active) {
              input.focus();
          }
      }}
  /&gt;
  </code></pre>
  
  <p>I have another component that dispatches an action setting <code>props.active</code> to true. This should focus the input component. However, when the component mounts, the input's <code>onBlur</code> callback fires unexpectedly:</p>
  
  <p><code>ref =&gt; onFocus =&gt; onBlur</code></p>
  
  <p>This is setting <code>props.active</code> to true, but then immediately setting it false (because <code>props.endSearch</code> fires).</p>
  
  <p>When I comment out <code>input.focus()</code> and manually click to focus the input, I get <code>onFocus =&gt; ref</code>, which is the desired behavior. This clearly does not have the effect of "auto-focusing" the input, however.</p>
  
  <hr>
  
  <p><em>Why is <code>input.focus()</code> triggering <code>onBlur</code> to fire and how can I prevent this?</em> </p>