DEV Community

Discussion on: The neatest way to handle alert dialogs in React 🥰

Collapse
 
onderonur profile image
Onur Önder

This is actually a really cool way to handle confirmations. The only minor problem is, when you press "agree" or "cancel", dialog content disappears just before the exit animation of the dialog completes. It creates some sort of a flickering effect. You need to watch carefully to see it, but if your exit animation duration is higher, you will end up with an empty dialog slowly fading away :)

Other than that, real cool way for confirmations and simple info dialogs!

Collapse
 
sarat12 profile image
Taras Dymkar

Yeah, I'm not sure but looks like to solve this issue you need to reset confirmationState on material-ui`s Dialog onExited callback. And on close/submit just set "open" prop to false.

Collapse
 
sarat12 profile image
Taras Dymkar

So here is the fix of "flickering" effect which was caused by resetting the state before dialog is faded out.