search

reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.15k stars 650 forks source link

rootRef.current.contains error on a TrapFocus component when using Transition in project with react 18 and MUI v5? #843

Open sshakyaUR opened 2 years ago

sshakyaUR commented 2 years ago

CodeSandbox sample project: https://codesandbox.io/s/wizardly-pare-gx08dc

When I have a <Transition> inside a MUI <Modal>, I get a rootRef.current.contains is not a function on a TrapFocus.js file.

This happened after I migrated a project from Material-UI v4 to MUI v5 and react from 16 to 18.

Package versions:

"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-transition-group": "^4.4.2"
sshakyaUR commented 2 years ago

K, turns out I need to wrap the Transition component in a div, but I don't know what that fixes this issue.