Closed CampbellOwen closed 2 months ago
This does work if Suspense is a child of DialogSurface
instead of a wrapping control for both the trigger + content.
@layershifter since I heard you already may have looked at this -- is this a valid format for Dialog's children? We do have this console warning, but it only appears if the number of children is wrong, and not if the children themselves don't have a ref 😅:
console.warn(/* #__DE-INDENT__ */ `
@fluentui/react-dialog [useDialog]:
Dialog must contain at least one child <DialogSurface/>,
and at most two children <DialogTrigger/> <DialogSurface/> (in this order).
`);
I mentioned this to @smhigley offline, but the partner team where this is a "regression" does have exactly 2 children in the Dialog, but they're both React.Suspense
so they haven't been seeing that warning.
Interested in this fix ;)
As a workaround, wrap just the child of DialogSurface
with the Suspense as smhigley suggested.
As a workaround, wrap just the child of DialogSurface with the Suspense as smhigley suggested.
The workaround doesn't really work as DialogTrigger is never shown.
Library
React Components / v9 (@fluentui/react-components)
System Info
Are 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 ofreact-motion
means the child element must accept a ref. If you wrap all the usual Dialog children elements withReact.Suspense
(which does not accept aref
, there are errors renderingExpected 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
Requested priority
High
Products/sites affected
Loop
Are you willing to submit a PR to fix?
no
Validations