Skip to content

Commit 7b3b14b

Browse files
committed
Adding fallback for edge case
1 parent fb63784 commit 7b3b14b

File tree

1 file changed

+16
-2
lines changed

1 file changed

+16
-2
lines changed

core/src/components/tab-button/tab-button.tsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,23 @@ export class TabButton implements ComponentInterface, AnchorInterface {
106106

107107
// Check if this tab button should be initially selected based on parent tab-bar's selectedTab prop
108108
// This handles the case where selected-tab is set via HTML attribute before events fire
109+
this.syncWithTabBar();
110+
}
111+
112+
componentDidLoad() {
113+
// Double-check selection state after load to handle any timing issues
114+
// This ensures the button reflects the correct state even if the initial check was too early
115+
this.syncWithTabBar();
116+
}
117+
118+
private syncWithTabBar() {
109119
const tabBar = this.el.parentElement as HTMLIonTabBarElement | null;
110-
if (tabBar && tabBar.tagName === 'ION-TAB-BAR' && tabBar.selectedTab !== undefined) {
111-
this.selected = this.tab === tabBar.selectedTab;
120+
if (tabBar && tabBar.tagName === 'ION-TAB-BAR') {
121+
// Check both the property and attribute to handle all initialization scenarios
122+
const selectedTab = tabBar.selectedTab ?? tabBar.getAttribute('selected-tab');
123+
if (selectedTab !== null && selectedTab !== undefined) {
124+
this.selected = this.tab === selectedTab;
125+
}
112126
}
113127
}
114128

0 commit comments

Comments
 (0)