ScrollablePane: Moves onScroll from root element to container (#20123)

* Moves onScroll method on ScrollablePane from root to container * Change files * Using excludedPropNames instead of undefining the onScroll prop. * Using excludedPropNames instead of undefining the onScroll prop. Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>
microsoft · Apr 19, 2022 · d3afef1 · d3afef1
1 parent 6da8d2a
commit d3afef1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/change/@fluentui-react-73d7be27-0748-4f29-b659-db242b6ef7d0.json b/change/@fluentui-react-73d7be27-0748-4f29-b659-db242b6ef7d0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Moves onScroll method on ScrollablePane from root to container",
+  "packageName": "@fluentui/react",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -187,7 +187,7 @@ export class ScrollablePaneBase
   }
 
   public render(): JSX.Element {
-    const { className, scrollContainerFocus, scrollContainerAriaLabel, theme, styles } = this.props;
+    const { className, scrollContainerFocus, scrollContainerAriaLabel, theme, styles, onScroll } = this.props;
     const { stickyTopHeight, stickyBottomHeight } = this.state;
     const classNames = getClassNames(styles!, {
       theme: theme!,
@@ -200,11 +200,26 @@ export class ScrollablePaneBase
           role: 'group',
           tabIndex: 0,
           'aria-label': scrollContainerAriaLabel,
+          onScroll,
         }
-      : {};
+      : {
+          onScroll,
+        };
 
     return (
-      <div {...getNativeProps(this.props, divProperties)} ref={this._root} className={classNames.root}>
+      <div
+        {...getNativeProps(
+          {
+            ...this.props,
+          },
+          divProperties,
+          // on React 17 onScroll is not being invoked on root element,
+          // as a fix this method will be provided to the container element
+          ['onScroll'],
+        )}
+        ref={this._root}
+        className={classNames.root}
+      >
         <div
           ref={this._stickyAboveRef}
           className={classNames.stickyAbove}