Add backup timeout

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,

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");