Textfield's autofocus in modal does not works with StrictMode and ReactDOM.createRoot

Duplicates

• 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 

[kroyee]

I ran into this same issue today. Maybe it’s related to https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

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.js

[RadoslavK]

The workaround does not work for me. Is it even possible to programmatically focus the TextField component?