fix(react-router): preserve nested ionPage views during parent swipe-back

Author: ShaneK

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -267,6 +267,24 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
     }
     this.wasInScope = false;
 
+    // For ionPage outlets whose parent outlet has swipe-to-go-back enabled,
+    // preserve child views so they remain visible during the swipe gesture.
+    // Without this, the deferred unmount removes child pages before the gesture
+    // starts, showing an empty shell when swiping back. Views are cleaned up
+    // when the parent outlet pops this view (componentWillUnmount -> clearOutlet).
+    //
+    // Lifecycle events are skipped in this branch because the view stays mounted
+    // and visible. Firing ionViewWillLeave/DidLeave here would be asymmetric with
+    // no matching ionViewWillEnter/DidEnter when the view comes back in scope.
+    const isIonPageOutlet = this.routerOutletElement?.classList.contains('ion-page');
+    if (isIonPageOutlet) {
+      const parentOutlet = this.routerOutletElement?.parentElement?.closest<HTMLIonRouterOutletElement>('ion-router-outlet');
+      if (parentOutlet?.swipeGesture === true) {
+        this.dismissPresentedOverlays();
+        return true;
+      }
+    }
+
     // Fire lifecycle events on any visible view before unmounting.
     // When navigating away from a tabbed section, the parent outlet fires
     // ionViewDidLeave on the tabs container, but the active tab child page
@@ -1141,17 +1159,64 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
     }, VIEW_UNMOUNT_DELAY_MS);
   }
 
