From ee21d3ae43d8c6b076387a58bca655a56c920bcd Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Mon, 21 Oct 2019 06:25:01 -0600
Subject: [PATCH] fix(react): removing pages from DOM on nav, fixes #19701
 (#19712)

---
 .../react-router/src/ReactRouter/Router.tsx   | 29 ++++++++++++++-----
 .../src/ReactRouter/ViewStacks.ts             | 12 --------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/react-router/src/ReactRouter/Router.tsx b/packages/react-router/src/ReactRouter/Router.tsx
index f6b34f73e89..b0842b8476e 100644
--- a/packages/react-router/src/ReactRouter/Router.tsx
+++ b/packages/react-router/src/ReactRouter/Router.tsx
@@ -43,6 +43,12 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
     }
   }
 
+  componentWillUnmount() {
+    if (this.listenUnregisterCallback) {
+      this.listenUnregisterCallback();
+    }
+  }
+
   hideView(viewId: string) {
     const viewStacks = Object.assign(new ViewStacks(), this.state.viewStacks);
     const { view } = viewStacks.findViewInfoById(viewId);
@@ -97,17 +103,16 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
               enteringView.prevId = enteringView.prevId || leavingView.id;
             } else {
               direction = direction || 'back';
-              leavingView.mount = false;
             }
-          } else if (action === 'REPLACE') {
-            leavingView.mount = false;
           }
         }
+        this.removeOrphanedViews(enteringView, enteringViewStack);
       } else {
         enteringView.show = true;
         enteringView.mount = true;
         enteringView.routeData.match = match!;
       }
+
     });
 
     if (leavingView) {
@@ -140,10 +145,20 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
     });
   }
 
-  componentWillUnmount() {
-    if (this.listenUnregisterCallback) {
-      this.listenUnregisterCallback();
-    }
+  removeOrphanedViews(view: ViewItem, viewStack: ViewStack) {
+    const viewsToRemove = viewStack.views.filter(v => v.prevId === view.id);
+    viewsToRemove.forEach(v => {
+      this.removeOrphanedViews(v, viewStack);
+      // If view is not currently visible, go ahead and remove it from DOM
+      if (v.ionPageElement!.classList.contains('ion-page-hidden')) {
+        v.show = false;
+        v.ionPageElement = undefined;
+        v.isIonRoute = false;
+        v.prevId = undefined;
+        v.key = generateId();
+      }
+      v.mount = false;
+    });
   }
 
   async setupIonRouter(id: string, children: any, routerOutlet: HTMLIonRouterOutletElement) {
diff --git a/packages/react-router/src/ReactRouter/ViewStacks.ts b/packages/react-router/src/ReactRouter/ViewStacks.ts
index b27aaa03867..660baa87c56 100644
--- a/packages/react-router/src/ReactRouter/ViewStacks.ts
+++ b/packages/react-router/src/ReactRouter/ViewStacks.ts
@@ -85,16 +85,4 @@ export class ViewStacks {
     return { view, viewStack };
   }
 
-  setHiddenViews() {
-    const keys = this.getKeys();
-    keys.forEach(key => {
-      const viewStack = this.viewStacks[key];
-      viewStack!.views.forEach(view => {
-        if (!view.routeData.match && !view.isIonRoute) {
-          view.show = false;
-          view.mount = false;
-        }
-      });
-    });
-  }
 }