title: react ref with focus() doesn't work without setTimeout (my example)
body: <p>I have encounter this problem, the <code>.focus()</code> only works with <code>setTimeout</code> if i take it out and it stop working. can anyone explain me what's the reason for that, possible i am doing it incorrectly and how can i fix the problem.</p>
  
  <pre><code>    componentDidMount() {
          React.findDOMNode(this.refs.titleInput).getElementsByTagName('input')[0].focus();
      }
  </code></pre>
  
  <p>works example with setTimeout</p>
  
  <pre><code>componentDidMount() {
      setTimeout(() =&gt; {
          React.findDOMNode(this.refs.titleInput).getElementsByTagName('input')[0].focus();
      }, 1);
  }
  </code></pre>
  
  <p>JXS</p>
  
  <pre><code>&lt;input ref="titleInput" type="text" /&gt;
  </code></pre>
  
  <p>and i have followed this example <a href="https://stackoverflow.com/questions/28889826/react-set-focus-on-input-after-render">React set focus on input after render</a></p>
  
  <p><strong>render function</strong></p>
  
  <pre><code>render() {
          const {title, description, tagtext, siteName} = (this.state.selected !== undefined) ? this.state.selected : {};
          const hasContentChangedYet = this.hasContentChangedYet(title, description);
  
          return (
              &lt;div&gt;
                  &lt;h2 className={styles.formMainHeader}&gt;Edit Meta-Data Form&lt;/h2&gt;
                  &lt;table className={styles.formBlock}&gt;
                      &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td className={styles.tagEditLabel}&gt;
                              Tag
                          &lt;/td&gt;
                          &lt;td className={styles.inputFieldDisableContainer}&gt;
                              {tagtext}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td className={styles.tagEditLabel}&gt;
                              Site
                          &lt;/td&gt;
                          &lt;td className={styles.inputFieldDisableContainer}&gt;
                              {siteName}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td className={styles.tagEditLabel}&gt;
                              Title
                          &lt;/td&gt;
                          &lt;td className={styles.inputFieldContainer}&gt;
                              &lt;ReactInputField
                                  ref="titleInput"
                                  id="title"
                                  defaultValue={(title) ? title : ''}
                                  onChange={this.onInputChange}
                                  placeholder="Title"
                                  clearTool={true} /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td className={styles.tagEditLabel}&gt;
                              Description
                          &lt;/td&gt;
                          &lt;td className={styles.inputFieldContainer}&gt;
                              &lt;ReactInputField
                                  id="description"
                                  defaultValue={(description) ? description : ''}
                                  onChange={this.onInputChange}
                                  placeholder="Description"
                                  clearTool={true} /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  
                  &lt;div className={styles.formFooter}&gt;
                      &lt;button id="save-button" className={styles.saveButton} disabled={!hasContentChangedYet} onClick={() =&gt; this.handleSavePressed()}&gt;
                          Save
                      &lt;/button&gt;
                      &lt;button id="form-cancel-button" className={styles.cancelButton} onClick={this.actions.form.cancelUpdateToTagData}&gt;
                          Cancel
                      &lt;/button&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  </code></pre>