Focusing div elements with React

Question

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

I set tabIndex to the div element:

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

And I see that it focuses when I click on it, however I am trying to dynamically focus the element as follows:

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

Or like this:

 this.refs.dropdown.focus(); 

But the component does not receive focus when the event fires. How can i do this? Is there any other (non-input) element that I can use for this?

EDIT:

Well, it seems like it really can be done: https://jsfiddle.net/69z2wepo/54201/

But this does not work for me, this is my complete 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

The reaction redraws the component every time you set the state, which means that the component loses focus. In such cases, it is convenient to use the componentDidUpdate or componentDidMount methods if you want to focus the element based on the prop or state element.

Keep in mind that, according to the React Lifecycle documentation, componentDidMount will only happen after the component is first displayed on the screen, and componentDidUpdate does not happen in this call, then for each new setState forceUpdate or the component receiving the new details will call componentDidUpdate .

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

Here is a JS script you can play with.

Answer 2

This is the problem:

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

The specified state overwrites your component, and the call is asynchronous, so you focus, it immediately recovers after it focuses, and you lose focus. Try using setState

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

Answer 3

It’s a bit late to answer, but the reason your event handler is not working is probably because you are not binding your functions, and therefore the “this” used inside the function will be undefined if you pass it, for example: " this.selectItem (color) "

In the constructor we do:

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

Answer 4

 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 5

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 6

Not sure if this is the right way, but I found that this works for me.

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