[material-ui][Modal] Bring back transition component in test that fails with React 19
@aarongarciah is already working on this.
Since Aug 15, 2024.
- 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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.