AutoFocus on Text Input in React Using Styled Components - html

Question

How do you make the TextInput in React using Styled Components to be autoFocus on page load?
I did using useEffect but it seems it doesn't autoFocus on the TextInput. I wanted the email text input to be focus outlined on page load.
Codesandbox -> CODESANDBOX
function App() {
const emailInput = useRef(null);
useEffect(() => {
if (emailInput.current) {
emailInput.current.focus();
}
}, []);
return (
<div>
<Input type="text" placeholder="Name" />
<Input type="email" placeholder="Email" innerRef={emailInput} />
</div>
);
}

Answer 1

As per styled-components documentation, in innerRef section, the innerRef is deprecated as of v4:
NOTE
The "innerRef" prop was removed in styled-components v4 in favor of the React 16 forwardRef API. Just use the normal ref prop instead.
Before React 16, there was no nice way to pass references up to the parent (except using callbacks). In React 16.3 createRef and forwardRef have been introduced for doing that, along with useRef hook later. Styled Components v4, has started to use that mechanism.
Therefore, you may use ref directly:
function App() {
const emailInput = useRef(null);
useEffect(() => {
if (emailInput.current) {
emailInput.current.focus();
}
}, []);
return (
<div>
<Input type="text" placeholder="Name" />
<Input type="email" placeholder="Email" ref={emailInput} />
</div>
);
}
On the other side, if the intent is only for focusing, as stated by #Andy, the autoFocus property may be a better choice:
function App() {
return (
<div>
<Input type="text" placeholder="Name" />
<Input type="email" placeholder="Email" autoFocus />
</div>
);
}
The React's autoFocus attribute is doing exactly the same thing as the code above (focus programmatically element on the mount). Do not confuse it with HTML's autofocus attribute, which behavior is inconsistent between browsers.