+  /**
+   * Dismisses every presented Ionic overlay in the document. Core moves overlays
+   * to ion-app when presented, so they are no longer descendants of this outlet
+   * and stay visible even after the outlet is hidden, blocking the entering view.
+   *
+   * Scope is document-wide because the original outlet-to-overlay DOM linkage is
+   * lost after presentation. Overlays without a trackable presenting element
+   * cannot be safely attributed to a specific outlet.
+   */
+  private dismissPresentedOverlays(): void {
+    type PresentedOverlay =
+      | HTMLIonModalElement
+      | HTMLIonPopoverElement
+      | HTMLIonActionSheetElement
+      | HTMLIonAlertElement
+      | HTMLIonLoadingElement;
+    // Matches the overlay set tracked by core's getPresentedOverlays (see
+    // core/src/utils/overlays.ts). An overlay is "presented" when it lacks the
+    // `overlay-hidden` class.
+    const overlaySelector = 'ion-modal, ion-popover, ion-action-sheet, ion-alert, ion-loading';
+    document.querySelectorAll<PresentedOverlay>(overlaySelector).forEach((overlay) => {
+      if (overlay.classList.contains('overlay-hidden') || typeof overlay.dismiss !== 'function') {
+        return;
+      }
+      overlay.dismiss().catch(() => {
+        /* Overlay may already be dismissing or its canDismiss guard may block it. */
+      });
+    });
+  }
+
+  /**
+   * Resolves the entering view for a swipe-back gesture.
+   *
+   * Prefers a view owned by this outlet. Falls back to searching all outlets only
+   * when the candidate's ion-page element is a descendant of this outlet. Without
+   * the containment guard, a nested child outlet can claim ownership of a sibling
+   * outlet's view, running the swipe gesture on the wrong router outlet.
+   */
+  private findEnteringViewForSwipe(swipeBackRouteInfo: RouteInfo): ViewItem | undefined {
+    const enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
+    if (enteringViewItem) {
+      return enteringViewItem;
+    }
+    const candidate = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, undefined, false);
+    if (candidate?.ionPageElement && this.routerOutletElement?.contains(candidate.ionPageElement)) {
+      return candidate;
+    }
+    return undefined;
+  }
+
   /**
    * Configures swipe-to-go-back gesture for the router outlet.
    */
   async setupRouterOutlet(routerOutlet: HTMLIonRouterOutletElement) {
     const canStart = () => {
       const { routeInfo } = this.props;
       const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-      let enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
-      if (!enteringViewItem) {
-        enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, undefined, false);
-      }
+      const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
 
       // View might have mount=false but ionPageElement still in DOM
       const ionPageInDocument = Boolean(
@@ -1175,11 +1240,7 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
     const onStart = async () => {
       const { routeInfo } = this.props;
       const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-      // First try to find the view in the current outlet, then search all outlets
-      let enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
-      if (!enteringViewItem) {
-        enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, undefined, false);
-      }
+      const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
       const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
 
       // Ensure the entering view is mounted so React keeps rendering it during the gesture.
@@ -1206,11 +1267,7 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
         // Swipe gesture was aborted - re-hide the page that was going to enter
         const { routeInfo } = this.props;
         const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-        // First try to find the view in the current outlet, then search all outlets
-        let enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
-        if (!enteringViewItem) {
-          enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, undefined, false);
-        }
+        const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
         const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
 
         // Don't hide if entering and leaving are the same (parameterized route edge case)

packages/react-router/test/base/tests/e2e/playwright/ionpage-swipe-back.spec.ts

@@ -0,0 +1,73 @@
+import { test, expect } from '@playwright/test';
+import { ionPageVisible } from './utils/test-utils';
+import { ionSwipeToGoBack } from './utils/drag-utils';
+
+const IOS_MODE = 'ionic:mode=ios';
+
+/**
+ * Tests that swipe-to-go-back works correctly for ionPage outlets
+ * (nested IonRouterOutlet components with the ionPage prop).
+ *
+ * Bug: when navigating from one ionPage outlet (section-a) to a sibling
+ * (section-b), the previous outlet's child content was destroyed by the
+ * deferred unmount. During swipe-back, the entering page was an empty shell.
+ *
+ * Root causes:
+ * 1. When the current outlet had no matching view, the fallback search
+ *    across all outlets accepted any candidate without verifying the
+ *    candidate's page element actually lives inside the current outlet.
+ *    A nested child outlet could then run the swipe gesture on a sibling's
+ *    view, driving the transition on the wrong router outlet.
+ * 2. The deferred unmount in handleOutOfScopeOutlet removed section-a's child
+ *    content before the swipe gesture could reveal it.
+ */
+test.describe('ionPage outlet swipe-to-go-back', () => {
+  test('section-a content should be visible during swipe-back from section-b', async ({ page }) => {
+    // Navigate to modal-aria-hidden test page (has sibling ionPage outlets)
+    await page.goto(`/modal-aria-hidden?${IOS_MODE}`);
+    await ionPageVisible(page, 'modal-page-a');
+
+    // Open modal and navigate to Section B without dismissing
+    await page.locator('#openModal').click();
+    await page.locator('ion-modal').waitFor({ state: 'visible' });
+    await page.locator('#navigateToB').click();
+    await ionPageVisible(page, 'modal-page-b');
+
+    // Start a swipe-back gesture and hold mid-way
+    const outlet = page.locator('ion-router-outlet#modal-aria-hidden-root');
+    const box = await outlet.boundingBox();
+    if (!box) throw new Error('Root outlet not found');
+
+    await page.mouse.move(box.x, box.y + box.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 10 });
+    await page.waitForTimeout(300);
+
+    // Mid-swipe: section-a should be visible (not display:none) with its child content
+    const sectionA = page.locator('#section-a');
+    const computedDisplay = await sectionA.evaluate((el: HTMLElement) => getComputedStyle(el).display);
+    expect(computedDisplay).not.toBe('none');
+
+    const pageACount = await sectionA.locator('[data-pageid="modal-page-a"]').count();
+    expect(pageACount).toBe(1);
+
+    // Release the gesture
+    await page.mouse.up();
+  });
+
+  test('should abort swipe-back and stay on section-b', async ({ page }) => {
+    await page.goto(`/modal-aria-hidden?${IOS_MODE}`);
+    await ionPageVisible(page, 'modal-page-a');
+
+    await page.locator('#openModal').click();
+    await page.locator('ion-modal').waitFor({ state: 'visible' });
+    await page.locator('#navigateToB').click();
+    await ionPageVisible(page, 'modal-page-b');
+
+    // Abort the swipe-back gesture (small swipe)
+    await ionSwipeToGoBack(page, false, 'ion-router-outlet#modal-aria-hidden-root');
+
+    // Should still be on section B
+    await ionPageVisible(page, 'modal-page-b');
+  });
+});