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

[sergioadimedia]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] 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

1. Initialize a new Ionic project using the tabs template:

ionic start project tabs

This installs Ionic 7 by default.

2. 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>

3. Confirm that the event works as expected by running the project.

4. Upgrade to Ionic 8 by running:

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

5. 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

[jramosg]

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;

[ohmycode]

Problem persists on @ionic/react v8.5.7

[oliveryasuna]

Same issue here. Big problem for us.

Possibly related to https://github.com/ionic-team/ionic-framework/pull/22233.

[oliveryasuna]

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

[msio]

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