Textfield's autofocus in modal does not works with StrictMode and ReactDOM.createRoot
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
When switching to ReactDOM.createRoot
, opening a Dialog containing a TextField with autofocus
, the field is not focused.
Expected behavior 🤔
No response
Steps to reproduce 🕹
reproducer: reproducer : https://codesandbox.io/s/dreamy-kowalevski-8eu5fb?file=/src/index.js
Context 🔦
The Dialog + field
export default function App() {
const [openPopup, setOpenPopup] = useState(false);
return (
<>
<Button onClick={() => setOpenPopup(true)}>
Open Modal
</Button>
<Dialog open={openPopup}>
<DialogContent>
<TextField autoFocus />
</DialogContent>
</Dialog>
</>
);
}
When initializing the project with the previous version of react it worked. But react triggered the deprecation about switching to ReactDOM.createRoot
import { render } from "react-dom";
render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById("root")
);
When switching to ReactDOM.createRoot
it does not worked
ReactDOM.createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);
But, if I remove the StrictMode
, it work
ReactDOM.createRoot(document.getElementById("root")).render(
<App />
);
Your environment 🌎
`npx @mui/envinfo`
System:
OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
Binaries:
Node: 17.9.0 - /usr/bin/node
Yarn: 3.1.1 - /usr/local/bin/yarn
npm: 8.10.0 - /usr/bin/npm
Browsers:
Chrome: 102.0.5005.61
Firefox: 91.10.0esr
npmPackages:
@emotion/react: ^11.9.0 => 11.9.0
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.83
@mui/icons-material: ^5.8.2 => 5.8.2
@mui/material: ^5.8.2 => 5.8.2
@mui/private-theming: 5.8.0
@mui/styled-engine: 5.8.0
@mui/system: 5.8.2
@mui/types: 7.1.3
@mui/utils: 5.8.0
@types/react: ^18.0.10 => 18.0.10
react: ^18.1.0 => 18.1.0
react-dom: ^18.1.0 => 18.1.0
typescript: ^4.7.2 => 4.7.2
Issue Analytics
- State:
- Created a year ago
- Reactions:5
- Comments:8 (2 by maintainers)
Top Results From Across the Web
React: AutoFocus on Input field inside Modal - Stack Overflow
I want to focus in Input Field when user open the modal widnow. How i can do it in functional component? I try...
Read more >Support needed for focusing inputs in modals? #192 - GitHub
I have been unable to figure out how to automatically have an input receive focus in a popup modal dialog. The react ToDoMVC...
Read more >focus first error react on method Code Example
Answers related to “focus first error react on method”. react focus · autofocus react · How to set focus on an input field...
Read more >invalid hook call react router | The AI Search Engine You Control
I do not use hooks in my react application. The web app works fine without react bootstrap! To Reproduce. Steps to reproduce the...
Read more >Commit: 1aafc3b353a6933270a34cbfcaf450143c309c0c - luci (git ...
a/applications/luci-app-openclash/luasrc/model/cbi/openclash/settings.lua ... innerHTML = '<b><font><%:Note: It is not recommended to enable IPv6 and ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I ran into this same issue today. Maybe it’s related to https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state
You can swap the
<Textfield />
for a normal<input />
and get the same result.Here is the same sandbox without StrictMode, but with a double
setTimeout
that trigger the modal to open/hide/open quickly. It also breaks the autofocus. https://codesandbox.io/s/wandering-dust-vptu4u?file=/src/index.jsThe workaround does not work for me. Is it even possible to programmatically focus the
TextField
component?