From 61cf0c534e45ce09410be6bfb50bdc27b657d1bc Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 8 Dec 2020 12:49:13 -0500
Subject: [PATCH] fix(vue): adding non tab button elements inside ion-tab-bar
 no longer causes errors (#22643)

resolves #22642
---
 packages/vue/src/components/IonTabBar.ts      |  7 ++--
 .../vue/test-app/tests/unit/tab-bar.spec.ts   | 34 +++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts
index 343fab1558..b8dd334e21 100644
--- a/packages/vue/src/components/IonTabBar.ts
+++ b/packages/vue/src/components/IonTabBar.ts
@@ -24,6 +24,7 @@ export const IonTabBar = defineComponent({
         tabs: {}
     };
     const currentInstance = getCurrentInstance();
+    const isTabButton = (child: any) => child.type?.name === 'IonTabButton';
     /**
      * For each tab, we need to keep track of its
      * base href as well as any child page that
@@ -33,7 +34,7 @@ export const IonTabBar = defineComponent({
      */
     const children = (currentInstance.subTree.children || []) as VNode[];
     children.forEach((child: VNode) => {
-      if (child.type && (child.type as any).name === 'IonTabButton') {
+      if (isTabButton(child)) {
         tabState.tabs[child.props.tab] = {
           originalHref: child.props.href,
           currentHref: child.props.href,
@@ -65,7 +66,7 @@ export const IonTabBar = defineComponent({
        * it in the tabs state.
        */
       childNodes.forEach((child: VNode) => {
-        if (child.type && (child.type as any).name === 'IonTabButton') {
+        if (isTabButton(child)) {
           const tab = tabs[child.props.tab];
           if (!tab || (tab.originalHref !== child.props.href)) {
 
@@ -106,7 +107,7 @@ export const IonTabBar = defineComponent({
         }
       }
 
-      const activeChild = childNodes.find((child: VNode) => child.props.tab === activeTab);
+      const activeChild = childNodes.find((child: VNode) => isTabButton(child) && child.props?.tab === activeTab);
       const tabBar = this.$refs.ionTabBar;
       const tabDidChange = activeTab !== prevActiveTab;
       if (activeChild && tabBar) {
diff --git a/packages/vue/test-app/tests/unit/tab-bar.spec.ts b/packages/vue/test-app/tests/unit/tab-bar.spec.ts
index 26b4aea2e4..3021ca7d94 100644
--- a/packages/vue/test-app/tests/unit/tab-bar.spec.ts
+++ b/packages/vue/test-app/tests/unit/tab-bar.spec.ts
@@ -102,4 +102,38 @@ describe('ion-tab-bar', () => {
     const innerHTML = wrapper.find('ion-tabs').html();
     expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet tabs="true"></ion-router-outlet></div><ion-tab-bar></ion-tab-bar></ion-tabs>`)
   });
+
+  // Verifies the fix for https://github.com/ionic-team/ionic-framework/issues/22642
+  it('should not fail on non tab button elements', async () => {
+    const Tabs = {
+      components: { IonPage, IonTabs, IonTabBar },
+      template: `
+        <ion-page>
+          <ion-tabs>
+            <ion-tab-bar>
+              <!-- my comment -->
+            </ion-tab-bar>
+          </ion-tabs>
+        </ion-page>
+      `,
+    }
+
+    const router = createRouter({
+      history: createWebHistory(process.env.BASE_URL),
+      routes: [
+        { path: '/', component: Tabs }
+      ]
+    });
+
+    router.push('/');
+    await router.isReady();
+    const wrapper = mount(App, {
+      global: {
+        plugins: [router, IonicVue]
+      }
+    });
+
+    const innerHTML = wrapper.find('ion-tabs').html();
+    expect(innerHTML).toContain(`><ion-tab-bar><!-- my comment --></ion-tab-bar>`)
+  })
 });