Open aayush-makwana opened 9 months ago
Is this related to https://github.com/vercel/next.js/discussions/17213?
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.
@aayush-makwana Did you try testing after deploying the build as mentioned in https://github.com/vercel/next.js/discussions/17213#discussioncomment-591492?
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.
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 theautoFocus
prop in a Next.JS App Router project, the autofocus feature does not work as expected.TextField
is not focused upon the initial page load or when the page is refreshed.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 theautoFocus
prop to consistently focus on the input element under the following scenarios:This consistency in autofocus behavior is crucial for a smoother user experience in our Next.JS App Router project.
Context
No response
Your environment
``` 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 ```npx @mui/envinfo