title: Focus on newly-rendered text input after tab-fired blur event
body: <p>I have a React (15.3.2) component with a text input.</p>
  
  <p>(Everywhere I say "render" here it's actually render or unhide; I've tried both.)</p>
  
  <p>When that input element is blurred, I render a new component with a text input.</p>
  
  <p>I want give the new text input focus.</p>
  
  <p>I've tried <code>componentDidMount</code>, <code>componentWillUpdate</code>, and <code>componentDidUpdate</code>; I've tried named and function <code>ref</code>s; I've tried react-dom.</p>
  
  <p>The focusing itself works, e.g., once it's been rendered, if I click in the initial input, focus goes to the new input (this is a bug, but compared to focusing, trivial).</p>
  
  <p>The first input has an <code>onBlur</code> that sets the state used to tell the second input to render or not.</p>
  
  <p>In that blur handler I stop the event as best as I can.</p>
  
  <p>When I tab out of the first element I'm already "past" the newly-rendered element, e.g., the browser tab bar in my current bare design&ndash;I guess the new element hasn't been rendered yet?</p>
  
  <pre><code>class SecondInput extends Component {
    componentDidUpdate = (prevProps, prevState) =&gt; {
      if (!this.props.hidden) this._input.focus()
    }
  
    render = () =&gt; 
      &lt;input type="text" hidden={this.props.hidden} ref={(c) =&gt; this._input = c}
  }
  
  class NewItem extends Component {
    state = { itemEntered: false }
  
    itemBlurred = (e) =&gt; {
      e.preventDefault()
      e.stopPropagation()
      this.setState({ itemEntered: true })
    }
  
    render = () =&gt;
      &lt;div&gt;
        Item: &lt;input type="text" onBlur={this.itemBlurred} /&gt;
        &lt;SecondInput hidden={!this.state.itemEntered} /&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Any ideas or hints? I have to believe it's something obvious, because surely this happens all the time.</p>
  
  <p>I'm also open to any other form of component hierarchy, e.g., if I need to have a container that wraps all this stuff up somehow that's fine.</p>
  
  <p>React 15.3.2</p>