AutoFocus doesn't work in React - reactjs

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

Answer 2

Likely something else you are doing that is causing it to fail. It works fine in this simple example:
const App = React.createClass({
render() {
return (
<input
placeholder = "Name..."
type = "text"
autoFocus
/ >
);
}
});
ReactDOM.render( <
App / > ,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

For React function components when you get the error
Warning: Function components cannot be given refs. Attempts to access
this ref will fail. Did you mean to use React.forwardRef()?
import React, { useEffect, useRef } from 'react';
const InputField = () => {
const inputElement = useRef(null);
useEffect(() => {
inputElement.current?.focus();
}, []);
return (
<form action="...">
<input type="text" innerRef={inputElement} />
</form>
);
};
export default InputField;
If you use typescript and the compiler complains
Property 'focus' does not exist on type 'never'.ts(2339)
initialize inputElement with
const inputElement = useRef<HTMLInputElement>(null);

Answer 4

I had two Input's which I applied autoFocus to, one worked and the other didn't. They were both reactstrap Input fields:
import { Button, Input } from 'reactstrap';
I discovered that one had a type and no name, which was the one that worked. So I changed the other to be the same and it started working:
<Input
autoFocus="autofocus"
id="code"
type="text"
value={props.codeValue}
onChange={props.onCodeChange}
onKeyPress={event => {
if (event.key === 'Enter') {
confirmCode();
}
}}
/>

Answer 5

place that "autoFocus" infront of "input"
<input autoFocus type='text' ...others />
idk but this worked for me !

Answer 6

This is what worked for me on the functional react component as the autoFocus attribute did not work out of the box:
import React, { useCallback } from 'react';
const FeebackForm = () => {
const autoFocusFn = useCallback(element => (element ? element.focus() : null), []);
return (
<form action="...">
<input type="text" name="customerName" ref={autoFocusFn} />
</form>
);
};
export default FeebackForm;

Answer 7

If you're working on a conditional input component that appears post page is loaded on some user interaction, use react cleanup design to focus the input element.
jsx:
{ this.state.showInput && <input ref={ref => {this.inputRef = ref}} /> }
Class components:
this.setState({showInput: true},
() => {
this.inputRef && this.inputRef.focus()
}
)
Functional components:
useEffect(() => {
return () => {
this.inputRef && this.inputRef.focus()
}
}, [showInput])

Answer 8

If auto focus doesn't work for you then you can try using the .focus() function of javascript, which will always work :)
componentDidMount() {
document.getElementById("name").focus();
}
<input id="name" onChange={this.handleName} value={this.state.name} placeholder="Name..." type="text" autoFocus />