fix(vue): correctly remove active state from tab button when navigating away from tab (#23000)

resolves #22597

Author: liamdebeasi

packages/vue/src/components/IonTabBar.ts

@@ -110,13 +110,23 @@ export const IonTabBar = defineComponent({
       const activeChild = childNodes.find((child: VNode) => isTabButton(child) && child.props?.tab === activeTab);
       const tabBar = this.$refs.ionTabBar;
       const tabDidChange = activeTab !== prevActiveTab;
-      if (activeChild && tabBar) {
-        tabDidChange && this.$props._tabsWillChange(activeTab);
+      if (tabBar) {
+        if (activeChild) {
+          tabDidChange && this.$props._tabsWillChange(activeTab);
 
-        ionRouter.handleSetCurrentTab(activeTab);
-        tabBar.selectedTab = tabState.activeTab = activeTab;
+          ionRouter.handleSetCurrentTab(activeTab);
+          tabBar.selectedTab = tabState.activeTab = activeTab;
 
-        tabDidChange && this.$props._tabsDidChange(activeTab);
+          tabDidChange && this.$props._tabsDidChange(activeTab);
+        /**
+         * When going to a tab that does
+         * not have an associated ion-tab-button
+         * we need to remove the selected state from
+        * the old tab.
+         */
+        } else {
+          tabBar.selectedTab = tabState.activeTab = '';
+        }
       }
     };
 

packages/vue/test-app/src/router/index.ts

@@ -107,6 +107,10 @@ const routes: Array<RouteRecordRaw> = [
           next({ path: '/tabs/tab1' });
         },
         component: () => import('@/views/Tab3.vue')
+      },
+      {
+        path: 'tab4',
+        component: () => import('@/views/Tab4.vue')
       }
     ]
   },

packages/vue/test-app/src/views/Tab4.vue

@@ -0,0 +1,27 @@
+<template>
+  <ion-page data-pageid="tab4">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Tab 4</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Tab 4</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ExploreContainer name="Tab 4 page" />
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+import ExploreContainer from '@/components/ExploreContainer.vue';
+
+export default  {
+  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
+}
+</script>

packages/vue/test-app/tests/e2e/specs/tabs.js

@@ -207,6 +207,19 @@ describe('Tabs', () => {
     cy.ionPageVisible('tab2');
     cy.ionPageVisible('tabs');
   });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22597
+  it('should deselect old tab button when going to a tab that does not have a tab button', () => {
+    cy.visit('http://localhost:8080/tabs/tab1');
+
+    cy.get('ion-tab-button#tab-button-tab1').should('have.class', 'tab-selected');
+
+    cy.routerPush('/tabs/tab4');
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab4');
+
+    cy.get('ion-tab-button#tab-button-tab1').should('not.have.class', 'tab-selected');
+  });
 })
 
 describe('Tabs - Swipe to Go Back', () => {