[Text Field] `autoFocus` prop not working consistently in Next.js

[aayush-makwana]

Search keywords

TextField, autoFocus, NextJs, App Router

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example: https://codesandbox.io/p/devbox/ecstatic-boyd-js7l82

Current behavior

When using the TextField component with the autoFocus prop in a Next.JS App Router project, the autofocus feature does not work as expected.

1. The TextField is not focused upon the initial page load or when the page is refreshed.
2. However, the autoFocus feature works correctly when there is a tab change in the browser window or when navigating between pages within the app.

Expected behavior

We expect the TextField with the autoFocus prop to consistently focus on the input element under the following scenarios:

1. On the initial page load.
2. When the page is refreshed.
3. When navigating between pages within the app.
4. When there is a tab change in the browser window.

This consistency in autofocus behavior is crucial for a smoother user experience in our Next.JS App Router project.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD 
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD  
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.91)
  npmPackages:
    @emotion/react: latest => 11.11.3
    @emotion/styled: latest => 11.11.0
    @mui/base:  5.0.0-beta.29
    @mui/core-downloads-tracker:  5.15.2
    @mui/icons-material: latest => 5.15.2
    @mui/material: latest => 5.15.2
    @mui/private-theming:  5.15.2
    @mui/styled-engine:  5.15.2
    @mui/system:  5.15.2
    @mui/types:  7.2.11
    @mui/utils:  5.15.2
    @types/react: latest => 18.2.46
    react: latest => 18.2.0
    react-dom: latest => 18.2.0
    typescript: latest => 5.3.3

[ZeeshanTamboli]

Is this related to vercel/next.js#17213?

[aayush-makwana]

Hey @ZeeshanTamboli,

Thank you for your response. I appreciate your insight into the issue. I have indeed tested the MUI TextField component with various configurations, including Vite, CRA, Next.js (with page router), and even Next.js version 13.3.2.

Unfortunately, it appears that the issue is specific to the Next.js environment, occurring in both the Page and App router directories.

[ZeeshanTamboli]

@aayush-makwana Did you try testing after deploying the build as mentioned in vercel/next.js#17213 (comment)?

[aayush-makwana]

Hey @ZeeshanTamboli,

Thank you for your response. I did what you suggested and tested the build.

Unfortunately, the problem with the TextField component’s autoFocus behavior still occurs sometimes, even after making a build and running it using the next start command. It’s weird because this problem doesn’t occur with Next.js page routing. So, it seems like there might be another issue causing this in Next.js app routing.

Any further insights or suggestions you could offer would be greatly appreciated.