fix(tabs): respect stencil lifecycle order for tab selection

Author: ShaneK

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

@@ -65,7 +65,10 @@ export class TabBar implements ComponentInterface {
    */
   @Event() ionTabBarLoaded!: EventEmitter<void>;
 
-  componentWillLoad() {
+  componentDidLoad() {
+    this.ionTabBarLoaded.emit();
+    // Emit the initial selected tab after the component is fully loaded
+    // This ensures all child components (ion-tab-button) are ready
     this.selectedTabChanged();
   }
 
@@ -90,10 +93,6 @@ export class TabBar implements ComponentInterface {
     }
   }
 
-  componentDidLoad() {
-    this.ionTabBarLoaded.emit();
-  }
-
   render() {
     const { color, translucent, keyboardVisible } = this;
     const mode = getIonMode(this);

core/src/components/tabs/tabs.tsx

@@ -65,30 +65,18 @@ export class Tabs implements NavOutlet {
     this.ionNavWillLoad.emit();
   }
 
-  componentWillRender() {
+  componentDidLoad() {
+    this.updateTabBar();
+  }
+
+  componentDidUpdate() {
+    this.updateTabBar();
+  }
+
+  private updateTabBar() {
     const tabBar = this.el.querySelector('ion-tab-bar');
     if (tabBar) {
-      let tab = this.selectedTab ? this.selectedTab.tab : undefined;
-
-      // Fallback: if no selectedTab is set but we're using router mode,
-      // determine the active tab from the current URL. This works around
-      // timing issues in React Router integration where setRouteId may not
-      // be called in time for the initial render.
-      // TODO(FW-6724): Remove this with React Router upgrade
-      if (!tab && this.useRouter && typeof window !== 'undefined') {
-        const currentPath = window.location.pathname;
-        const tabButtons = this.el.querySelectorAll('ion-tab-button');
-
-        // Look for a tab button that matches the current path pattern
-        for (const tabButton of tabButtons) {
-          const tabId = tabButton.getAttribute('tab');
-          if (tabId && currentPath.includes(tabId)) {
-            tab = tabId;
-            break;
-          }
-        }
-      }
-
+      const tab = this.selectedTab ? this.selectedTab.tab : undefined;
       tabBar.selectedTab = tab;
     }
   }
@@ -162,6 +150,7 @@ export class Tabs implements NavOutlet {
     this.selectedTab = selectedTab;
     this.ionTabsWillChange.emit({ tab: selectedTab.tab });
     selectedTab.active = true;
+    this.updateTabBar();
     return Promise.resolve();
   }