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
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

  • By
    Image Reflections with CSS

    Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...

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.

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