Focusing div elements with React

Question

Is it possible to focus div (or any other elements) using the focus() method?

I've set a tabIndex to a div element:

<div ref="dropdown" tabIndex="1"></div>

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

setActive(state) {
  ReactDOM.findDOMNode(this.refs.dropdown).focus();
}

Or like this:

this.refs.dropdown.focus();

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?

EDIT:

Well, It seems this it actually possible to do: https://jsfiddle.net/69z2wepo/54201/

But it is not working for me, this is my full 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) => {
      const colorClasses = classNames('colorpicker-item', [`colorpicker-item-${color}`]);

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

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

Answer 1

React redraws the component every time you set the state, meaning that the component loses focus. In this kind of instances it is convenient to use the componentDidUpdate or componentDidMount methods if you want to focus the element based on a prop, or state element.

Keep in mind that as per React Lifecycle documentation, componentDidMount will only happen after rendering the component for the first time on the screen, and in this call componentDidUpdate will not occur, then for each new setState, forceUpdate call or the component receiving new props the componentDidUpdate call will occur.

componentDidMount() {
  this.focusDiv();
},
componentDidUpdate() {
  if(this.state.active)
    this.focusDiv();
},
focusDiv() {
  ReactDOM.findDOMNode(this.refs.theDiv).focus();
}

Here is a JS fiddle you can play around with.

Answer 2

This is the problem:

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

Set state is rerendering your component and the call is asynchronous, so you are focusing, it's just immediately rerendering after it focuses and you lose focus. Try using the setState callback

this.setState({ active: state }, () => {
   this.refs.component.focus();
});

Answer 3

A little late to answer but the reason why your event handler is not working is probably because you are not binding your functions and so 'this' used inside the function would be undefined when you pass it as eg: "this.selectItem(color)"

In the constructor do:

this.selectItem = this.selectItem.bind(this)

this.setActive = this.setActive.bind(this)

Answer 4

This worked in my case

render: function(){

  if(this.props.edit){
    setTimeout(()=>{ this.divElement.focus() },0)
  }

    return <div ref={ divElement => this.divElement = divElement}
                contentEditable={props.edit}/>
}

Answer 5

import React from "react"
import ReactDOM from 'react-dom';

export default class DivFocusReactJs extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this.refs.divFocus).focus();
  }

  render() {
    return (
      <div tabIndex={1} ref="divFocus">
        <p>Focusing div elements with React</p>
        {/*your code here...*/}
      </div>
    )
  }
}

Answer 6

Not sure if this is the proper way, but I found that this worked for me.

render() {
  return <div ref='item' onLoad={() => this.refs.item.focus()}>I will have focus</div>
}