AutoFocus doesn't work in React

Question

I have a problem with autoFocus. It doesn't work for me, but using it:

<input onChange={this.handleName} value={this.state.name} placeholder="Name..." type="text" autoFocus />

Answer 1

None of these worked for me:

<input type="text" autoFocus        .../>
<input type="text" autoFocus={true} .../>
<input type="text" autoFocus="true" .../>
<input type="text" autoFocus="autofocus" .../>

…even though in each case, the web inspector showed that <input type="text" autofocus .../> was rendered 🤔

Perhaps it's because of this phenomenon, I'm not sure:

If you render your React component into a detached element, React will call focus() too soon. This will result in the input not focusing when your React tree gets added to the DOM.

This did work for me:

import React, { useRef, useEffect } from "react";

export default function SignIn() {
  const inputElement = useRef(null);
  useEffect(() => {
    if (inputElement.current) {
      inputElement.current.focus();
    }
  }, []);

  return (
    <div>
        <form action="...">
            <input
                  ref={inputElement} // yes, this is working in Chrome on Mac 
                  type="text" // allows username also; type 'email' woud insist on '@' sign
                  name="email"
                  placeholder="Email address"
                  autoComplete="email"
                  required
                  ...
                />
        </form>
    </div>
  );
}

That's strategy #2 from Daniel Johnson