fix(vue): improve query params handling in tabs (#24355)

resolves #24353
This commit is contained in:
Liam DeBeasi
2021-12-09 10:42:43 -05:00
committed by GitHub
parent 672ab80807
commit 6309d5ddba
2 changed files with 32 additions and 2 deletions

View File

@ -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

View File

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