Dialog not closing in strict mode

[Digitaalne]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/vitejs-vite-dm98uemk?file=src%2FApp.tsx
2. Wait two seconds, you can see that second dialog closes and now the first dialog is visible. Refresh if you want to see it again.

Current behavior

In strict mode the dialog that is opened by first useEffect run is not closed by code in return () => {}, because dialog cannot be found.

Stacktrace

Uncaught (in promise) Invariant Violation: dialog not found at invariant12 (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/@toolpad_core.js?v=af6619a5:149:19) at closeDialog2 (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/@toolpad_core.js?v=af6619a5:1349:35) at Object.close (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-IZZR5UYH.js?v=77fa3ddb:10836:21) at https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/src/App.tsx?t=1747815315572:30:15 at react-stack-bottom-frame (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=6db21c61:17482:13) at runWithFiberInDEV (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=6db21c61:1483:72) at commitHookEffectListUnmount (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=6db21c61:8500:117) at commitHookPassiveUnmountEffects (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=6db21c61:8519:60) at disconnectPassiveEffect (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=6db21c61:10208:13) at recursivelyTraverseDisconnectPassiveEffects (https://vitejsvitedm98uemk-pgrs--5173--4d9fd228.local-corp.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=6db21c61:10201:11)

Expected behavior

I would assume that first dialog could be found and it will be closed, so that I can also open dialogs in useEffect in React Strict mode.

Context

I am actually building a thing, where dialog open/closes based on websocket status (open,closed etc.) and user is not able to open/close the dialog itself. In Production build I would have no problems, but for developing we use strict mode and disabling it is out of question. While developing that part of page becomes unreachable, because the first dialog is never closed. The double dialog is opened, because useEffect in strict mode is triggered two times.

Also, I am not very sure that is actually a bug. This may really be my inexperience that dialogs should be handled in another way or something from my code is missing, that should be there.

Also I found temporary solution if I close dialog with delay then everything is okay.

Your environment

npx @mui/envinfo

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (136.0.3240.64)
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.0 => 11.14.0
@mui/core-downloads-tracker: 7.1.0
@mui/icons-material: ^7.1.0 => 7.1.0
@mui/material: ^7.1.0 => 7.1.0
@mui/private-theming: 7.1.0
@mui/styled-engine: 7.1.0
@mui/system: 7.1.0
@mui/types: 7.4.2
@mui/utils: 7.1.0
@mui/x-data-grid: 8.3.1
@mui/x-data-grid-pro: ^8.3.1 => 8.3.1
@mui/x-date-pickers: ^8.3.1 => 8.3.1
@mui/x-internals: 8.3.1
@mui/x-license: 8.3.1
@mui/x-telemetry: 8.3.1
@mui/x-tree-view: ^8.3.1 => 8.3.1
@toolpad/core: ^0.15.0 => 0.15.0
@toolpad/utils: 0.15.0
@types/react: ^19.1.4 => 19.1.4
react: 19.0.0 => 19.0.0
react-dom: 19.0.0 => 19.0.0
typescript: ^5.8.3 => 5.8.3

Search keywords: Dialog Invariant Violation Close Strict

[bharatkashyap]

The cleanup runs immediately and the dialog hasn't mounted (due to the load transition animation) yet. Setting a timeout in the cleanup to let the dialog mount first is fine, this should be the intended behaviour.

Correct me if I'm wrong @Janpot

[Janpot]

Fixing it in #4973, You can verify with https://stackblitz.com/edit/vitejs-vite-oso4in6r?file=src%2FApp.tsx,package.json

Make sure to call setTimeout in an effect:

useEffect(() => {
  const timeout = setTimeout(() => {
    if (dialogRef.current) {
      dialogs.close(dialogRef.current, undefined);
      dialogRef.current = null;
    }
  }, 2000);
  return () => clearTimeout(timeout);
});

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.