javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): correctly remove active state from tab button when navigating away from tab (#23000)

Browse Source 
resolves #22597
This commit is contained in:
Liam DeBeasi
2021-03-03 09:26:46 -05:00
committed by GitHub
parent 943e3f6ae3
commit a2763afe8e
4 changed files with 59 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/vue/src/components/IonTabBar.ts
View File

@ -110,13 +110,23 @@ export const IonTabBar = defineComponent({
const activeChild = childNodes.find((child: VNode) => isTabButton(child) && child.props?.tab === activeTab);
const tabBar = this.$refs.ionTabBar;
const tabDidChange = activeTab !== prevActiveTab;
if (activeChild && tabBar) {
tabDidChange && this.$props._tabsWillChange(activeTab);
if (tabBar) {
if (activeChild) {
tabDidChange && this.$props._tabsWillChange(activeTab);
ionRouter.handleSetCurrentTab(activeTab);
tabBar.selectedTab = tabState.activeTab = activeTab;
ionRouter.handleSetCurrentTab(activeTab);
tabBar.selectedTab = tabState.activeTab = activeTab;
tabDidChange && this.$props._tabsDidChange(activeTab);
tabDidChange && this.$props._tabsDidChange(activeTab);
/**
* When going to a tab that does
* not have an associated ion-tab-button
* we need to remove the selected state from
* the old tab.
*/
} else {
tabBar.selectedTab = tabState.activeTab = '';
}
}
};

4
packages/vue/test-app/src/router/index.ts
View File

@ -107,6 +107,10 @@ const routes: Array<RouteRecordRaw> = [
next({ path: '/tabs/tab1' });
},
component: () => import('@/views/Tab3.vue')
},
{
path: 'tab4',
component: () => import('@/views/Tab4.vue')
}
]
},

27
packages/vue/test-app/src/views/Tab4.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<ion-page data-pageid="tab4">
<ion-header>
<ion-toolbar>
<ion-title>Tab 4</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 4</ion-title>
</ion-toolbar>
</ion-header>
<ExploreContainer name="Tab 4 page" />
</ion-content>
</ion-page>
</template>
<script>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
export default {
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>

13
packages/vue/test-app/tests/e2e/specs/tabs.js
View File

@ -207,6 +207,19 @@ describe('Tabs', () => {
cy.ionPageVisible('tab2');
cy.ionPageVisible('tabs');
});
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22597
it('should deselect old tab button when going to a tab that does not have a tab button', () => {
cy.visit('http://localhost:8080/tabs/tab1');
cy.get('ion-tab-button#tab-button-tab1').should('have.class', 'tab-selected');
cy.routerPush('/tabs/tab4');
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab4');
cy.get('ion-tab-button#tab-button-tab1').should('not.have.class', 'tab-selected');
});
})
describe('Tabs - Swipe to Go Back', () => {