fix(modal): allow interaction with parent content when sheet modal has showBackdrop=false in child routes

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -644,7 +644,14 @@ export class Modal implements ComponentInterface, OverlayInterface {
       window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
     }
 
-    if (this.isSheetModal) {
+    /**
+     * Recalculate isSheetModal here because framework bindings (e.g., Angular)
+     * may not have been applied when componentWillLoad ran.
+     */
+    const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
+    this.isSheetModal = isSheetModal;
+
+    if (isSheetModal) {
       this.initSheetGesture();
     } else if (hasCardModal) {
       this.initSwipeToClose();
@@ -753,6 +760,21 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.moveSheetToBreakpoint = moveSheetToBreakpoint;
 
     this.gesture.enable(true);
+
+    /**
+     * When showBackdrop or focusTrap is false, the modal's original parent may
+     * block pointer events after the modal is moved to ion-app. Disable
+     * pointer-events on the parent elements to allow background interaction.
+     * See https://github.com/ionic-team/ionic-framework/issues/30700
+     */
+    if ((this.showBackdrop === false || this.focusTrap === false) && this.cachedOriginalParent) {
+      this.cachedOriginalParent.style.setProperty('pointer-events', 'none');
+
+      const immediateParent = this.cachedOriginalParent.parentElement;
+      if (immediateParent?.tagName === 'ION-ROUTER-OUTLET') {
+        immediateParent.style.setProperty('pointer-events', 'none');
+      }
+    }
   }
 
   private sheetOnDismiss() {
@@ -862,6 +884,17 @@ export class Modal implements ComponentInterface, OverlayInterface {
       }
       this.cleanupViewTransitionListener();
       this.cleanupParentRemovalObserver();
+
+      /**
+       * Clean up pointer-events changes made in initSheetGesture.
+       */
+      if (this.cachedOriginalParent) {
+        this.cachedOriginalParent.style.removeProperty('pointer-events');
+        const immediateParent = this.cachedOriginalParent.parentElement;
+        if (immediateParent?.tagName === 'ION-ROUTER-OUTLET') {
+          immediateParent.style.removeProperty('pointer-events');
+        }
+      }
     }
     this.currentBreakpoint = undefined;
     this.animation = undefined;

packages/angular/test/base/e2e/src/standalone/modal-child-route.spec.ts

@@ -1,63 +1,37 @@
 import { expect, test } from '@playwright/test';
 
 /**
- * Tests for INLINE sheet modals in child routes with showBackdrop=false.
- *
- * Related issue: https://github.com/ionic-team/ionic-framework/issues/30700
- *
- * This test mimics the EXACT structure from the issue reproduction:
- * - PARENT component has interactive content (buttons) AND a nested ion-router-outlet
- * - CHILD route (rendered in that nested outlet) contains ONLY the modal
- * - The modal has showBackdrop=false
- *
- * The bug: when the modal opens in the child route, the buttons in the PARENT
- * become non-interactive even though showBackdrop=false should allow interaction.
- *
- * DOM structure:
- * - ion-app > ion-router-outlet (root) > PARENT (buttons + nested outlet) > ion-router-outlet > CHILD (modal only)
+ * Tests for sheet modals in child routes with showBackdrop=false.
+ * Parent has buttons + nested outlet; child route contains only the modal.
+ * See https://github.com/ionic-team/ionic-framework/issues/30700
  */
 test.describe('Modals: Inline Sheet in Child Route (standalone)', () => {
   test.beforeEach(async ({ page }) => {
-    // Navigate to the child route - this will:
-    // 1. Render the parent with buttons
-    // 2. Render the child in the nested outlet, which immediately opens the modal
     await page.goto('/standalone/modal-child-route/child');
   });
 
   test('should render parent content and child modal', async ({ page }) => {
-    // Verify the PARENT content is visible (buttons are in parent, not child)
     await expect(page.locator('#increment-btn')).toBeVisible();
     await expect(page.locator('#decrement-btn')).toBeVisible();
     await expect(page.locator('#background-action-count')).toHaveText('0');
-
-    // Verify the modal from CHILD route is visible (opens immediately with isOpen=true)
     await expect(page.locator('ion-modal.show-modal')).toBeVisible();
     await expect(page.locator('#modal-content-loaded')).toBeVisible();
   });
 
-  test('should allow interacting with PARENT content while modal (showBackdrop: false) is open in CHILD route', async ({ page }) => {
-    // Modal should already be open (isOpen=true in child component)
+  test('should allow interacting with parent content while modal is open in child route', async ({ page }) => {
     await expect(page.locator('ion-modal.show-modal')).toBeVisible();
-    await expect(page.locator('#modal-content-loaded')).toBeVisible();
 
-    // Click the increment button in the PARENT - this should work with showBackdrop=false
-    // This is the KEY test - it FAILS due to issue #30700
     await page.locator('#increment-btn').click();
-
-    // Verify the click was registered
     await expect(page.locator('#background-action-count')).toHaveText('1');
   });
 
-  test('should allow multiple interactions with PARENT content while modal is open', async ({ page }) => {
-    // Modal should already be open
+  test('should allow multiple interactions with parent content while modal is open', async ({ page }) => {
     await expect(page.locator('ion-modal.show-modal')).toBeVisible();
 
-    // Click increment multiple times
     await page.locator('#increment-btn').click();
     await page.locator('#increment-btn').click();
     await expect(page.locator('#background-action-count')).toHaveText('2');
 
-    // Click decrement
     await page.locator('#decrement-btn').click();
     await expect(page.locator('#background-action-count')).toHaveText('1');
   });

packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-child.component.ts

@@ -1,29 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 /**
- * Child component that ONLY contains the modal.
- *
- * This mimics the EXACT structure from issue #30700 reproduction where:
- * - The PARENT page has the interactive content (buttons)
- * - The CHILD route (this component) contains ONLY the modal
- *
- * The structure is:
- * - ion-app > ion-router-outlet (root) > PARENT (has buttons + nested outlet) > ion-router-outlet (nested) > THIS COMPONENT (has modal)
- *
- * The bug is: when this modal opens, the buttons in the PARENT become non-interactive
- * even though showBackdrop=false should allow background interaction.
- *
- * Related issue: https://github.com/ionic-team/ionic-framework/issues/30700
+ * Child route component containing only the sheet modal with showBackdrop=false.
+ * Verifies issue https://github.com/ionic-team/ionic-framework/issues/30700
  */
 @Component({
   selector: 'app-modal-child-route-child',
   template: `
-    <!-- This child route component contains ONLY the modal, which opens immediately -->
-    <!-- The interactive content (buttons) are in the PARENT component -->
-
-    <!-- INLINE modal with showBackdrop=false - parent content should be interactive -->
     <ion-modal
       [isOpen]="true"
       [breakpoints]="[0.2, 0.5, 0.7]"
@@ -38,12 +23,11 @@ import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from
         </ion-header>
         <ion-content class="ion-padding">
           <p id="modal-content-loaded">Modal content loaded in child route</p>
-          <p>The +/- buttons in the parent should be clickable!</p>
         </ion-content>
       </ng-template>
     </ion-modal>
   `,
   standalone: true,
-  imports: [CommonModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+  imports: [CommonModule, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ModalChildRouteChildComponent {}

packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-parent.component.ts

@@ -2,19 +2,8 @@ import { Component } from '@angular/core';
 import { IonButton, IonContent, IonHeader, IonRouterOutlet, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 /**
- * Parent component that contains:
- * 1. Interactive content (buttons) that should remain clickable
- * 2. A nested ion-router-outlet where the child route with the modal will render
- *
- * This mimics the EXACT structure from issue #30700 reproduction:
- * - Parent page has buttons (+/-)
- * - Parent page has a nested IonRouterOutlet
- * - Child route (rendered in that outlet) contains ONLY the modal
- *
- * The bug is: when the modal opens in the child route, the buttons in THIS
- * parent component become non-interactive even with showBackdrop=false.
- *
- * Related issue: https://github.com/ionic-team/ionic-framework/issues/30700
+ * Parent with interactive buttons and nested outlet for child route modal.
+ * See https://github.com/ionic-team/ionic-framework/issues/30700
  */
 @Component({
   selector: 'app-modal-child-route-parent',
@@ -25,17 +14,12 @@ import { IonButton, IonContent, IonHeader, IonRouterOutlet, IonTitle, IonToolbar
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <!-- These buttons are in the PARENT and should be clickable when modal is open in CHILD -->
       <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
         <ion-button id="decrement-btn" (click)="decrement()">-</ion-button>
         <p id="background-action-count">{{ count }}</p>
         <ion-button id="increment-btn" (click)="increment()">+</ion-button>
       </div>
-
-      <p>The modal will be rendered from a child route below:</p>
-
-      <!-- Nested router outlet - child route with modal renders here -->
-      <ion-router-outlet id="child-router-outlet"></ion-router-outlet>
+      <ion-router-outlet></ion-router-outlet>
     </ion-content>
   `,
   standalone: true,