[Dialog] disableRestoreFocus only way to enable nested focus

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Setting <Dialog disableRestoreFocus> seems to be the only way for an internal <TextField autoFocus> element to maintain focus after opening.

<Dialog disableRestoreFocus>
  <DialogContent>
    <TextField autoFocus label="WILL BE IN FOCUS" />
  </DialogContent>
</Dialog>

Additional testing notes:
It seems this only happens when using react=18 in <StrictMode>. react=17 in <StrictMode> and vanilla react=18 work as expected.

Expected behavior 🤔

I would expect either disableAutoFocus and/or disableEnforceFocus to allow for nested focusing, but they currently have no effect. This is problematic as disableRestoreFocus disables some additional accessibility I'd like to maintain.

<Dialog disableAutoFocus disableEnforceFocus>
  <DialogContent>
    <TextField autoFocus label="WILL NOT BE IN FOCUS" />
  </DialogContent>
</Dialog>

Steps to reproduce 🕹

I've created a demo here.

Steps:

1. Run npm start
2. Click <Button>Open<Button/>
3. <TextField> will no be highlighted unless <Dialog disableRestoreFocus> is set.

Context 🔦

No response

Your environment 🌎

  System:
    OS: macOS 12.4
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: Not Found
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Edge: Not Found
    Firefox: 102.0
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3
    @emotion/styled: ^11.9.3 => 11.9.3
    @mui/base:  5.0.0-alpha.87
    @mui/material: ^5.8.6 => 5.8.6
    @mui/private-theming:  5.8.6
    @mui/styled-engine:  5.8.0
    @mui/system: ^5.8.6 => 5.8.6
    @mui/types:  7.1.4
    @mui/utils:  5.8.6
    @types/react:  18.0.14
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript:  4.7.4