React autoFocus attribute is not rendered

Question

I'm trying to render an <input> field with autofocus:

<input type="text" autoComplete="off" autoFocus={true} className="form-control" />

But it's being rendered as:

<input type="text" autocomplete="off" class="form-control">

And the input does not focus.

Why is that? How can I get the autofocus attribute to render?

Answer 1

This is expected, actually. React will manually call focus() on the relevant element, but it will not add the attribute itself.

Here is a quote from Dan Abramov from a ticket response from ~2 years ago:

This is intentional because it works very differently in different browsers. So instead of actually setting a DOM attribute, we polyfill its behavior in JavaScript.

Also, from another thread:

Chrome respects dynamically added elements with autoFocus if there hasn’t been one before. Even creating an input with autoFocus, adding it to the document, and removing it in the next tick is enough to disable autofocusing of any elements added in the future in Chrome.

Firefox just doesn’t care about any dynamically added elements with autoFocus at all.

And Safari always respects them.

---

That being said, you could still force the attribute with autofocus="true" instead of autoFocus={true} but it might not actually work in a reliable fashion. After all, there is a reason the React team polyfilled this.

In other words, if you want a reliable, consistent cross-browser behavior use autoFocus, if you must have the native attribute you can use autofocus="true", but know that you'll be at the mercy of letting the browser decide when and how said element will be focused.

Answer 2

You can try using a ref, and setting the focus when your component is ready.

const YourComponent = (props) => {
    const inputEl = useRef(null);

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

    return <div>
        <input autofocus="true" ref={inputEl} />
    </div>;
}