[Dialog] dialog dom not removed after end animation with React router v7

[diginikkari]

Steps to reproduce

Issue is hard to reproduce, but I thought that it still best to submit this, incase someone else has the same problem. At least then there is some information available.

Issue started occuring after we upgraded to react router v7, no any other changes. I have not been able to reproduce this locally, it started failing in our e2e test in CI. Same tests are passing locally. It also sometimes passes in CI so it seems to be some timing related.

Current behavior

In some unknown cases when dialog is closed, the dialog dom is not removed but it still mounted with opacity 0 and it blocks mouse clicks and scroll.

Expected behavior

After dialog is closed open=false and transition is ended, dialog should be removed from dom.

Context

We had similar issue earlier in some cases when there were react suspense used with Dialog component. Now we don't use any suspense behaviour, but the end issue is same. Issue occured after we upgraded to react router v7. Some other issues I bumped while investigating, which might bring some context are:

reactjs/react-transition-group#817
remix-run/react-router#10567

Dialog open state is controlled by useState. Dialog close callback is setting state to false, and setting some useSearchParams based on values returned from the close callback.

When I set the transitionDuration={0} in Dialog component, issue didn't occur. But as I mentioned this is very flaky issue, so it could also be just lucky guess.

Your environment

System: OS: macOS 15.1.1 Binaries: Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm pnpm: 9.10.0 - ~/.nvm/versions/node/v20.18.0/bin/pnpm Browsers: Chrome: 131.0.6778.205 Edge: Not Found Safari: 18.1.1 npmPackages: @emotion/react: 11.14.0 => 11.14.0 @emotion/styled: 11.14.0 => 11.14.0 @mui/icons-material: ^6.3.0 => 6.3.0 @mui/lab: 6.0.0-beta.21 => 6.0.0-beta.21 @mui/material: ^6.3.0 => 6.3.0 @mui/x-data-grid: ^7.23.4 => 7.23.4 @mui/x-date-pickers: ^7.23.3 => 7.23.3 @mui/x-tree-view: ^7.23.2 => 7.23.2 @types/react: 18.3.12 => 18.3.12 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: 5.7.2 => 5.7.2

Browser used in e2e is Chromium

Search keywords: dialog, react router v7