React and autofocus

By  on  

While I love ReactJS, I can say that I sometimes find interactions that were easy during the pre-ReactJS are annoyingly difficult or at least "indirect".  One example is properly ensuring that a given <input> element gets focused when a button in a different component is clicked; in the old days, it was three lines of code, but with React it can be more.

Let's have a look at a few strategies for properly focusing on <input> elements with ReactJS.

autofocus

The autofocus attribute is honored in ReactJS but only when the <input> element is re-rendered with React:

<input type="text" autofocus="true" />

autofocus is easy to use but only works when the <input> is initially rendered; since React intelligently only re-renders elements that have changed, the autofocus attribute isn't reliable in all cases.

componentDidUpdate with ref

Since we can't rely solely on the autofocus attribute, we can use componentDidUpdate to complete the focus:

class Expressions extends Component {

  _input: ?HTMLInputElement;

  // ....

  componentDidUpdate(prevProps, prevState) {
    this._input.focus();
  }

  render() {
      return (
        <div className={this.state.focused ? "focused": ""}>
            <input
              autofocus="true"
              ref={c => (this._input = c)}
            />
        </div>
      );
    }
  }
}

componentDidUpdate fires after the component is updated, so any change to the parent component would trigger this method and your <input> would receive focus.  In my cases, I usually toggle a className on the parent element to signal the element is active and thus the componentDidUpdate will trigger.

My perspective of inter-widget interaction has been formed by the days of Dojo's dijit UI framework where each widget usually had a reference to every child widget; with ReactJS the practice is (hopefully) avoiding refs and using state, which is logical but there's still that piece of me that longs for a simple reference, which is why the second strategy makes sense to me.

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    New MooTools Plugin:  ElementFilter

    My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. The XHTML I've used a list for this example...

Discussion

  1. Hi David.

    Great article — as always. It is just worth to update a syntax of reference to the now one (updated in 16.3) using

    React.createRef()

    .

    https://reactjs.org/docs/react-api.html#reactcreateref

    Thanks

  2. Alexis Wilke

    Note that the autofocus attribute has to be written autoFocus in React. Camel case all the way!

  3. Christopher

    I’d suggest componentDidMount() instead of componentDidUpdate() to avoid the issues with re-renders that you pointed out.

  4. Ariel

    actually, the syntax should be autoFocus={true}

  5. Akshra

    Yes correct Syntax is autoFocus={true} just simply add in your input element ,it also work in re-rendering .

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!