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

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

place that "autoFocus" infront of "input"

<input autoFocus type='text' ...others />

idk but this worked for me !

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

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 6

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 />