@ionic/react-router 8.8.1-dev.11774384072.1e807ca8 → 8.8.1-dev.11774636992.1511ce70

package/dist/index.js

@@ -1406,6 +1406,12 @@ class StackManager extends React.PureComponent {
         this._isMounted = false;
         /** In-flight requestAnimationFrame IDs from transitionPage, cancelled on unmount. */
         this.transitionRafIds = [];
+        /**
+         * Monotonically increasing counter incremented at the start of each transitionPage call.
+         * Used to detect when an async commit() resolves after a newer transition has already run,
+         * preventing the stale commit from hiding an element that the newer transition made visible.
+         */
+        this.transitionGeneration = 0;
         this.outletMountPath = undefined;
         /**
          * Whether this outlet is at the root level (no parent route matches).
@@ -1993,7 +1999,15 @@ class StackManager extends React.PureComponent {
         this._isMounted = true;
         if (this.routerOutletElement) {
             this.setupRouterOutlet(this.routerOutletElement);
-            this.handlePageTransition(this.props.routeInfo);
+            // Defer to a microtask to avoid calling forceUpdate() synchronously during
+            // React 19's reappearLayoutEffects phase, which re-runs componentDidMount
+            // without a preceding componentWillUnmount and causes "Maximum update depth exceeded".
+            const routeInfo = this.props.routeInfo;
+            queueMicrotask(() => {
+                if (this._isMounted && this.props.routeInfo.pathname === routeInfo.pathname) {
+                    this.handlePageTransition(routeInfo);
+                }
+            });
         }
     }
     componentDidUpdate(prevProps) {
@@ -2326,6 +2340,7 @@ class StackManager extends React.PureComponent {
      * overlapping content during the transition. Defaults to `false`.
      */
     async transitionPage(routeInfo, enteringViewItem, leavingViewItem, direction, progressAnimation = false, skipAnimation = false) {
+        const myGeneration = ++this.transitionGeneration;
         const runCommit = async (enteringEl, leavingEl) => {
             const skipTransition = this.skipTransition;
             /**
@@ -2375,10 +2390,22 @@ class StackManager extends React.PureComponent {
             const timeoutMs = 5000;
             const timeoutPromise = new Promise((resolve) => setTimeout(() => resolve('timeout'), timeoutMs));
             const result = await Promise.race([commitPromise.then(() => 'done'), timeoutPromise]);
+            // Bail out if the component unmounted during the commit animation
+            if (!this._isMounted)
+                return;
             if (result === 'timeout') {
                 // Force entering page visible even though commit hung
                 enteringEl.classList.remove('ion-page-invisible');
             }
+            /**
+             * If a newer transitionPage call ran while this commit was in-flight (e.g., a tab
+             * switch fired during a forward animation), the core commit may have applied
+             * ion-page-hidden to leavingEl even though the newer transition already made it
+             * visible. Undo that stale hide so the newer transition's DOM state wins.
+             */
+            if (myGeneration !== this.transitionGeneration && leavingEl && leavingEl === this.transitionEnteringElement) {
+                showIonPageElement(leavingEl);
+            }
             if (!progressAnimation) {
                 enteringEl.classList.remove('ion-page-invisible');
             }
@@ -2387,6 +2414,7 @@ class StackManager extends React.PureComponent {
         const routeInfoFallbackDirection = routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root' ? undefined : routeInfo.routeDirection;
         const directionToUse = direction !== null && direction !== void 0 ? direction : routeInfoFallbackDirection;
         if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
+            this.transitionEnteringElement = enteringViewItem.ionPageElement;
             if (leavingViewItem && leavingViewItem.ionPageElement && enteringViewItem === leavingViewItem) {
                 // Clone page for same-view transitions (e.g., /user/1 → /user/2)
                 const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname, undefined, this.outletMountPath);
@@ -2487,15 +2515,22 @@ class StackManager extends React.PureComponent {
                     if (!this._isMounted)
                         return;
                     // Swap visibility synchronously - show entering, hide leaving
+                    // Skip hiding if a newer transition already made leavingEl the entering view
                     enteringEl.classList.remove('ion-page-invisible');
-                    leavingEl.classList.add('ion-page-hidden');
-                    leavingEl.setAttribute('aria-hidden', 'true');
+                    if (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
+                        leavingEl.classList.add('ion-page-hidden');
+                        leavingEl.setAttribute('aria-hidden', 'true');
+                    }
                 }
                 else {
                     await runCommit(enteringViewItem.ionPageElement, leavingEl);
                     if (leavingEl && !progressAnimation) {
-                        leavingEl.classList.add('ion-page-hidden');
-                        leavingEl.setAttribute('aria-hidden', 'true');
+                        // Skip hiding if a newer transition already made leavingEl the entering view
+                        // runCommit's generation check has already restored its visibility in that case
+                        if (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
+                            leavingEl.classList.add('ion-page-hidden');
+                            leavingEl.setAttribute('aria-hidden', 'true');
+                        }
                     }
                 }
             }