diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx
index 3a20a115cb..d4771275c4 100644
--- a/packages/react/src/components/navigation/IonTabs.tsx
+++ b/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, {
-          onIonTabsDidChange,
-          onIonTabsWillChange,
-          ref: this.tabBarRef,
-        });
+      let childProps: any = {
+        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], {
-          onIonTabsDidChange,
-          onIonTabsWillChange,
-          ref: this.tabBarRef,
-        });
+        tabBar = React.cloneElement(child.props.children[1], childProps);
       }
     });