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

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

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 = '';
}
}
};