fix(vue): ensure that only tab pages get added to the tab navigation …

…stack (#25045) resolves #24859
ionic-team · Apr 12, 2022 · a0054a7 · a0054a7
1 parent da89684
commit a0054a7
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/packages/vue-router/src/router.ts b/packages/vue-router/src/router.ts
@@ -65,7 +65,6 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
 
   let currentRouteInfo: RouteInfo;
   let incomingRouteParams: RouteParams;
-  let currentTab: string | undefined;
 
   // TODO types
   let historyChangeListeners: any[] = [];
@@ -238,8 +237,7 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
         if (action === 'replace') {
           incomingRouteParams = {
             routerAction: 'replace',
-            routerDirection: 'none',
-            tab: currentTab
+            routerDirection: 'none'
           }
         } else if (action === 'pop') {
           const routeInfo = locationHistory.current(initialHistoryPosition, currentHistoryPosition - delta);
@@ -254,16 +252,15 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
           } else {
             incomingRouteParams = {
               routerAction: 'pop',
-              routerDirection: 'none',
-              tab: currentTab
+              routerDirection: 'none'
             }
           }
         }
+
         if (!incomingRouteParams) {
           incomingRouteParams = {
             routerAction: 'push',
-            routerDirection: direction || 'forward',
-            tab: currentTab
+            routerDirection: direction || 'forward'
           }
         }
       }
@@ -288,7 +285,6 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
         }
 
         if (isPushed) {
-          routeInfo.tab = leavingLocationInfo.tab;
           routeInfo.pushedByRoute = (leavingLocationInfo.pathname !== '') ? leavingLocationInfo.pathname : undefined;
         } else if (routeInfo.routerAction === 'pop') {
           const route = locationHistory.findLastLocation(routeInfo);
@@ -460,9 +456,18 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
     }
   }
 
+  /**
+   * This method is invoked by the IonTabs component
+   * during a history change callback. It is responsible
+   * for ensuring that tabbed routes have the correct
+   * "tab" field in its routeInfo object.
+   *
+   * IonTabs will determine if the current route
+   * is in tabs and assign it the correct tab.
+   * If the current route is not in tabs,
+   * then IonTabs will not invoke this.
+   */
   const handleSetCurrentTab = (tab: string) => {
-    currentTab = tab;
-
     const ri = { ...locationHistory.last() };
     if (ri.tab !== tab) {
       ri.tab = tab;

diff --git a/packages/vue/test-app/tests/e2e/specs/tabs.js b/packages/vue/test-app/tests/e2e/specs/tabs.js
@@ -435,7 +435,7 @@ describe('Tabs', () => {
   });
 
   // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24432
-  it('should correct replace a route in a child tab route', () => {
+  it('should correctly replace a route in a child tab route', () => {
     cy.visit('http://localhost:8080/tabs');
 
     cy.routerPush('/tabs/tab1/childone');
@@ -446,6 +446,36 @@ describe('Tabs', () => {
     cy.ionPageVisible('tab1');
     cy.ionPageDoesNotExist('tab1childone');
   })
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24859
+  it('should go back to the root page after navigating between tab and non tab outlets', () => {
+    cy.visit('http://localhost:8080');
+
+    cy.routerPush('/tabs/tab1');
+    cy.ionPageVisible('tab1');
+    cy.ionPageHidden('home');
+
+    cy.get('ion-tab-button#tab-button-tab2').click();
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab2');
+
+    cy.routerPush('/routing');
+    cy.ionPageVisible('routing');
+    cy.ionPageHidden('tabs');
+
+    cy.routerPush('/tabs/tab1');
+    cy.ionPageVisible('tabs');
+    cy.ionPageVisible('tab1');
+    cy.ionPageHidden('routing');
+
+    cy.get('ion-tab-button#tab-button-tab2').click();
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab2');
+
+    cy.ionBackClick('tab2');
+    cy.ionPageVisible('home');
+    cy.ionPageDoesNotExist('tabs');
+  });
 })
 
 describe('Tabs - Swipe to Go Back', () => {