search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.75k stars 32.24k forks source link

[material-ui][Text Field] `autoFocus` prop not working consistently with a Next.js App Router project #40397

Open aayush-makwana opened 9 months ago

aayush-makwana commented 9 months ago

Search keywords

TextField, autoFocus, NextJs, App Router

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 commented 9 months ago

Is this related to https://github.com/vercel/next.js/discussions/17213?

aayush-makwana commented 9 months ago

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 commented 9 months ago

@aayush-makwana Did you try testing after deploying the build as mentioned in https://github.com/vercel/next.js/discussions/17213#discussioncomment-591492?

aayush-makwana commented 8 months ago

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.