AutoFocus an input element in react JS

Question

I am unable to autofocus the input tag rendered in this component. What am I missing here?

class TaskBox extends Component {
  constructor() {
    super();
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.textInput.focus();
  }

  componentWillUpdate(){
    this.focus();
  }

  render() {
    let props = this.props;
    return (
      <div style={{display: props.visible ? 'block' : 'none'}}>
        <input
        ref={(input) => { this.textInput = input; }}
        onBlur={props.blurFN} />
        <div>
          <div>Imp.</div>
          <div>Urg.</div>
          <div>Role</div>
        </div>
        <div>
          <button>Add goal</button>
        </div>
      </div>
    )
  }
}

Any help is appreciated.

While you're rendering a stateless component, you can just add the tag autoFocus to your input element and it will auto focus the element. — Dhruv Kumar Jha
– Dhruv Kumar Jha, Commented Feb 19, 2017 at 7:13

Mayank Shukla · Accepted Answer · 2017-09-14 10:06:14Z

74

There is a attribute available for auto focusing autoFocus, we can use that for auto focusing of input element instead of using ref.

Using autoFocus with input element:

<input autoFocus />

We can also use ref, but with ref we need to call focus method at correct place, you are calling that in componentWillUpdate lifecycle method, that method will not triggered during initial rendering, Instead of that use componentDidMount lifecycle method:

componentDidMount(){
    this.focus();
}

shouldComponentUpdate: is always called before the render method and enables to define if a re-rendering is needed or can be skipped. Obviously this method is never called on initial rendering. It will get called only when some state change happen in the component.

componentWillUpdate gets called as soon as the the shouldComponentUpdate returned true.

componentDidMount: As soon as the render method has been executed the componentDidMount function is called. The DOM can be accessed in this method, enabling to define DOM manipulations or data fetching operations. Any DOM interactions should always happen in this.

Reference: https://facebook.github.io/react/docs/react-component.html

edited Sep 14, 2017 at 10:06

answered Feb 19, 2017 at 6:50

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ayan Over a year ago

exactly! I just realised it. It started working componentDidMount. Why cant we focus in componentWillUpdate? one is before the rendering is done and the other post it, and this is triggerd for a state change. @mayank is this because the parent component was in display: none mode while the rendering is taking place? So that means if we display: none an input HTML tag, and then focus it programmatically and after it, display it(display: block), focus wont work. Am I thinking in the right manner?

Mayank Shukla Over a year ago

componentWillUpdate will not get called on first rendering, componentDidMount will get called just after the rendering, so you need to focus the input element in this method, check the updated answer :)

Hardik Modha Over a year ago

componentDidMount will only execute after render() in mount phase of life cycle. So, It is only correct for mounting phase. For update lifecycle it is not correct.

C. S. Over a year ago

you can also have it called in componentDidUpdate.

Robo Robok Over a year ago

Yes! autofocus doesn't work, but autoFocus does. It wasn't trivial to learn that, as google results don't seem to mention this attribute.

|

Pedram · Accepted Answer · 2024-12-29 13:04:42Z

2

In some case <input autoFocus /> not working so you can use ref:

import React, { useRef, useEffect } from "react";
const inputRef = useRef(null);

 useEffect(() => {
    inputRef.current.focus();
  }, []);

<input type="text" ref={inputRef } />

answered Dec 29, 2024 at 13:04

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

Comments

Lucas · Accepted Answer · 2017-10-21 13:07:03Z

-15

Set an ID to the input and then use .setAttribute('autoFocus', true) to the element when you want it focused

edited Oct 21, 2017 at 13:07

Lucas

3,2914 gold badges29 silver badges46 bronze badges

answered Oct 21, 2017 at 12:59

Jeremy

7136 silver badges12 bronze badges

Collectives™ on Stack Overflow

AutoFocus an input element in react JS

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related