fix(react): IonTabButton will call custom onClick handlers (#25313)

Resolves #22511

packages/react/test-app/src/App.tsx

@@ -24,6 +24,7 @@ import './theme/variables.css';
 import Main from './pages/Main';
 import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
 import OverlayComponents from './pages/overlay-components/OverlayComponents';
+import Tabs from './pages/Tabs';
 
 setupIonicReact();
 
@@ -34,6 +35,7 @@ const App: React.FC = () => (
         <Route path="/" component={Main} />
         <Route path="/overlay-hooks" component={OverlayHooks} />
         <Route path="/overlay-components" component={OverlayComponents} />
+        <Route path="/tabs" component={Tabs} />
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>

packages/react/test-app/src/pages/Main.tsx

@@ -4,11 +4,10 @@ import {
   IonHeader,
   IonLabel,
   IonPage,
-
   IonTitle,
   IonToolbar,
   IonItem,
-  IonList
+  IonList,
 } from '@ionic/react';
 
 interface MainProps {}
@@ -32,6 +31,11 @@ const Main: React.FC<MainProps> = () => {
             <IonLabel>Overlay Components</IonLabel>
           </IonItem>
         </IonList>
+        <IonList>
+          <IonItem routerLink="/tabs">
+            <IonLabel>Tabs</IonLabel>
+          </IonItem>
+        </IonList>
       </IonContent>
     </IonPage>
   );

packages/react/test-app/src/pages/Tabs.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { Route, Redirect } from 'react-router';
+
+interface TabsProps {}
+
+const Tabs: React.FC<TabsProps> = () => {
+  return (
+    <IonTabs>
+      <IonRouterOutlet>
+        <Redirect from="/tabs" to="/tabs/tab1" exact />
+        <Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
+      </IonRouterOutlet>
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
+          <IonLabel>Click Handler</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  );
+};
+
+export default Tabs;