mui / mui/base-ui

[dialog] Allow preventing `Dialog.Close` onClick when animation is in progress

Open
#3,153 2 comments 0 reactions 0 assignees View on GitHub
component: dialog has workaround
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.