bug: ionTabsDidChange event not triggering in Ionic 8 (React)

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

The ionTabsDidChange event does not trigger in Ionic 8. This issue does not occur in Ionic 7, where the event triggers as expected.

Expected Behavior

The ionTabsDidChange event should trigger in Ionic 8 when a tab is changed, just as it does in Ionic 7.

Steps to Reproduce

Initialize a new Ionic project using the tabs template:

ionic start project tabs

This installs Ionic 7 by default.

Add a listener for the ionTabsDidChange event in the IonTabs component and include a console.log() to verify the event is triggered.

<IonTabs onIonTabsDidChange={(e) => console.log('onIonTabsDidChange', e.detail.tab)}>
...
</IonTabs>

Confirm that the event works as expected by running the project.
Upgrade to Ionic 8 by running:

npm i @ionic/react@8 @ionic/react-router@8

Run the project again and observe that the ionTabsDidChange event no longer triggers when switching tabs.

Code Reproduction URL

https://codesandbox.io/p/sandbox/purple-hooks-tsmpmp

Ionic Info

Ionic:

Ionic CLI : 5.4.16 (C:\Users\sergio\AppData\Local\npm-cache_npx\864a9e3c2cd0cf50\node_modules\ionic)
Ionic Framework : @ionic/react 8.4.1

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v18.19.0 (C:\Program Files\nodejs\node.exe)
npm : 10.2.3
OS : Windows 11

Additional Information

No response

same happens to me, I added the events to the ionic starter project and the logs are not triggered:

downgrading to "@ionic/react-router": "^7.8.5" solves it

import { Redirect, Route } from "react-router-dom";
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact,
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { ellipse, square, triangle } from "ionicons/icons";
import Tab1 from "./pages/Tab1";
import Tab2 from "./pages/Tab2";
import Tab3 from "./pages/Tab3";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

/* import '@ionic/react/css/palettes/dark.always.css'; */
/* import '@ionic/react/css/palettes/dark.class.css'; */
import "@ionic/react/css/palettes/dark.system.css";

/* Theme variables */
import "./theme/variables.css";

setupIonicReact();

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs
        onIonTabsDidChange={($event) => console.log($event.detail.tab)}
        onIonTabsWillChange={(e) => console.log("onIonTabsDidChange", e.detail)}
      >
        <IonRouterOutlet>
          <Route exact path="/tab1">
            <Tab1 />
          </Route>
          <Route exact path="/tab2">
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/tab1" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon aria-hidden="true" icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon aria-hidden="true" icon={ellipse} />
            <IonLabel>Tab 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon aria-hidden="true" icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

Problem persists on @ionic/react v8.5.7

Same issue here. Big problem for us.

Possibly related to #22233.

Is there a way to add the listener through the node with a ref?

still persist on @ionic/react-router 8.7.7 , please fix it. we really need this.

fix(IonTabBar): correctly reference onIonTabsWillChange and onIonTabs…

fix(tab-bar): fire tab change events on tab click (ionic-team#31262)

Thanks for the report! This has been fixed in 8.8.14!

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

fix(tab-bar): fire tab change events on tab click (ionic-team#31262)

Navigation Menu

Repository navigation

bug: ionTabsDidChange event not triggering in Ionic 8 (React) #30145

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug: ionTabsDidChange event not triggering in Ionic 8 (React) #30145

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

jramosg commented on Feb 8, 2025

ohmycode commented on May 8, 2025

oliveryasuna commented on May 27, 2025

oliveryasuna commented on May 27, 2025

msio commented on Nov 27, 2025

ShaneK commented on Jul 15, 2026

ionitron-bot commented on Aug 14, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions