diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts index e307c7a1b4..876844ca1e 100644 --- a/packages/vue/src/components/IonTabBar.ts +++ b/packages/vue/src/components/IonTabBar.ts @@ -113,7 +113,14 @@ export const IonTabBar = defineComponent({ * land on /tabs/tab1/child instead of /tabs/tab1. */ if (activeTab !== prevActiveTab || (prevHref !== currentRoute.pathname)) { - const search = (currentRoute.search !== undefined) ? `?${currentRoute.search}` : ''; + + /** + * By default the search is `undefined` in Ionic Vue, + * but Vue Router can set the search to the empty string. + * We check for truthy here because empty string is falsy + * and currentRoute.search cannot ever be a boolean. + */ + const search = (currentRoute.search) ? `?${currentRoute.search}` : ''; tabs[activeTab] = { ...tabs[activeTab], currentHref: currentRoute.pathname + search diff --git a/packages/vue/test-app/tests/e2e/specs/tabs.js b/packages/vue/test-app/tests/e2e/specs/tabs.js index 6a831134de..376ebfa1a3 100644 --- a/packages/vue/test-app/tests/e2e/specs/tabs.js +++ b/packages/vue/test-app/tests/e2e/specs/tabs.js @@ -305,7 +305,30 @@ describe('Tabs', () => { cy.ionPageHidden('tab2'); cy.url().should('include', '/tabs/tab1/child-one?key=value'); - }) + }); + + // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23699 + it('should handle clicking tab multiple times without query string', () => { + cy.visit('http://localhost:8080/tabs/tab1'); + + cy.ionPageVisible('tab1'); + + cy.get('ion-tab-button#tab-button-tab2').click(); + cy.ionPageVisible('tab2'); + cy.ionPageHidden('tab1'); + + cy.get('ion-tab-button#tab-button-tab1').click(); + cy.ionPageVisible('tab1'); + cy.ionPageHidden('tab2'); + + cy.get('ion-tab-button#tab-button-tab1').click(); + cy.ionPageVisible('tab1'); + cy.ionPageHidden('tab2'); + + cy.get('ion-tab-button#tab-button-tab2').click(); + cy.ionPageVisible('tab2'); + cy.ionPageHidden('tab1'); + }); }) describe('Tabs - Swipe to Go Back', () => {