fix(react): only pass tab event props from IonTabs to IonTabBar if defined (#23024)

resolves #23023

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

@@ -101,23 +101,39 @@ export class IonTabs extends React.Component<Props> {
       } else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
         outlet = child.props.children[0];
       }
-      if (child.type === IonTabBar || child.type.isTabBar) {
 
-        tabBar = React.cloneElement(child, {
+      let childProps: any = {
-          onIonTabsDidChange,
+        ref: this.tabBarRef
-          onIonTabsWillChange,
+      }
-          ref: this.tabBarRef,
+
-        });
+      /**
+       * Only pass these props
+       * down from IonTabs to IonTabBar
+       * if they are defined, otherwise
+       * if you have a handler set on
+       * IonTabBar it will be overridden.
+       */
+      if (onIonTabsDidChange !== undefined) {
+        childProps = {
+          ...childProps,
+          onIonTabsDidChange
+        }
+      }
+
+      if (onIonTabsWillChange !== undefined) {
+        childProps = {
+          ...childProps,
+          onIonTabsWillChange
+        }
+      }
+
+      if (child.type === IonTabBar || child.type.isTabBar) {
+        tabBar = React.cloneElement(child, childProps);
       } else if (
         child.type === Fragment &&
         (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)
       ) {
-
+        tabBar = React.cloneElement(child.props.children[1], childProps);
-        tabBar = React.cloneElement(child.props.children[1], {
-          onIonTabsDidChange,
-          onIonTabsWillChange,
-          ref: this.tabBarRef,
-        });
       }
     });