From d746561ea29e61db2cfb55d2765b5548fd8b5a78 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 7 Oct 2020 09:37:25 -0400
Subject: [PATCH] fix(vue): ion-tab-bar no longer throws undefined error when
 re-creating tabs (#22261)

resolves #22255
---
 packages/vue/src/components/IonTabBar.ts      |  4 ++--
 packages/vue/test-app/src/views/Tab1.vue      |  9 ++++++---
 packages/vue/test-app/src/views/Tabs.vue      | 12 ++++++------
 packages/vue/test-app/tests/e2e/specs/tabs.js | 19 +++++++++++++++++++
 4 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 packages/vue/test-app/tests/e2e/specs/tabs.js

diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts
index ee4e399fdc..85079abd8d 100644
--- a/packages/vue/src/components/IonTabBar.ts
+++ b/packages/vue/src/components/IonTabBar.ts
@@ -9,10 +9,10 @@ export const IonTabBar = defineComponent({
       // TODO types
       const tabs = Array.from(this.$el.querySelectorAll('ion-tab-button')) as any[];
       const activeTab = tabs.find(tab => currentRoute.pathname.startsWith(tab.href));
+      const tabBar = this.$refs.ionTabBar;
 
-      if (activeTab) {
+      if (activeTab && tabBar) {
         ionRouter.handleSetCurrentTab(activeTab.tab);
-        const tabBar = this.$refs.ionTabBar;
         tabBar.selectedTab = activeTab.tab;
       }
     }
diff --git a/packages/vue/test-app/src/views/Tab1.vue b/packages/vue/test-app/src/views/Tab1.vue
index 5a1ed75132..9d91263f6f 100644
--- a/packages/vue/test-app/src/views/Tab1.vue
+++ b/packages/vue/test-app/src/views/Tab1.vue
@@ -1,7 +1,10 @@
 <template>
-  <ion-page>
+  <ion-page data-pageid="tab1">
     <ion-header>
       <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
         <ion-title>Tab 1</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -18,11 +21,11 @@
 </template>
 
 <script>
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+import { IonButtons, IonBackButton, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 
 export default  {
   name: 'Tab1',
-  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
+  components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
 }
 </script>
diff --git a/packages/vue/test-app/src/views/Tabs.vue b/packages/vue/test-app/src/views/Tabs.vue
index 3463fce4fa..16497a81c7 100644
--- a/packages/vue/test-app/src/views/Tabs.vue
+++ b/packages/vue/test-app/src/views/Tabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <ion-page>
+  <ion-page data-pageid="tabs">
     <ion-content>
       <ion-tabs>
         <ion-tab-bar slot="bottom">
@@ -7,12 +7,12 @@
             <ion-icon :icon="triangle" />
             <ion-label>Tab 1</ion-label>
           </ion-tab-button>
-            
+
           <ion-tab-button tab="tab2" href="/tabs/tab2">
             <ion-icon :icon="ellipse" />
             <ion-label>Tab 2</ion-label>
           </ion-tab-button>
-          
+
           <ion-tab-button tab="tab3" href="/tabs/tab3">
             <ion-icon :icon="square" />
             <ion-label>Tab 3</ion-label>
@@ -32,10 +32,10 @@ export default {
   components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
   setup() {
     return {
-      ellipse, 
-      square, 
+      ellipse,
+      square,
       triangle,
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/packages/vue/test-app/tests/e2e/specs/tabs.js b/packages/vue/test-app/tests/e2e/specs/tabs.js
new file mode 100644
index 0000000000..7839f56023
--- /dev/null
+++ b/packages/vue/test-app/tests/e2e/specs/tabs.js
@@ -0,0 +1,19 @@
+describe('Tabs', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080')
+  })
+
+  it('should be able to create and destroy tabs', () => {
+    cy.get('#tabs').click();
+    cy.ionPageVisible('tab1');
+
+    cy.ionBackClick('tab1');
+    cy.ionPageDoesNotExist('tabs');
+
+    cy.get('#tabs').click();
+    cy.ionPageVisible('tab1');
+
+    cy.ionBackClick('tab1');
+    cy.ionPageDoesNotExist('tabs');
+  });
+})