From 07c230469cc8e256fcab739d66890605c370cf40 Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Fri, 10 Jul 2026 14:01:35 -0500
Subject: [PATCH 1/3] fix(IonTabBar): correctly reference onIonTabsWillChange
 and onIonTabsDidChange in onTabButtonClick

change incorrect references `this.props.onIonTabs[Did/Will]Change` to `this.props.tabsContext.tabBarProps.onIonTabs[Did/Will]Change` inside React IonTabBar onTabButtonClick

closes #30145
---
 .../src/components/navigation/IonTabBar.tsx      | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx
index 124b00f6990..b10e6b3556e 100644
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/packages/react/src/components/navigation/IonTabBar.tsx
@@ -224,11 +224,17 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
         this.context.resetTab(e.detail.tab, originalHref, tappedTab.originalRouteOptions);
       }
     } else {
-      if (this.props.onIonTabsWillChange) {
-        this.props.onIonTabsWillChange(new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } }));
-      }
-      if (this.props.onIonTabsDidChange) {
-        this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
+      if (this.props.tabsContext) {
+        if (this.props.tabsContext.tabBarProps.onIonTabsWillChange) {
+          this.props.tabsContext.tabBarProps.onIonTabsWillChange(
+            new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } })
+          );
+        }
+        if (this.props.tabsContext.tabBarProps.onIonTabsDidChange) {
+          this.props.tabsContext.tabBarProps.onIonTabsDidChange(
+            new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } })
+          );
+        }
       }
       if (hasRouterOutlet) {
         this.setActiveTabOnContext(e.detail.tab);

From 53b8177b82ed01dc50a022c8208ae3d095265409 Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Mon, 13 Jul 2026 12:33:44 -0500
Subject: [PATCH 2/3] fix(IonTabBar): fall back to
 props.onIonTabs[Did/Will]Change if
 props.tabsContext?.tabBarProps.onIonTabs[Did/Will]Change is not available

---
 .../src/components/navigation/IonTabBar.tsx   | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx
index b10e6b3556e..ab1db62f197 100644
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/packages/react/src/components/navigation/IonTabBar.tsx
@@ -224,18 +224,20 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
         this.context.resetTab(e.detail.tab, originalHref, tappedTab.originalRouteOptions);
       }
     } else {
+      let onWillChange = this.props.onIonTabsWillChange;
+      let onDidChange = this.props.onIonTabsDidChange;
       if (this.props.tabsContext) {
-        if (this.props.tabsContext.tabBarProps.onIonTabsWillChange) {
-          this.props.tabsContext.tabBarProps.onIonTabsWillChange(
-            new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } })
-          );
-        }
-        if (this.props.tabsContext.tabBarProps.onIonTabsDidChange) {
-          this.props.tabsContext.tabBarProps.onIonTabsDidChange(
-            new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } })
-          );
-        }
+        onWillChange = this.props.tabsContext?.tabBarProps.onIonTabsWillChange ?? this.props.onIonTabsWillChange;
+        onDidChange = this.props.tabsContext?.tabBarProps.onIonTabsDidChange ?? this.props.onIonTabsDidChange;
+      }
+
+      if (onWillChange) {
+        onWillChange(new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } }));
+      }
+      if (onDidChange) {
+        onDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
       }
+
       if (hasRouterOutlet) {
         this.setActiveTabOnContext(e.detail.tab);
         this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);

From 527911d27477da84166ffb6ec828247f65f12a0c Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Mon, 13 Jul 2026 13:27:16 -0500
Subject: [PATCH 3/3] test(IonTabBar): test for onIonTabs[Did/Will]Change
 firing

---
 .../test/base/tests/e2e/specs/tabs/tabs.cy.ts     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts b/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts
index 34b4ee4f1e6..2d8b4302cd0 100644
--- a/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts
@@ -2,7 +2,7 @@ describe('IonTabs', () => {
   /**
    * Verifies that tabs with similar route prefixes (e.g., /home, /home2, /home3)
    * correctly select the matching tab instead of the first prefix match.
-   * 
+   *
    * @see https://github.com/ionic-team/ionic-framework/issues/30448
    */
   describe('Similar Route Prefixes', () => {
@@ -58,7 +58,11 @@ describe('IonTabs', () => {
 
   describe('Without IonRouterOutlet', () => {
     beforeEach(() => {
-      cy.visit('/tabs-basic');
+      cy.visit('/tabs-basic', {
+        onBeforeLoad(win) {
+          cy.spy(win.console, 'log').as('consoleLog');
+        },
+      });
     });
 
     it.skip('should show correct tab when clicking the tab button', () => {
@@ -83,5 +87,12 @@ describe('IonTabs', () => {
 
       cy.url().should('include', '/tabs-basic');
     });
+
+    it('should fire tab change events on tab click', () => {
+      cy.get('ion-tab-button[tab="tab2"]').click();
+
+      cy.get('@consoleLog').should('be.calledWith', 'onIonTabsWillChange', 'tab2');
+      cy.get('@consoleLog').should('be.calledWith', 'onIonTabsDidChange:', 'tab2');
+    });
   });
 });