[dialog] Allow preventing `Dialog.Close` onClick when animation is in progress
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
If the close animation for a dialog is long, it would be nice to have an easy way to prevent the Close button's onClick from happening multiple times
[Stackblitz reproduction](https://stackblitz.com/edit/vitejs-vite-zpayd3qq?file=package.json,src%2FApp.tsx,src%2FApp.css,src%2Findex.css)
## Examples in other libraries
It seems like other libraries like Ant design and [MUI](https://stackblitz.com/edit/spkfu75y?file=src%2FDemo.tsx) have the same issue. However, it seems like MUI moves focus back to the trigger immediately (not waiting for the animation to finish), which makes this only an issue when using the mouse, not the keyboard.
## Motivation
I believe in most cases, if some work is done when the close/submit button of a dialog is pressed, you wouldn't want to do it twice back-to-back. For example, submitting a form with a network request. If a user double-clicks with a mouse or keyboard, I would expect it to behave as if they clicked the button once. This could be done by ignoring the onClick event if an animation is in progress, or providing the state of the animation to the render function of `Dialog.Close`.
It is possible to work around this by keeping track of isAnimating ourself (using onOpenChange and onOpenChangeComplete) or keeping track of if the button has already been pressed.
Contributor guide
Assessment
This issue has not been assessed yet.