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

Issue number: resolves #30145

---------

## What is the current behavior?
`ionic-react`'s `IonTabBar` tries to reference
`this.props.onIonTabsWillChange` and `this.props.onIonTabsDidChange`,
which do not exist, causing the `onIonTabsWillChange` and
`onIonTabsDidChange` events to never fire.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Update usage of `this.props.onIonTabsWillChange` to
`this.props.tabsContext.tabBarProps.onIonTabsWillChange`
- Update usage of `this.props.onIonTabsDidChange` to
`this.props.tabsContext.tabBarProps.onIonTabsDidChange`
- Add check to make sure `this.props.tabsContext` is truthy before using
it
- `onIonTabsWillChange` and `onIonTabsDidChange` fire as expected

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

Author: droc101

packages/react/src/components/navigation/IonTabBar.tsx

@@ -224,12 +224,20 @@ 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 } }));
+      let onWillChange = this.props.onIonTabsWillChange;
+      let onDidChange = this.props.onIonTabsDidChange;
+      if (this.props.tabsContext) {
+        onWillChange = this.props.tabsContext?.tabBarProps.onIonTabsWillChange ?? this.props.onIonTabsWillChange;
+        onDidChange = this.props.tabsContext?.tabBarProps.onIonTabsDidChange ?? this.props.onIonTabsDidChange;
       }
-      if (this.props.onIonTabsDidChange) {
-        this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
+
+      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);

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');
+    });
   });
 });