[Feature]: It would be great if the Dialog component supported a parameter like "onClose". #31129
Open
1 task done
Labels
Fluent UI react-components (v9)
Needs: Discussion
Status: Blocked
Resolution blocked by another issue
Type: Feature
Library
React Components / v9 (@fluentui/react-components)
Describe the feature that you would like added
Hello Fluent UI team,
I'm using the Fluent UI and I love it. Recently there was a situation in a project I'm working on, it's something like this sample: https://stackblitz.com/edit/urlkjp.
In the demo sample, if you select a product, wait ~2 seconds for it to finish loading the product descriptions, then click "Close", the dialog starts closing as normal, but at the moment it is fading out, we can see it has a flickering. Here is my screen recording of the slowed down what happened to easier show what I mean:
mpv_Q2lhAjOpqZ.mp4
The reason is in the file
ProductListDialog.tsx
, at line 41, thecleanUp()
is called at the moment the dialog is fading out, it means the dialog is not closed completely yet, until the CSS animation finishes.I think it would be better if the
Dialog
component supported a parameter likeonClose: () => void
. TheonClose
should be called when the dialog is completely closed, including the CSS animation. So I can assign mycleanUp
to this param to avoid the flickering.One workaround I found is, I can create a new below component and use it instead of the original
DialogSurface
, then I can assigncleanUp
toonDialogClosed
:Here is a demo for it: https://stackblitz.com/edit/urlkjp-nlnoaz.
Have you discussed this feature with our team
No response
Additional context
No response
Validations
Priority
None
The text was updated successfully, but these errors were encountered: