Adding fallback for edge case

Author: ShaneK

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

@@ -106,9 +106,23 @@ export class TabButton implements ComponentInterface, AnchorInterface {
 
     // Check if this tab button should be initially selected based on parent tab-bar's selectedTab prop
     // This handles the case where selected-tab is set via HTML attribute before events fire
+    this.syncWithTabBar();
+  }
+
+  componentDidLoad() {
+    // Double-check selection state after load to handle any timing issues
+    // This ensures the button reflects the correct state even if the initial check was too early
+    this.syncWithTabBar();
+  }
+
+  private syncWithTabBar() {
     const tabBar = this.el.parentElement as HTMLIonTabBarElement | null;
-    if (tabBar && tabBar.tagName === 'ION-TAB-BAR' && tabBar.selectedTab !== undefined) {
-      this.selected = this.tab === tabBar.selectedTab;
+    if (tabBar && tabBar.tagName === 'ION-TAB-BAR') {
+      // Check both the property and attribute to handle all initialization scenarios
+      const selectedTab = tabBar.selectedTab ?? tabBar.getAttribute('selected-tab');
+      if (selectedTab !== null && selectedTab !== undefined) {
+        this.selected = this.tab === selectedTab;
+      }
     }
   }
 

core/src/components/tabs/tabs.tsx

@@ -75,10 +75,23 @@ export class Tabs implements NavOutlet {
 
   private updateTabBar() {
     const tabBar = this.el.querySelector('ion-tab-bar');
-    if (tabBar) {
-      const tab = this.selectedTab ? this.selectedTab.tab : undefined;
-      tabBar.selectedTab = tab;
+    if (!tabBar) {
+      return;
+    }
+
+    const tab = this.selectedTab ? this.selectedTab.tab : undefined;
+
+    // If tabs has no selected tab but tab-bar already has a selected-tab set,
+    // don't overwrite it. This handles cases where tab-bar is used without ion-tab elements.
+    if (tab === undefined) {
+      return;
     }
+
+    if (tabBar.selectedTab === tab) {
+      return;
+    }
+
+    tabBar.selectedTab = tab;
   }
 
   /**