chore(): sync vue tabs changes with master

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

@@ -105,6 +105,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/Lifecycle.vue

@@ -22,6 +22,11 @@
         ionViewWillLeave: <div id="willLeave">{{ willLeave }}</div><br />
         ionViewDidLeave: <div id="didLeave">{{ didLeave }}</div><br />
 
+        onIonViewWillEnter: <div id="onWillEnter">{{ onWillEnter }}</div><br />
+        onIonViewDidEnter: <div id="onDidEnter">{{ onDidEnter }}</div><br />
+        onIonViewWillLeave: <div id="onWillLeave">{{ onWillLeave }}</div><br />
+        onIonViewDidLeave: <div id="onDidLeave">{{ onDidLeave }}</div><br />
+
         <ion-button router-link="/navigation" id="lifecycle-navigation">Go to another page</ion-button>
       </div>
     </ion-content>
@@ -37,9 +42,13 @@ import {
   IonHeader,
   IonPage,
   IonTitle,
-  IonToolbar
+  IonToolbar,
+  onIonViewWillEnter,
+  onIonViewDidEnter,
+  onIonViewWillLeave,
+  onIonViewDidLeave
 } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 export default defineComponent({
   components: {
     IonButton,
@@ -65,6 +74,24 @@ export default defineComponent({
       this.didLeave++;
     }
   },
+  setup() {
+    const onWillEnter = ref(0);
+    const onDidEnter = ref(0);
+    const onWillLeave = ref(0);
+    const onDidLeave = ref(0);
+
+    onIonViewWillEnter(() => onWillEnter.value += 1);
+    onIonViewDidEnter(() => onDidEnter.value += 1);
+    onIonViewWillLeave(() => onWillLeave.value += 1);
+    onIonViewDidLeave(() => onDidLeave.value += 1);
+
+    return {
+      onWillEnter,
+      onDidEnter,
+      onWillLeave,
+      onDidLeave
+    }
+  },
   data() {
     return {
       willEnter: 0,

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/lifecycle.js

@@ -7,7 +7,11 @@ describe('Lifecycle', () => {
       ionViewWillEnter: 1,
       ionViewDidEnter: 1,
       ionViewWillLeave: 0,
-      ionViewDidLeave: 0
+      ionViewDidLeave: 0,
+      onIonViewWillEnter: 1,
+      onIonViewDidEnter: 1,
+      onIonViewWillLeave: 0,
+      onIonViewDidLeave: 0
     });
 
     cy.get('#lifecycle-navigation').click();
@@ -16,7 +20,11 @@ describe('Lifecycle', () => {
       ionViewWillEnter: 1,
       ionViewDidEnter: 1,
       ionViewWillLeave: 1,
-      ionViewDidLeave: 1
+      ionViewDidLeave: 1,
+      onIonViewWillEnter: 1,
+      onIonViewDidEnter: 1,
+      onIonViewWillLeave: 1,
+      onIonViewDidLeave: 1
     });
 
     cy.ionBackClick('navigation');
@@ -25,7 +33,11 @@ describe('Lifecycle', () => {
       ionViewWillEnter: 2,
       ionViewDidEnter: 2,
       ionViewWillLeave: 1,
-      ionViewDidLeave: 1
+      ionViewDidLeave: 1,
+      onIonViewWillEnter: 2,
+      onIonViewDidEnter: 2,
+      onIonViewWillLeave: 1,
+      onIonViewDidLeave: 1
     });
   });
 
@@ -36,7 +48,11 @@ describe('Lifecycle', () => {
       ionViewWillEnter: 1,
       ionViewDidEnter: 1,
       ionViewWillLeave: 0,
-      ionViewDidLeave: 0
+      ionViewDidLeave: 0,
+      onIonViewWillEnter: 1,
+      onIonViewDidEnter: 1,
+      onIonViewWillLeave: 0,
+      onIonViewDidLeave: 0
     });
   });
 })
@@ -46,4 +62,9 @@ const testLifecycle = (selector, expected = {}) => {
   cy.get(`[data-pageid=${selector}] #didEnter`).should('have.text', expected.ionViewDidEnter);
   cy.get(`[data-pageid=${selector}] #willLeave`).should('have.text', expected.ionViewWillLeave);
   cy.get(`[data-pageid=${selector}] #didLeave`).should('have.text', expected.ionViewDidLeave);
+
+  cy.get(`[data-pageid=${selector}] #onWillEnter`).should('have.text', expected.onIonViewWillEnter);
+  cy.get(`[data-pageid=${selector}] #onDidEnter`).should('have.text', expected.onIonViewDidEnter);
+  cy.get(`[data-pageid=${selector}] #onWillLeave`).should('have.text', expected.onIonViewWillLeave);
+  cy.get(`[data-pageid=${selector}] #onDidLeave`).should('have.text', expected.onIonViewDidLeave);
 }

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

@@ -190,6 +190,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', () => {