[Dialog] v5 component renders even if `open` is false (different from v4)

[sahanaravi]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:
MUI5 - https://codesandbox.io/s/angry-mclaren-vgmhu6?file=/demo.tsx
1.Embed a Dialog in the code
2.Set it to open={false}
3.The dialog still renders in the DOM but is closed

MUI4- https://codesandbox.io/s/material-demo-forked-qm3dub?file=/demo.js
1.Embed a Dialog in the code
2.Set it to open={false}
3.The dialog does not render in the DOM

This has not been mentioned in the changes in the MUI5 document. This is breaking a few things in my app

Current behavior 😯

1.Embed a Dialog in the code
2.Set it to open={false}
3.The dialog still renders but is closed

Expected behavior 🤔

1.Embed a Dialog in the code
2.Set it to open={false}
3.The dialog should not render

Context 🔦

ON upgrading from MUI4 to MUI5, the dialog behaviour changed causing issues

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mj12albert]

@sahanaravi Thanks for reporting this, I think we could document this more clearly

Would you mind sharing more on how this change affects your app ?

[sahanaravi]

I have a dialog that is on a page and when I close it and then navigate to another page and use browser back button to come back to the page having the dialog, the page freezes and I realized it is because of this issue. It worked fine before migration. I added conditions around the modal and that fixed the problem, but that conditional rendering was not needed in V4

[gkielwasser]

I have an issue which seems quite similar (if not the same). It affects my app since I have migrated my app to react 18. Also I use mui v5.

I can only reproduce it from a mobile, not from desktop. Also I cannot reproduce it in a deterministic way. I could reproduce it on Android and iOS on Chrome browser. I have multiple dialogs in my app, all are not affected by this issue. So far I have no clue on how to give a sanbbox to reproduce this issue.

Issue: the dialog keeps rendering randomly even if the open props is falsy. The app with such a bug will becomes unresponsive because the dialog will still be rendered with a 0 opacity container that is covering the whole app.

Waiting for the reason and a solution, I have also put a condition to avoid rendering the dialog while it shouldn't. This hack will of course breaks the modal animation, specially the close one.

 {show && <Dialog open={show}></Dialog>}

Similar: #33748 #32286