fix(tabs): move onScroll to proper container (#10034)

tay1orjones · jnm2377 · kodiakhq[bot] · web-flow · commit d842ff82b347 · 2021-11-03T22:24:12.000Z
Co-authored-by: Josefina Mancilla &lt;32556167+jnm2377@users.noreply.github.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -492,7 +492,7 @@ export default class Tabs extends React.Component {
 
     return (
       <>
-        <div {...other} className={classes.tabs} onScroll={this.handleScroll}>
+        <div {...other} className={classes.tabs}>
           <button
             aria-hidden="true"
             aria-label="Scroll left"
@@ -515,7 +515,8 @@ export default class Tabs extends React.Component {
             role="tablist"
             tabIndex={-1}
             className={classes.tablist}
-            ref={this.tablist}>
+            ref={this.tablist}
+            onScroll={this.handleScroll}>
             {tabsWithProps}
           </ul>
           {!rightOverflowNavButtonHidden && (
diff --git a/packages/react/src/components/Tabs/next/ContainedTabs.js b/packages/react/src/components/Tabs/next/ContainedTabs.js
@@ -471,11 +471,7 @@ const ContainedTabs = React.forwardRef(function ContainedTabs(
 
   return (
     <>
-      <div
-        className={classes.tabs}
-        onScroll={handleScroll}
-        ref={ref}
-        {...other}>
+      <div className={classes.tabs} ref={ref} {...other}>
         <button
           aria-hidden="true"
           aria-label="Scroll left"
@@ -498,7 +494,8 @@ const ContainedTabs = React.forwardRef(function ContainedTabs(
           role="tablist"
           tabIndex={-1}
           className={classes.tablist}
-          ref={tablist}>
+          ref={tablist}
+          onScroll={handleScroll}>
           {tabsWithProps}
         </ul>
         {!rightOverflowNavButtonHidden && (
diff --git a/packages/react/src/components/Tabs/next/Tabs.js b/packages/react/src/components/Tabs/next/Tabs.js
@@ -471,11 +471,7 @@ const Tabs = React.forwardRef(function Tabs(
 
   return (
     <>
-      <div
-        className={classes.tabs}
-        onScroll={handleScroll}
-        ref={ref}
-        {...other}>
+      <div className={classes.tabs} ref={ref} {...other}>
         <button
           aria-hidden="true"
           aria-label="Scroll left"
@@ -498,7 +494,8 @@ const Tabs = React.forwardRef(function Tabs(
           role="tablist"
           tabIndex={-1}
           className={classes.tablist}
-          ref={tablist}>
+          ref={tablist}
+          onScroll={handleScroll}>
           {tabsWithProps}
         </ul>
         {!rightOverflowNavButtonHidden && (
