Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AutoFocus doesn't work in React

Tags:

reactjs

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 />
like image 773
John Bra Avatar asked Mar 24 '18 08:03

John Bra


People also ask

Why autofocus is not working in React?

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.

How do you use autofocus in React?

Autofocusing using React useRef() and useEffect() Hooks We can also get the same functionality with the useRef() and useEffect() React Hooks. Here is the same form using these Hooks: import React, { useRef, useEffect } from "react"; const Form = () => { const emailInput = useRef(null); useEffect(() => { if (emailInput.

Is autofocus bad for accessibility?

Autofocus can create confusion, especially for screenreader users, by moving them to a form field without permission or context. When the page <input> includes other content, or when the input field isn't the primary purpose of the page, it's best practice to let visitors choose to fill out a form.

How do you focus on first field form in React?

To access this, we need to use a current keyword like inputRef. current, and as we have to tell React to focus on this, we can just use focus() method inside the useEffect Hook. Every time you refresh the page or open it in a new tab, you will notice that the input field will always be focused.


1 Answers

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 🤔

input with autofocus rendered enter image description here

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

autofocus to this input when page loads

like image 199
Mark Avatar answered Sep 20 '22 05:09

Mark