Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Focusing div elements with React

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>     );   } } 
like image 645
Carlos Martinez Avatar asked Aug 26 '16 21:08

Carlos Martinez


People also ask

How do you focus a div element in React?

To focus input when another element is clicked in React:Set the ref prop on the input element. Set the onClick prop on the other element.

Can we set focus on Div?

Yes - this is possible. In order to do it, you need to assign a tabindex...

How do you manage focus in React?

To set focus in React, we can use Refs to DOM elements. Sometimes a parent component needs to set focus to an element in a child component. We can do this by exposing DOM refs to parent components through a special prop on the child component that forwards the parent's ref to the child's DOM node.

How do you make the input field focus React?

To set focus on an input field after rendering with React, we can assign a ref to the input element with the useRef hook. Then we call focus on the current value of the ref to focus on the input. to call useRef to create a ref and assign it to inputReference . Then we call inputReference.


2 Answers

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.

like image 133
vankov.ilija Avatar answered Sep 22 '22 08:09

vankov.ilija


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(); }); 
like image 40
Rob M. Avatar answered Sep 25 '22 08:09

Rob M.