Focusing div elements with React
<p>Is it possible to focus div (or any other elements) using the <code>focus()</code> method?</p>

<p>I've set a tabIndex to a div element:</p>

<pre><code>&lt;div ref="dropdown" tabIndex="1"&gt;&lt;/div&gt;
</code></pre>

<p>And I can see it gets focused when I click on it, however, I'm trying to dynamically focus the element like this:</p>

<pre><code>setActive(state) {
  ReactDOM.findDOMNode(this.refs.dropdown).focus();
}
</code></pre>

<p>Or like this:</p>

<pre><code>this.refs.dropdown.focus();
</code></pre>

<p>But the component doesn't get focus when the event is triggered. How can I do this? Is there any other (not input) element I can use for this?</p>

<p>EDIT:</p>

<p>Well, It seems this it actually possible to do: <a href="https://jsfiddle.net/69z2wepo/54201/" rel="noreferrer">https://jsfiddle.net/69z2wepo/54201/</a></p>

<p>But it is not working for me, this is my full code:</p>

<pre><code>class ColorPicker extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false,
      value: ""
    };
  }

  selectItem(color) {
    this.setState({ value: color, active: false });
  }

  setActive(state) {
    this.setState({ active: state });
    this.refs.dropdown.focus();
  }

  render() {
    const { colors, styles, inputName } = this.props;

    const pickerClasses = classNames('colorpicker-dropdown', { 'active': this.state.active });

    const colorFields = colors.map((color, index) =&gt; {
      const colorClasses = classNames('colorpicker-item', [`colorpicker-item-${color}`]);

      return (
        &lt;div onClick={() =&gt; { this.selectItem(color) }} key={index} className="colorpicker-item-container"&gt;
          &lt;div className={colorClasses}&gt;&lt;/div&gt;
        &lt;/div&gt;
      );
    });

    return (
      &lt;div className="colorpicker"&gt;
        &lt;input type="text" className={styles} name={inputName} ref="component" value={this.state.value} onFocus={() =&gt; { this.setActive(true) }} /&gt;
        &lt;div onBlur={() =&gt; this.setActive(false) } onFocus={() =&gt; console.log('focus')} tabIndex="1" ref="dropdown" className={pickerClasses}&gt;
          {colorFields}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>