Cannot use autofocus?

[nkgrnkgr]

Bug report

I cannot use autofocus by using next.js

Describe the bug

I want the page to autofocus on an input element when it loads, but it doesn't work

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. npx create-next-app app
2. cd app
3. yarn dev
4. write code

<input type="text" autoFocus />

5. access localhost:3000 and watch the input

Expected behavior

Autofoucs input when page was loaded.

Screenshots

System information

• OS: macOS 10.15.6
• Browser chrome 85.0.4183.102

  "dependencies": {
    "next": "9.5.3",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }

• node.js v14.7.0

[subha-sfcu]

Any update on this issue?

[nkgrnkgr]

Not solved yet.

[ivan-kleshnin]

Maybe posting this as an issue (not a discussion) will draw more attention?

[leerob]

This one tripped me up - when using next dev, it wasn't working as I'd expect (must be due to the browser not thinking it's a fresh page load with Fast Refresh, maybe?). When I ran next build && next start and also when deployed to prod, it worked!

[leerob]

You can also use React to set a ref and then call .focus() to programmatically focus after the first page load.

[ivan-kleshnin]

Just for the record, I often noticed that Autofocus feature doesn't work with opened devtools in Chrome.

[ypresto]

It (without .focus()) just works on macOS Safari 14.1.2, but not on Chrome (incl. canary 95.0.4635.2) nor Firefox 89.0.2.

[dsacramone]

I am seeing this issue in "build" mode. Any ideas? Input is losing focus when in build mode. Dev mode is fine.