Monopolize open modal

WordPress · Sep 5, 2023 · df1e700 · df1e700
1 parent 9cd88e8
commit df1e700
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
@@ -35,8 +35,9 @@ import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 
-// Used to count the number of open modals.
+// Used to track and dismiss the prior modal when another opens.
 let openModalCount = 0;
+let dismissOpenModal: ModalProps[ 'onRequestClose' ];
 
 function UnforwardedModal(
 	props: ModalProps,
@@ -104,7 +105,10 @@ function UnforwardedModal(
 		if ( openModalCount === 1 ) {
 			ariaHelper.hideApp( ref.current );
 			document.body.classList.add( bodyOpenClassName );
+		} else if ( openModalCount > 1 ) {
+			dismissOpenModal();
 		}
+		dismissOpenModal = onRequestClose;
 
 		return () => {
 			openModalCount--;
@@ -114,7 +118,7 @@ function UnforwardedModal(
 				ariaHelper.showApp();
 			}
 		};
-	}, [ bodyOpenClassName ] );
+	}, [ bodyOpenClassName, onRequestClose ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {