From 1d9e094bb02f85aac906d0b44c2105f43747d641 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 10 Sep 2024 15:05:45 +0200
Subject: [PATCH] Add backup timeout

---
 packages/components/src/modal/index.tsx  | 12 +++++++++++-
 packages/components/src/modal/style.scss |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 866402ee7e45df..b2513c4cded89f 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -39,6 +39,9 @@ import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
+// Animation duration (ms) extracted to JS in order to be used on a setTimeout.
+const FRAME_ANIMATION_DURATION = 260;
+
 // Used to track and dismiss the prior modal when another opens unless nested.
 type Dismissers = Set<
 	RefObject< ModalProps[ 'onRequestClose' ] | undefined >
@@ -215,6 +218,10 @@ function UnforwardedModal(
 			frameEl.addEventListener( 'animationend', onAnimationEnd, {
 				once: true,
 			} );
+			const animationTimeout = window.setTimeout( () => {
+				setIsAnimatingOut( false );
+				onRequestCloseRef.current?.( event );
+			}, FRAME_ANIMATION_DURATION );
 
 			return () => {
 				frameEl.removeEventListener( 'animationend', onAnimationEnd );
@@ -310,7 +317,10 @@ function UnforwardedModal(
 						sizeClass,
 						className
 					) }
-					style={ style }
+					style={ {
+						'--modal-frame-animation-duration': `${ FRAME_ANIMATION_DURATION }ms`,
+						...style,
+					} }
 					ref={ useMergeRefs( [
 						frameRef,
 						constrainedTabbingRef,
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index e8f2ad989f76d3..9e0584de240d7c 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -32,7 +32,7 @@
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
 	// Animate the modal frame/contents appearing on the page.
-	animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
+	animation: components-modal__appear-animation var(--modal-frame-animation-duration) cubic-bezier(0.29, 0, 0, 1);
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");