mui / mui/material-ui

[material-ui][Modal] Bring back transition component in test that fails with React 19

Open
#43,312 0 comments 2 reactions 1 assignee View on GitHub

@aarongarciah is already working on this.

Since Aug 15, 2024.

scope: modal test
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

While upgrading to React 19 (PR), a Modal component test started to fail (failure example). The Modal is not unmounted. The component works as expected when tested manually, but the combination of Modal + Fade (and probably any other transition component) makes the test fail.

https://github.com/mui/material-ui/blob/d00b50e76cc7f81f93307d151ab72a2ea6407b4a/packages/mui-material/src/Modal/Modal.test.js#L590-L612

The issue linked in the comment above the test points to a PR where a fix was implemented for a bug with the backdrop staying open. The fix consisted on:

-const [exited, setExited] = React.useState(!open);
+const [exited, setExited] = React.useState(true);

This fix was lost in translation once Modal was migrated to use useModal from Base UI. Last year, a user reported the bug again.

Re-applying this fix solves the failing test, but breaks one Drawer component (which uses Modal under the hood) use case: when the Drawer is initially open, it won't run the exit animation the first time is closed.

Note: Using true as the initial state is the approach used across the codebase, with Modal being the only component using !open as the initial state.

We decided to remove the Fade component as child in the test to make it pass (see https://github.com/mui/material-ui/pull/42824), but we want to investigate further and bring it back.

Search keywords: modal, react 19, transition, test

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.