diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx index 49bf100783bc08..eb19a2d41dd1da 100644 --- a/packages/components/src/modal/index.tsx +++ b/packages/components/src/modal/index.tsx @@ -136,14 +136,20 @@ function UnforwardedModal( const dismissers = useContext( context ); const isLevel0 = dismissers === level0Dismissers; + const nestedDismissers = useRef< typeof level0Dismissers >( [] ); // Updates the stack tracking open modals at this level and calls - // onRequestClose for the prior modal if applicable. + // onRequestClose for any prior and/or nested modals as applicable. useEffect( () => { dismissers.push( refOnRequestClose ); const [ first, second ] = dismissers; if ( second ) first?.current?.(); - return () => void dismissers.shift(); + + const nested = nestedDismissers.current; + return () => { + nested[ 0 ]?.current?.(); + dismissers.shift(); + }; }, [ dismissers ] ); // Adds/removes the value of bodyOpenClassName to body element. @@ -338,10 +344,8 @@ function UnforwardedModal( ); - const nextLevelDismissers = useRef( [] ); - return createPortal( - + { modal } , document.body