fix(modal): handle React template wrapper in child route pointer-events fix

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;
+  // Elements that had pointer-events disabled for background interaction
+  private pointerEventsDisabledElements: HTMLElement[] = [];
 
   lastFocus?: HTMLElement;
   animation?: Animation;
@@ -763,16 +765,53 @@ 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 +927,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;

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;

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} />

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');
+  });
+});