From ea8a22d2b0878fed2dfc3becc9295bc4c3aeb744 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Thu, 4 Dec 2025 17:41:31 -0800
Subject: [PATCH 1/7] chore(angular): reproducing issue where modals with
 showBackdrop=false aren't allowing clicks through the background

---
 .../src/standalone/modal-child-route.spec.ts  | 64 +++++++++++++++++++
 .../standalone/app-standalone/app.routes.ts   |  8 +++
 .../modal-child-route-child.component.ts      | 49 ++++++++++++++
 .../modal-child-route-parent.component.ts     | 54 ++++++++++++++++
 4 files changed, 175 insertions(+)
 create mode 100644 packages/angular/test/base/e2e/src/standalone/modal-child-route.spec.ts
 create mode 100644 packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-child.component.ts
 create mode 100644 packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-parent.component.ts

diff --git a/packages/angular/test/base/e2e/src/standalone/modal-child-route.spec.ts b/packages/angular/test/base/e2e/src/standalone/modal-child-route.spec.ts
new file mode 100644
index 00000000000..2a41872eb9d
--- /dev/null
+++ b/packages/angular/test/base/e2e/src/standalone/modal-child-route.spec.ts
@@ -0,0 +1,64 @@
+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)
+ */
+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)
+    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
+    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');
+  });
+});
diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
index 007743f905f..667ef672e8b 100644
--- a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
+++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
@@ -13,6 +13,14 @@ export const routes: Routes = [
       { path: 'modal', loadComponent: () => import('../modal/modal.component').then(c => c.ModalComponent) },
       { path: 'modal-sheet-inline', loadComponent: () => import('../modal-sheet-inline/modal-sheet-inline.component').then(c => c.ModalSheetInlineComponent) },
       { path: 'modal-dynamic-wrapper', loadComponent: () => import('../modal-dynamic-wrapper/modal-dynamic-wrapper.component').then(c => c.ModalDynamicWrapperComponent) },
+      { path: 'modal-child-route', redirectTo: '/standalone/modal-child-route/child', pathMatch: 'full' },
+      {
+        path: 'modal-child-route',
+        loadComponent: () => import('../modal-child-route/modal-child-route-parent.component').then(c => c.ModalChildRouteParentComponent),
+        children: [
+          { path: 'child', loadComponent: () => import('../modal-child-route/modal-child-route-child.component').then(c => c.ModalChildRouteChildComponent) },
+        ]
+      },
       { path: 'programmatic-modal', loadComponent: () => import('../programmatic-modal/programmatic-modal.component').then(c => c.ProgrammaticModalComponent) },
       { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },
       { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },
diff --git a/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-child.component.ts b/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-child.component.ts
new file mode 100644
index 00000000000..25d82955df1
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-child.component.ts
@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { IonButton, 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
+ */
+@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]"
+      [initialBreakpoint]="0.5"
+      [showBackdrop]="false"
+    >
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal in Child Route</ion-title>
+          </ion-toolbar>
+        </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],
+})
+export class ModalChildRouteChildComponent {}
diff --git a/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-parent.component.ts b/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-parent.component.ts
new file mode 100644
index 00000000000..74f9e116cef
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-parent.component.ts
@@ -0,0 +1,54 @@
+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
+ */
+@Component({
+  selector: 'app-modal-child-route-parent',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Parent Page with Nested Route</ion-title>
+      </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-content>
+  `,
+  standalone: true,
+  imports: [IonButton, IonContent, IonHeader, IonRouterOutlet, IonTitle, IonToolbar],
+})
+export class ModalChildRouteParentComponent {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+
+  decrement() {
+    this.count--;
+  }
+}

From cc6727a116ac96f091b47ce07f16671f47698927 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Thu, 4 Dec 2025 18:43:49 -0800
Subject: [PATCH 2/7] fix(modal): allow interaction with parent content when
 sheet modal has showBackdrop=false in child routes

---
 core/src/components/modal/modal.scss          | 14 ++++++++
 core/src/components/modal/modal.tsx           | 35 +++++++++++++++++-
 .../src/standalone/modal-child-route.spec.ts  | 36 +++----------------
 .../modal-child-route-child.component.ts      | 24 +++----------
 .../modal-child-route-parent.component.ts     | 22 ++----------
 .../IonModalFocusTrap.cy.ts                   |  6 ++--
 6 files changed, 64 insertions(+), 73 deletions(-)

diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 7c5ec7916fe..74ff7ebc56c 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -57,6 +57,20 @@ ion-backdrop {
   pointer-events: auto;
 }
 
+/**
+ * When focus trap is disabled on a visible modal, allow clicks to pass through
+ * to content behind it. The .modal-wrapper retains pointer-events: auto so
+ * modal content remains interactive. We only apply this when show-modal is
+ * present to avoid affecting hidden modals that haven't presented.
+ */
+:host(.ion-disable-focus-trap.show-modal) {
+  pointer-events: none;
+}
+
+:host(.ion-disable-focus-trap.show-modal) ion-backdrop {
+  pointer-events: none;
+}
+
 :host(.overlay-hidden) {
   display: none;
 }
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index b1a494430d0..12eb598e2ce 100644
--- a/core/src/components/modal/modal.tsx
+++ b/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;
diff --git a/packages/angular/test/base/e2e/src/standalone/modal-child-route.spec.ts b/packages/angular/test/base/e2e/src/standalone/modal-child-route.spec.ts
index 2a41872eb9d..d479599bccb 100644
--- a/packages/angular/test/base/e2e/src/standalone/modal-child-route.spec.ts
+++ b/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');
   });
diff --git a/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-child.component.ts b/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-child.component.ts
index 25d82955df1..6fa573fa197 100644
--- a/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-child.component.ts
+++ b/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 {}
diff --git a/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-parent.component.ts b/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-parent.component.ts
index 74f9e116cef..fdd5465ad11 100644
--- a/packages/angular/test/base/src/app/standalone/modal-child-route/modal-child-route-parent.component.ts
+++ b/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,
diff --git a/packages/react/test/base/tests/e2e/specs/overlay-components/IonModalFocusTrap.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-components/IonModalFocusTrap.cy.ts
index 395c642dcc4..78ca7a581e3 100644
--- a/packages/react/test/base/tests/e2e/specs/overlay-components/IonModalFocusTrap.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/overlay-components/IonModalFocusTrap.cy.ts
@@ -5,7 +5,9 @@ describe('IonModal: focusTrap regression', () => {
 
   it('should allow interacting with background when focusTrap=false', () => {
     cy.get('#open-non-trapped-modal').click();
-    cy.get('ion-modal').should('be.visible');
+    // Use 'exist' instead of 'be.visible' because the modal has pointer-events: none
+    // to allow background interaction, which Cypress interprets as "covered"
+    cy.get('ion-modal.show-modal').should('exist');
 
     cy.get('#background-action').click();
     cy.get('#background-action-count').should('have.text', '1');
@@ -13,7 +15,7 @@ describe('IonModal: focusTrap regression', () => {
 
   it('should prevent interacting with background when focusTrap=true', () => {
     cy.get('#open-trapped-modal').click();
-    cy.get('ion-modal').should('be.visible');
+    cy.get('ion-modal.show-modal').should('be.visible');
 
     // Ensure backdrop is active and capturing pointer events
     cy.get('ion-backdrop').should('exist');

From ef60cf1bcd6aedfcc85157cc291fb44663ebf922 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Fri, 5 Dec 2025 09:06:52 -0800
Subject: [PATCH 3/7] fix(modal): handle React template wrapper in child route
 pointer-events fix

---
 core/src/components/modal/modal.tsx           | 59 ++++++++++++----
 .../ModalSheetChildRoute.tsx                  | 69 +++++++++++++++++++
 .../overlay-components/OverlayComponents.tsx  |  2 +
 .../IonModalSheetChildRoute.cy.ts             | 37 ++++++++++
 4 files changed, 155 insertions(+), 12 deletions(-)
 create mode 100644 packages/react/test/base/src/pages/overlay-components/ModalSheetChildRoute.tsx
 create mode 100644 packages/react/test/base/tests/e2e/specs/overlay-components/IonModalSheetChildRoute.cy.ts

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 12eb598e2ce..c089fd3a617 100644
--- a/core/src/components/modal/modal.tsx
+++ b/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;
+  // Elements that had pointer-events disabled for background interaction
+  private pointerEventsDisabledElements: HTMLElement[] = [];
 
   lastFocus?: HTMLElement;
   animation?: Animation;
@@ -763,16 +765,52 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     /**
      * 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.
+     * block pointer events after the modal is moved to ion-app. This only applies
+     * when the modal is in a child route (detected by the modal being inside
+     * a route wrapper like ion-page). Disable pointer-events on the child
+     * route's wrapper elements up to (and including) the first ion-router-outlet.
+     * We stop there because parent elements may contain sibling content that
+     * should remain interactive.
      * 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');
+      // Find the first meaningful parent (skip template and other non-semantic wrappers).
+      // In Ionic React, modals are wrapped in a <template> element.
+      let semanticParent: HTMLElement | null = this.cachedOriginalParent;
+      while (semanticParent && (semanticParent.tagName === 'TEMPLATE' || semanticParent.tagName === 'SLOT')) {
+        semanticParent = semanticParent.parentElement;
+      }
+
+      // Check if the modal is inside a route wrapper (ion-page or div.ion-page)
+      // If the modal is inside ion-content or other content containers, this fix doesn't apply
+      const parentIsRouteWrapper =
+        semanticParent && (semanticParent.tagName === 'ION-PAGE' || semanticParent.classList.contains('ion-page'));
+
+      if (parentIsRouteWrapper && semanticParent) {
+        this.pointerEventsDisabledElements = [];
+        let current: HTMLElement | null = semanticParent;
+
+        while (current && current.tagName !== 'ION-APP') {
+          const tagName = current.tagName;
+          // Check for ion-page tag or elements with ion-page class
+          // (React renders IonPage as div.ion-page, not ion-page tag)
+          const isIonPage = tagName === 'ION-PAGE' || current.classList.contains('ion-page');
+          const isRouterOutlet = tagName === 'ION-ROUTER-OUTLET';
+          const isNav = tagName === 'ION-NAV';
+
+          if (isIonPage || isRouterOutlet || isNav) {
+            current.style.setProperty('pointer-events', 'none');
+            this.pointerEventsDisabledElements.push(current);
+          }
 
-      const immediateParent = this.cachedOriginalParent.parentElement;
-      if (immediateParent?.tagName === 'ION-ROUTER-OUTLET') {
-        immediateParent.style.setProperty('pointer-events', 'none');
+          // Stop after processing the first ion-router-outlet - parent elements
+          // may contain sibling content (like buttons) that should remain interactive
+          if (isRouterOutlet) {
+            break;
+          }
+
+          current = current.parentElement;
+        }
       }
     }
   }
@@ -888,13 +926,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
       /**
        * 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');
-        }
+      for (const element of this.pointerEventsDisabledElements) {
+        element.style.removeProperty('pointer-events');
       }
+      this.pointerEventsDisabledElements = [];
     }
     this.currentBreakpoint = undefined;
     this.animation = undefined;
diff --git a/packages/react/test/base/src/pages/overlay-components/ModalSheetChildRoute.tsx b/packages/react/test/base/src/pages/overlay-components/ModalSheetChildRoute.tsx
new file mode 100644
index 00000000000..e686bbd00eb
--- /dev/null
+++ b/packages/react/test/base/src/pages/overlay-components/ModalSheetChildRoute.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonPage,
+  IonRouterOutlet,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { Route } from 'react-router';
+
+/**
+ * Parent component with counter buttons and nested router outlet.
+ * This reproduces the issue from https://github.com/ionic-team/ionic-framework/issues/30700
+ * where sheet modals in child routes with showBackdrop=false block interaction with parent content.
+ */
+const ModalSheetChildRouteParent: React.FC = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Parent Page with Nested Route</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+          <IonButton id="decrement-btn" onClick={() => setCount((c) => c - 1)}>
+            -
+          </IonButton>
+          <p id="background-action-count">{count}</p>
+          <IonButton id="increment-btn" onClick={() => setCount((c) => c + 1)}>
+            +
+          </IonButton>
+        </div>
+      </IonContent>
+      <IonRouterOutlet>
+        <Route path="/overlay-components/modal-sheet-child-route/child" component={ModalSheetChildRouteChild} />
+      </IonRouterOutlet>
+    </IonPage>
+  );
+};
+
+const ModalSheetChildRouteChild: React.FC = () => {
+  return (
+    <IonPage>
+      <IonModal
+        isOpen={true}
+        breakpoints={[0.2, 0.5, 0.7]}
+        initialBreakpoint={0.5}
+        showBackdrop={false}
+      >
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Modal in Child Route</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <p id="modal-content-loaded">Modal content loaded in child route</p>
+        </IonContent>
+      </IonModal>
+    </IonPage>
+  );
+};
+
+export default ModalSheetChildRouteParent;
diff --git a/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx b/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx
index 19aebc9081c..d12b233a967 100644
--- a/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx
+++ b/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx
@@ -15,6 +15,7 @@ import AlertComponent from './AlertComponent';
 import LoadingComponent from './LoadingComponent';
 import ModalComponent from './ModalComponent';
 import ModalFocusTrap from './ModalFocusTrap';
+import ModalSheetChildRoute from './ModalSheetChildRoute';
 import ModalTeleport from './ModalTeleport';
 import PickerComponent from './PickerComponent';
 import PopoverComponent from './PopoverComponent';
@@ -32,6 +33,7 @@ const OverlayHooks: React.FC<OverlayHooksProps> = () => {
         <Route path="/overlay-components/loading" component={LoadingComponent} />
         <Route path="/overlay-components/modal-basic" component={ModalComponent} />
         <Route path="/overlay-components/modal-focus-trap" component={ModalFocusTrap} />
+        <Route path="/overlay-components/modal-sheet-child-route" component={ModalSheetChildRoute} />
         <Route path="/overlay-components/modal-teleport" component={ModalTeleport} />
         <Route path="/overlay-components/picker" component={PickerComponent} />
         <Route path="/overlay-components/popover" component={PopoverComponent} />
diff --git a/packages/react/test/base/tests/e2e/specs/overlay-components/IonModalSheetChildRoute.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-components/IonModalSheetChildRoute.cy.ts
new file mode 100644
index 00000000000..ff791f3aade
--- /dev/null
+++ b/packages/react/test/base/tests/e2e/specs/overlay-components/IonModalSheetChildRoute.cy.ts
@@ -0,0 +1,37 @@
+/**
+ * Tests for sheet modals in child routes with showBackdrop=false.
+ * See https://github.com/ionic-team/ionic-framework/issues/30700
+ */
+describe('IonModal: Sheet in Child Route with Nested Routing', () => {
+  beforeEach(() => {
+    cy.visit('/overlay-components/modal-sheet-child-route/child');
+  });
+
+  it('should render parent content and child modal', () => {
+    cy.get('#increment-btn').should('exist');
+    cy.get('#decrement-btn').should('exist');
+    cy.get('#background-action-count').should('have.text', '0');
+    cy.get('ion-modal.show-modal').should('exist');
+    cy.get('#modal-content-loaded').should('exist');
+  });
+
+  it('should allow interacting with parent content while modal is open in child route', () => {
+    // Wait for modal to be presented
+    cy.get('ion-modal.show-modal').should('exist');
+
+    // Click the increment button in the parent content
+    cy.get('#increment-btn').click();
+    cy.get('#background-action-count').should('have.text', '1');
+  });
+
+  it('should allow multiple interactions with parent content while modal is open', () => {
+    cy.get('ion-modal.show-modal').should('exist');
+
+    cy.get('#increment-btn').click();
+    cy.get('#increment-btn').click();
+    cy.get('#background-action-count').should('have.text', '2');
+
+    cy.get('#decrement-btn').click();
+    cy.get('#background-action-count').should('have.text', '1');
+  });
+});

From 44548722c5132e8eea58225ccab86b279f30f63e Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Fri, 5 Dec 2025 09:41:38 -0800
Subject: [PATCH 4/7] fix(modal): stop router from blocking when there's a
 backdrop breakpoint set

---
 core/src/components/modal/modal.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index c089fd3a617..065eae741b0 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -764,16 +764,18 @@ export class Modal implements ComponentInterface, OverlayInterface {
     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. This only applies
-     * when the modal is in a child route (detected by the modal being inside
-     * a route wrapper like ion-page). Disable pointer-events on the child
+     * When the backdrop doesn't block pointer events (showBackdrop=false,
+     * focusTrap=false, or backdropBreakpoint > 0), the modal's original parent
+     * may block pointer events after the modal is moved to ion-app. This only
+     * applies when the modal is in a child route (detected by the modal being
+     * inside a route wrapper like ion-page). Disable pointer-events on the child
      * route's wrapper elements up to (and including) the first ion-router-outlet.
      * We stop there because parent elements may contain sibling content that
      * should remain interactive.
      * See https://github.com/ionic-team/ionic-framework/issues/30700
      */
-    if ((this.showBackdrop === false || this.focusTrap === false) && this.cachedOriginalParent) {
+    const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || this.backdropBreakpoint > 0;
+    if (backdropNotBlocking && this.cachedOriginalParent) {
       // Find the first meaningful parent (skip template and other non-semantic wrappers).
       // In Ionic React, modals are wrapped in a <template> element.
       let semanticParent: HTMLElement | null = this.cachedOriginalParent;

From 38743fff5ca15b4e8b7d3c675e87a5fe0e0a853d Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Fri, 5 Dec 2025 11:02:06 -0800
Subject: [PATCH 5/7] fix(modal): allow background interaction for sheet modals
 with backdropBreakpoint

---
 core/src/components/modal/modal.scss |  14 ---
 core/src/components/modal/modal.tsx  | 135 +++++++++++++++------------
 core/src/css/core.scss               |   9 ++
 core/src/utils/overlays.ts           |  32 +++++--
 4 files changed, 105 insertions(+), 85 deletions(-)

diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 74ff7ebc56c..7c5ec7916fe 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -57,20 +57,6 @@ ion-backdrop {
   pointer-events: auto;
 }
 
-/**
- * When focus trap is disabled on a visible modal, allow clicks to pass through
- * to content behind it. The .modal-wrapper retains pointer-events: auto so
- * modal content remains interactive. We only apply this when show-modal is
- * present to avoid affecting hidden modals that haven't presented.
- */
-:host(.ion-disable-focus-trap.show-modal) {
-  pointer-events: none;
-}
-
-:host(.ion-disable-focus-trap.show-modal) ion-backdrop {
-  pointer-events: none;
-}
-
 :host(.overlay-hidden) {
   display: none;
 }
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 065eae741b0..0c9de4be47b 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -100,8 +100,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private parentRemovalObserver?: MutationObserver;
   // Cached original parent from before modal is moved to body during presentation
   private cachedOriginalParent?: HTMLElement;
-  // Elements that had pointer-events disabled for background interaction
-  private pointerEventsDisabledElements: HTMLElement[] = [];
 
   lastFocus?: HTMLElement;
   animation?: Animation;
@@ -646,14 +644,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
     }
 
-    /**
-     * 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) {
+    if (this.isSheetModal) {
       this.initSheetGesture();
     } else if (hasCardModal) {
       this.initSwipeToClose();
@@ -764,56 +755,82 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.gesture.enable(true);
 
     /**
-     * When the backdrop doesn't block pointer events (showBackdrop=false,
-     * focusTrap=false, or backdropBreakpoint > 0), the modal's original parent
-     * may block pointer events after the modal is moved to ion-app. This only
-     * applies when the modal is in a child route (detected by the modal being
-     * inside a route wrapper like ion-page). Disable pointer-events on the child
-     * route's wrapper elements up to (and including) the first ion-router-outlet.
-     * We stop there because parent elements may contain sibling content that
-     * should remain interactive.
+     * When backdrop interaction is allowed, nested router outlets from child routes
+     * may block pointer events to parent content. Apply passthrough styles only when
+     * the modal was the sole content of a child route page.
      * See https://github.com/ionic-team/ionic-framework/issues/30700
      */
-    const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || this.backdropBreakpoint > 0;
-    if (backdropNotBlocking && this.cachedOriginalParent) {
-      // Find the first meaningful parent (skip template and other non-semantic wrappers).
-      // In Ionic React, modals are wrapped in a <template> element.
-      let semanticParent: HTMLElement | null = this.cachedOriginalParent;
-      while (semanticParent && (semanticParent.tagName === 'TEMPLATE' || semanticParent.tagName === 'SLOT')) {
-        semanticParent = semanticParent.parentElement;
-      }
+    const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
+    if (backdropNotBlocking) {
+      this.setupChildRoutePassthrough();
+    }
+  }
 
-      // Check if the modal is inside a route wrapper (ion-page or div.ion-page)
-      // If the modal is inside ion-content or other content containers, this fix doesn't apply
-      const parentIsRouteWrapper =
-        semanticParent && (semanticParent.tagName === 'ION-PAGE' || semanticParent.classList.contains('ion-page'));
-
-      if (parentIsRouteWrapper && semanticParent) {
-        this.pointerEventsDisabledElements = [];
-        let current: HTMLElement | null = semanticParent;
-
-        while (current && current.tagName !== 'ION-APP') {
-          const tagName = current.tagName;
-          // Check for ion-page tag or elements with ion-page class
-          // (React renders IonPage as div.ion-page, not ion-page tag)
-          const isIonPage = tagName === 'ION-PAGE' || current.classList.contains('ion-page');
-          const isRouterOutlet = tagName === 'ION-ROUTER-OUTLET';
-          const isNav = tagName === 'ION-NAV';
-
-          if (isIonPage || isRouterOutlet || isNav) {
-            current.style.setProperty('pointer-events', 'none');
-            this.pointerEventsDisabledElements.push(current);
-          }
+  /**
+   * For sheet modals that allow background interaction, sets up pointer-events
+   * passthrough on child route page wrappers and nested router outlets.
+   */
+  private setupChildRoutePassthrough() {
+    const pageParent = this.getOriginalPageParent();
 
-          // Stop after processing the first ion-router-outlet - parent elements
-          // may contain sibling content (like buttons) that should remain interactive
-          if (isRouterOutlet) {
-            break;
-          }
+    // Skip ion-app (controller modals) and pages with other content (inline modals)
+    if (!pageParent || pageParent.tagName === 'ION-APP') {
+      return;
+    }
 
-          current = current.parentElement;
-        }
-      }
+    const hasVisibleContent = Array.from(pageParent.children).some((child) => {
+      if (child === this.el) return false;
+      if (child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') return false;
+      if (child.tagName === 'TEMPLATE' || child.tagName === 'SLOT') return false;
+      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) return false;
+      return true;
+    });
+
+    if (hasVisibleContent) {
+      return;
+    }
+
+    // Child route case: page only contained the modal
+    pageParent.classList.add('ion-page-overlay-passthrough');
+
+    // Also make nested router outlets passthrough
+    const routerOutlet = pageParent.parentElement;
+    if (routerOutlet?.tagName === 'ION-ROUTER-OUTLET' && routerOutlet.parentElement?.tagName !== 'ION-APP') {
+      routerOutlet.style.setProperty('pointer-events', 'none');
+      routerOutlet.setAttribute('data-overlay-passthrough', 'true');
+    }
+  }
+
+  /**
+   * Finds the ion-page ancestor of the modal's original parent location.
+   */
+  private getOriginalPageParent(): HTMLElement | null {
+    if (!this.cachedOriginalParent) {
+      return null;
+    }
+
+    let pageParent: HTMLElement | null = this.cachedOriginalParent;
+    while (pageParent && !pageParent.classList.contains('ion-page')) {
+      pageParent = pageParent.parentElement;
+    }
+    return pageParent;
+  }
+
+  /**
+   * Removes passthrough styles added by setupChildRoutePassthrough.
+   */
+  private cleanupChildRoutePassthrough() {
+    const pageParent = this.getOriginalPageParent();
+    if (!pageParent) {
+      return;
+    }
+
+    pageParent.classList.remove('ion-page-overlay-passthrough');
+
+    const routerOutlet = pageParent.parentElement;
+    if (routerOutlet?.hasAttribute('data-overlay-passthrough')) {
+      routerOutlet.style.removeProperty('pointer-events');
+      routerOutlet.removeAttribute('data-overlay-passthrough');
     }
   }
 
@@ -925,13 +942,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       this.cleanupViewTransitionListener();
       this.cleanupParentRemovalObserver();
 
-      /**
-       * Clean up pointer-events changes made in initSheetGesture.
-       */
-      for (const element of this.pointerEventsDisabledElements) {
-        element.style.removeProperty('pointer-events');
-      }
-      this.pointerEventsDisabledElements = [];
+      this.cleanupChildRoutePassthrough();
     }
     this.currentBreakpoint = undefined;
     this.animation = undefined;
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index cf7560bd348..db694fc6a07 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -181,6 +181,15 @@ html.ios ion-modal.modal-card .ion-page {
   z-index: $z-index-page-container;
 }
 
+/**
+ * Allows pointer events to pass through child route page wrappers
+ * when they only contain a sheet modal that permits background interaction.
+ * https://github.com/ionic-team/ionic-framework/issues/30700
+ */
+.ion-page.ion-page-overlay-passthrough {
+  pointer-events: none;
+}
+
 /**
  * When making custom dialogs, using
  * ion-content is not required. As a result,
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 5b983158aa5..f03d82b941f 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -539,11 +539,16 @@ 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 };
+  const overlayEl = overlay.el as HTMLIonOverlayElement & {
+    focusTrap?: boolean;
+    showBackdrop?: boolean;
+    backdropBreakpoint?: number;
+  };
   const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-  // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
-  // expect background interaction to remain enabled.
-  const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== 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;
 
   overlay.presented = true;
   overlay.willPresent.emit();
@@ -680,12 +685,21 @@ export const dismiss = async <OverlayDismissOptions>(
    * is dismissed.
    */
   const overlaysLockingRoot = presentedOverlays.filter((o) => {
-    const el = o as HTMLIonOverlayElement & { focusTrap?: boolean; showBackdrop?: boolean };
-    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
+    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 overlayEl = overlay.el as HTMLIonOverlayElement & { focusTrap?: boolean; showBackdrop?: boolean };
-  const locksRoot =
-    overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
+  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;
 
   /**
    * If this is the last visible overlay that is trapping focus

From 4ad27fbabf493695ce4a023aa34cd5b9f50f6819 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Sat, 6 Dec 2025 14:42:17 -0800
Subject: [PATCH 6/7] fix(modal): fix recalculating isSheetModal for Angular

---
 core/src/components/modal/modal.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 0c9de4be47b..3d256911dfc 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -71,7 +71,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private gesture?: Gesture;
   private coreDelegate: FrameworkDelegate = CoreDelegate();
   private sheetTransition?: Promise<any>;
-  private isSheetModal = false;
+  @State() private isSheetModal = false;
   private currentBreakpoint?: number;
   private wrapperEl?: HTMLElement;
   private backdropEl?: HTMLIonBackdropElement;
@@ -644,7 +644,14 @@ export class Modal implements ComponentInterface, OverlayInterface {
       window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
     }
 
-    if (this.isSheetModal) {
+    /**
+     * Recalculate isSheetModal 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();

From 6780fadfd074e73e3aa476e91624b0dab32b9e82 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Mon, 8 Dec 2025 15:02:59 -0800
Subject: [PATCH 7/7] fix(modal): cleaning up some repetitive code, adding
 links for test pages, caching page parent to prevent excessive searching

---
 core/src/components/modal/modal.tsx           | 11 ++++-
 core/src/utils/overlays.ts                    | 44 +++++++++----------
 .../home-page/home-page.component.html        |  5 +++
 .../overlay-components/OverlayComponents.tsx  |  4 ++
 4 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 3d256911dfc..376404b42e7 100644
--- a/core/src/components/modal/modal.tsx
+++ b/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() {
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index f03d82b941f..9ac85d1257a 100644
--- a/core/src/utils/overlays.ts
+++ b/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
diff --git a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
index 7ac9c619180..6dbad643eb2 100644
--- a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
+++ b/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
diff --git a/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx b/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx
index d12b233a967..75bf98bb734 100644
--- a/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx
+++ b/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>