[Dialog] disableRestoreFocus only way to enable nested focus

[kellengreen]

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 🌎

npx @mui/envinfo

  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

[michaldudak]

This may be caused by React running effects twice in strict mode. This doesn't happen when you run the app in production mode, so it's just an inconvenience during development (please correct me if it's not the case for you).