merge release-8.7.6 (#30720)

v8.7.6

Author: brandyscarney

CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08)
+
+
+### Bug Fixes
+
+* **tabs:** respect stencil lifecycle order for tab selection ([#30702](https://github.com/ionic-team/ionic-framework/issues/30702)) ([7bb9535](https://github.com/ionic-team/ionic-framework/commit/7bb9535f601d2469ce60687a9c03f8b1cfe4aba4)), closes [#30611](https://github.com/ionic-team/ionic-framework/issues/30611)
+
+
+
+
+
 ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
 
 

core/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08)
+
+
+### Bug Fixes
+
+* **tabs:** respect stencil lifecycle order for tab selection ([#30702](https://github.com/ionic-team/ionic-framework/issues/30702)) ([7bb9535](https://github.com/ionic-team/ionic-framework/commit/7bb9535f601d2469ce60687a9c03f8b1cfe4aba4)), closes [#30611](https://github.com/ionic-team/ionic-framework/issues/30611)
+
+
+
+
+
 ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
 
 

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.5",
+  "version": "8.7.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "4.36.2",
+    "@stencil/core": "4.38.0",
     "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },

core/package.json

@@ -22,6 +22,7 @@ import type { TabBarChangedEventDetail } from './tab-bar-interface';
 })
 export class TabBar implements ComponentInterface {
   private keyboardCtrl: KeyboardController | null = null;
+  private didLoad = false;
 
   @Element() el!: HTMLElement;
 
@@ -40,6 +41,12 @@ export class TabBar implements ComponentInterface {
   @Prop() selectedTab?: string;
   @Watch('selectedTab')
   selectedTabChanged() {
+    // Skip the initial watcher call that happens during component load
+    // We handle that in componentDidLoad to ensure children are ready
+    if (!this.didLoad) {
+      return;
+    }
+
     if (this.selectedTab !== undefined) {
       this.ionTabBarChanged.emit({
         tab: this.selectedTab,
@@ -65,8 +72,19 @@ export class TabBar implements ComponentInterface {
    */
   @Event() ionTabBarLoaded!: EventEmitter<void>;
 
-  componentWillLoad() {
-    this.selectedTabChanged();
+  componentDidLoad() {
+    this.ionTabBarLoaded.emit();
+    // Set the flag to indicate the component has loaded
+    // This allows the watcher to emit changes from this point forward
+    this.didLoad = true;
+
+    // Emit the initial selected tab after the component is fully loaded
+    // This ensures all child components (ion-tab-button) are ready
+    if (this.selectedTab !== undefined) {
+      this.ionTabBarChanged.emit({
+        tab: this.selectedTab,
+      });
+    }
   }
 
   async connectedCallback() {
@@ -90,10 +108,6 @@ export class TabBar implements ComponentInterface {
     }
   }
 
-  componentDidLoad() {
-    this.ionTabBarLoaded.emit();
-  }
-
   render() {
     const { color, translucent, keyboardVisible } = this;
     const mode = getIonMode(this);

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

@@ -65,32 +65,33 @@ 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;
-          }
-        }
-      }
+    if (!tabBar) {
+      return;
+    }
 
-      tabBar.selectedTab = tab;
+    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;
   }
 
   /**
@@ -162,6 +163,7 @@ export class Tabs implements NavOutlet {
     this.selectedTab = selectedTab;
     this.ionTabsWillChange.emit({ tab: selectedTab.tab });
     selectedTab.active = true;
+    this.updateTabBar();
     return Promise.resolve();
   }
 

core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png

@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.7.5"
+  "version": "8.7.6"
 }

core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
 
 **Note:** Version bump only for package @ionic/angular-server