Autofocus on an input generated from button press

[jonohewitt]

I have a single input field for typing a search term which is only added to the DOM after interacting with a dedicated 'show search' button. I can't think of a reason why someone pressing on this button wouldn't want to then immediately focus on the input, but maybe I'm missing something! Please could you advise if the no-autofocus rule would still be valid here?

[ljharb]

Focusing on the input after a button click isn't "auto focus", that's an explicit focus. "Auto focus" means, automatically when the page loads.

[jonohewitt]

Got it, thanks very much! I'll disable the rule for these lines in that case.

[ljharb]

To be clear, you should not disable the rule - autofocus is for when the page loads.

[jonohewitt]

In this case I'm only mounting the input after the button is pressed, e.g:

const Nav = () => {
  const [searchIsActive, setSearchIsActive] = useState(false)
  return (
    <nav>
      <button onClick={() => setSearchIsActive(true)}>
        Show search
      </button>
      
      {searchIsActive && <SearchInput autoFocus/>}
    </nav>
  )
}

The search input isn't autofocussed on page load as it doesn't exist yet. After clicking the button, the input is created and is autofocussed. Would you still consider this an explicit focus?

[ljharb]

I would consider this a misuse of autofocus (altho realistically, this is a custom element, so the error is inside SearchInput and not this code). You should use a useRef, and a useEffect, and explicitly call .focus() on the element.

[jonohewitt]

The warning still shows here when using autoFocus as a prop. Another warning is thrown inside the component when it's actually used.

You should use a useRef, and a useEffect, and explicitly call .focus() on the element.

Isn't this basically what React is already doing? This issue discusses how autoFocus is implemented via polyfill with .focus() on mount, rather than passed as a DOM attribute. What would be the advantage of doing this explicitly?

[ljharb]

Fair point - that kind of calls into question this entire lint rule. @jessebeach?