Adding fallback for edge case

Author: ShaneK

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

@@ -85,6 +85,14 @@ export class TabButton implements ComponentInterface, AnchorInterface {
    */
   @Event() ionTabButtonClick!: EventEmitter<TabButtonClickEventDetail>;
 
+  @Listen('ionTabBarLoaded', { target: 'window' })
+  onTabBarLoaded(ev: Event) {
+    // Only respond to events from our parent tab-bar
+    if (ev.target === this.el.parentElement) {
+      this.syncWithTabBar();
+    }
+  }
+
   @Listen('ionTabBarChanged', { target: 'window' })
   onTabBarChanged(ev: CustomEvent<TabBarChangedEventDetail>) {
     const dispatchedFrom = ev.target as HTMLElement;
@@ -103,12 +111,16 @@ export class TabButton implements ComponentInterface, AnchorInterface {
     if (this.layout === undefined) {
       this.layout = config.get('tabButtonLayout', 'icon-top');
     }
+  }
 
-    // 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
+  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;
   }
 
   /**