Skip to content

Commit 1c28750

Browse files
committedDec 15, 2021
fix(vue): improve query params handling in tabs (#24355)
resolves #24353
1 parent d665ace commit 1c28750

File tree

2 files changed

+32
-2
lines changed

2 files changed

+32
-2
lines changed
 

‎packages/vue/src/components/IonTabBar.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,14 @@ export const IonTabBar = defineComponent({
113113
* land on /tabs/tab1/child instead of /tabs/tab1.
114114
*/
115115
if (activeTab !== prevActiveTab || (prevHref !== currentRoute.pathname)) {
116-
const search = (currentRoute.search !== undefined) ? `?${currentRoute.search}` : '';
116+
117+
/**
118+
* By default the search is `undefined` in Ionic Vue,
119+
* but Vue Router can set the search to the empty string.
120+
* We check for truthy here because empty string is falsy
121+
* and currentRoute.search cannot ever be a boolean.
122+
*/
123+
const search = (currentRoute.search) ? `?${currentRoute.search}` : '';
117124
tabs[activeTab] = {
118125
...tabs[activeTab],
119126
currentHref: currentRoute.pathname + search

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

+24-1
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,30 @@ describe('Tabs', () => {
305305
cy.ionPageHidden('tab2');
306306

307307
cy.url().should('include', '/tabs/tab1/child-one?key=value');
308-
})
308+
});
309+
310+
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23699
311+
it('should handle clicking tab multiple times without query string', () => {
312+
cy.visit('http://localhost:8080/tabs/tab1');
313+
314+
cy.ionPageVisible('tab1');
315+
316+
cy.get('ion-tab-button#tab-button-tab2').click();
317+
cy.ionPageVisible('tab2');
318+
cy.ionPageHidden('tab1');
319+
320+
cy.get('ion-tab-button#tab-button-tab1').click();
321+
cy.ionPageVisible('tab1');
322+
cy.ionPageHidden('tab2');
323+
324+
cy.get('ion-tab-button#tab-button-tab1').click();
325+
cy.ionPageVisible('tab1');
326+
cy.ionPageHidden('tab2');
327+
328+
cy.get('ion-tab-button#tab-button-tab2').click();
329+
cy.ionPageVisible('tab2');
330+
cy.ionPageHidden('tab1');
331+
});
309332
})
310333

311334
describe('Tabs - Swipe to Go Back', () => {

0 commit comments

Comments
 (0)
Please sign in to comment.