title: Focusing div elements with React
body: <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>