fix(modal): cleaning up some repetitive code, adding links for test pages, caching page parent to prevent excessive searching

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -100,6 +100,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private parentRemovalObserver?: MutationObserver;
   // Cached original parent from before modal is moved to body during presentation
   private cachedOriginalParent?: HTMLElement;
+  // Cached ion-page ancestor for child route passthrough
+  private cachedPageParent?: HTMLElement | null;
 
   lastFocus?: HTMLElement;
   animation?: Animation;
@@ -778,7 +780,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
    * passthrough on child route page wrappers and nested router outlets.
    */
   private setupChildRoutePassthrough() {
-    const pageParent = this.getOriginalPageParent();
+    // Cache the page parent for cleanup
+    this.cachedPageParent = this.getOriginalPageParent();
+    const pageParent = this.cachedPageParent;
 
     // Skip ion-app (controller modals) and pages with other content (inline modals)
     if (!pageParent || pageParent.tagName === 'ION-APP') {
@@ -827,7 +831,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
    * Removes passthrough styles added by setupChildRoutePassthrough.
    */
   private cleanupChildRoutePassthrough() {
-    const pageParent = this.getOriginalPageParent();
+    const pageParent = this.cachedPageParent;
     if (!pageParent) {
       return;
     }
@@ -839,6 +843,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
       routerOutlet.style.removeProperty('pointer-events');
       routerOutlet.removeAttribute('data-overlay-passthrough');
     }
+
+    // Clear the cached reference
+    this.cachedPageParent = undefined;
   }
 
   private sheetOnDismiss() {

core/src/utils/overlays.ts

@@ -38,6 +38,20 @@ let lastId = 0;
 
 export const activeAnimations = new WeakMap<OverlayInterface, Animation[]>();
 
+type OverlayWithFocusTrapProps = HTMLIonOverlayElement & {
+  focusTrap?: boolean;
+  showBackdrop?: boolean;
+  backdropBreakpoint?: number;
+};
+
+/**
+ * Determines if the overlay's backdrop is always active (no background interaction).
+ * Returns false if showBackdrop=false or backdropBreakpoint > 0.
+ */
+const isBackdropAlwaysActive = (el: OverlayWithFocusTrapProps): boolean => {
+  return el.showBackdrop !== false && !((el.backdropBreakpoint ?? 0) > 0);
+};
+
 const createController = <Opts extends object, HTMLElm>(tagName: string) => {
   return {
     create(options: Opts): Promise<HTMLElm> {
@@ -539,16 +553,9 @@ export const present = async <OverlayPresentOptions>(
    * view container subtree, skip adding aria-hidden/inert there
    * to avoid disabling the overlay.
    */
-  const overlayEl = overlay.el as HTMLIonOverlayElement & {
-    focusTrap?: boolean;
-    showBackdrop?: boolean;
-    backdropBreakpoint?: number;
-  };
+  const overlayEl = overlay.el as OverlayWithFocusTrapProps;
   const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-  // Only lock out root content when backdrop is always active. Developers relying on
-  // showBackdrop=false or backdropBreakpoint expect background interaction at some point.
-  const backdropAlwaysActive = overlayEl.showBackdrop !== false && !((overlayEl.backdropBreakpoint ?? 0) > 0);
-  const shouldLockRoot = shouldTrapFocus && backdropAlwaysActive;
+  const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysActive(overlayEl);
 
   overlay.presented = true;
   overlay.willPresent.emit();
@@ -685,21 +692,12 @@ export const dismiss = async <OverlayDismissOptions>(
    * is dismissed.
    */
   const overlaysLockingRoot = presentedOverlays.filter((o) => {
-    const el = o as HTMLIonOverlayElement & {
-      focusTrap?: boolean;
-      showBackdrop?: boolean;
-      backdropBreakpoint?: number;
-    };
-    const backdropAlwaysActive = el.showBackdrop !== false && !((el.backdropBreakpoint ?? 0) > 0);
-    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && backdropAlwaysActive;
+    const el = o as OverlayWithFocusTrapProps;
+    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysActive(el);
   });
-  const overlayEl = overlay.el as HTMLIonOverlayElement & {
-    focusTrap?: boolean;
-    showBackdrop?: boolean;
-    backdropBreakpoint?: number;
-  };
-  const backdropAlwaysActive = overlayEl.showBackdrop !== false && !((overlayEl.backdropBreakpoint ?? 0) > 0);
-  const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && backdropAlwaysActive;
+  const overlayEl = overlay.el as OverlayWithFocusTrapProps;
+  const locksRoot =
+    overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysActive(overlayEl);
 
   /**
    * If this is the last visible overlay that is trapping focus

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -100,6 +100,11 @@
         Modal Dynamic Wrapper Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/modal-child-route">
+      <ion-label>
+        Modal Child Route Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/programmatic-modal">
       <ion-label>
         Programmatic Modal Test

packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx

@@ -64,6 +64,10 @@ const OverlayHooks: React.FC<OverlayHooksProps> = () => {
           <IonIcon icon={star} />
           <IonLabel>Modal Teleport</IonLabel>
         </IonTabButton>
+        <IonTabButton tab="modalSheetChildRoute" href="/overlay-components/modal-sheet-child-route/child">
+          <IonIcon icon={star} />
+          <IonLabel>Sheet Child</IonLabel>
+        </IonTabButton>
         <IonTabButton tab="picker" href="/overlay-components/picker">
           <IonIcon icon={logoIonic} />
           <IonLabel>Picker</IonLabel>