Updating container ref while closing Dialog causes unclickable DOM

[s-fletcher]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/github-zzhrmfxa?file=src%2FApp.tsx
2. Set container to some populated containerRef.current
3. While closing dialog, set containerRef.current = null
4. Try to click something within the DOM

Current behavior

Dialog's backdrop stays open, preventing any clicking on DOM. Requires a page refresh (or state update) to fix issue.

Expected behavior

Dialog should close properly and allow clicks on DOM.

Current solution

Add a key to the dialog that changes when the open state changes

<Dialog open={isOpen} key={isOpen ? "open" : "closed"} />

Context

In my scenario, I have a list of items where a drawer will open upon clicking.

example

CleanShot.2025-04-04.at.17.03.45.mp4

A dialog, controlled by a context, sits on top of all of this. The dialog's container should be the currently opened drawer. I control this by some containerRef attached to the Paper of the drawer.

When an item is deleted, the container is removed from the DOM. Therefore the ref no longer has an element and is set to null, causing the bug.

Your environment

npx @mui/envinfo

I've only tested this on Chrome. Code Sandbox is using latest MUI (7.0.1 as of now)

System:
    OS: macOS 15.4
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.8.3 - ~/GitHub/apricot/node_modules/.bin/npm
    pnpm: 8.8.0 - ~/.nvm/versions/node/v22.11.0/bin/pnpm
  Browsers:
    Chrome: 134.0.6998.167
    Edge: Not Found
    Safari: 18.4
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.4.3 
    @mui/icons-material: ^6.4.3 => 6.4.3 
    @mui/material: ^6.4.3 => 6.4.3 
    @mui/private-theming:  6.4.3 
    @mui/styled-engine:  6.4.3 
    @mui/system:  6.4.3 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.3 
    @mui/x-data-grid:  7.18.0 
    @mui/x-data-grid-pro: ^7.18.0 => 7.18.0 
    @mui/x-date-pickers: ^7.18.0 => 7.18.0 
    @mui/x-date-pickers-pro: ^7.18.0 => 7.18.0 
    @mui/x-internals:  7.18.0 
    @mui/x-license:  7.18.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @mui/x-tree-view: ^7.18.0 => 7.18.0 
    @mui/x-tree-view-pro: ^7.18.0 => 7.18.0 
    @types/react: 19.0.10 => 19.0.10 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.8.2 => 5.8.2 

Search keywords: container, ref, dialog, closing, null, persists backdrop, does not close

[siriwatknp]

This is expected because updating the ref won't trigger React rerendering.

Is there a reason to remove the container? controlling the open state should be enough for common use cases.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.