[Bug]: react-dialog breaking changes to type of children #31808
Description
Library
React Components / v9 (@fluentui/react-components)
System Info
System:
OS: macOS 14.5
CPU: (14) arm64 Apple M3 Max
Memory: 93.72 MB / 36.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 126.0.6478.115
Edge: 126.0.2592.68
Safari: 17.5Are you reporting Accessibility issue?
no
Reproduction
https://stackblitz.com/edit/zekrtd?file=src%2Fexample.tsx
Bug Description
Actual Behavior
When using a Dialog component, the new addition of react-motion means the child element must accept a ref. If you wrap all the usual Dialog children elements with React.Suspense (which does not accept a ref, there are errors rendering
Expected Behavior
This change in behaviour should either be a breaking change, or re-enable the previous behaviour of allowing children which do not accept a ref.
Logs
chunk-MDTLSHSV.js?v=9f4e6bb3:19411
Uncaught
Error: @fluentui/react-motion: Invalid child element.
Motion factories require a single child element to be passed. That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().
at getChildElement (@fluentui_react-comp…?v=9f4e6bb3:59258:9)
at Presence (@fluentui_react-comp…v=9f4e6bb3:59364:19)
at renderWithHooks (chunk-MDTLSHSV.js?v=9f4e6bb3:11546:26)
at mountIndeterminateComponent (chunk-MDTLSHSV.js?v=9f4e6bb3:14924:21)
at beginWork (chunk-MDTLSHSV.js?v=9f4e6bb3:15912:22)
at beginWork$1 (chunk-MDTLSHSV.js?v=9f4e6bb3:19751:22)
at performUnitOfWork (chunk-MDTLSHSV.js?v=9f4e6bb3:19196:20)
at workLoopSync (chunk-MDTLSHSV.js?v=9f4e6bb3:19135:13)
at renderRootSync (chunk-MDTLSHSV.js?v=9f4e6bb3:19114:15)
at recoverFromConcurrentError (chunk-MDTLSHSV.js?v=9f4e6bb3:18734:28)
getChildElement @ @fluentui_react-comp…js?v=9f4e6bb3:59258
Presence @ @fluentui_react-comp…js?v=9f4e6bb3:59364
renderWithHooks @ chunk-MDTLSHSV.js?v=9f4e6bb3:11546
mountIndeterminateComponent @ chunk-MDTLSHSV.js?v=9f4e6bb3:14924
beginWork @ chunk-MDTLSHSV.js?v=9f4e6bb3:15912
beginWork$1 @ chunk-MDTLSHSV.js?v=9f4e6bb3:19751
performUnitOfWork @ chunk-MDTLSHSV.js?v=9f4e6bb3:19196
workLoopSync @ chunk-MDTLSHSV.js?v=9f4e6bb3:19135
renderRootSync @ chunk-MDTLSHSV.js?v=9f4e6bb3:19114
recoverFromConcurrentError @ chunk-MDTLSHSV.js?v=9f4e6bb3:18734
performConcurrentWorkOnRoot @ chunk-MDTLSHSV.js?v=9f4e6bb3:18682
workLoop @ chunk-MDTLSHSV.js?v=9f4e6bb3:195
flushWork @ chunk-MDTLSHSV.js?v=9f4e6bb3:174
performWorkUntilDeadline @ chunk-MDTLSHSV.js?v=9f4e6bb3:382Requested priority
High
Products/sites affected
Loop
Are you willing to submit a PR to fix?
no
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.