Scrollable Pane: Fix pointer events (microsoft#13744)

* Fix pointer events * Change files * Update snapshots Co-authored-by: Eddie Liu <edwl@microsoft.com>
czearing · Jul 23, 2020 · 89ef7ea · 89ef7ea
1 parent 4f6d22e
commit 89ef7ea
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/change/office-ui-fabric-react-2020-06-22-14-24-21-edwl-2020-06-fixScrollablePaneClick.json b/change/office-ui-fabric-react-2020-06-22-14-24-21-edwl-2020-06-fixScrollablePaneClick.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "ScrollablePane: fix pointer events on sticky'd elements",
+  "packageName": "office-ui-fabric-react",
+  "email": "edwl@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-06-22T21:24:21.560Z"
+}
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
@@ -13,7 +13,7 @@ export const getStyles = (props: IScrollablePaneStyleProps): IScrollablePaneStyl
 
   const AboveAndBelowStyles: IStyle = {
     position: 'absolute',
-    pointerEvents: 'auto',
+    pointerEvents: 'none',
   };
 
   const positioningStyle: IStyle = {

diff --git a/...-ui-fabric-react/src/components/ScrollablePane/__snapshots__/ScrollablePane.test.tsx.snap b/...-ui-fabric-react/src/components/ScrollablePane/__snapshots__/ScrollablePane.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`ScrollablePane renders correctly 1`] = `
     className=
 
         {
-          pointer-events: auto;
+          pointer-events: none;
           position: absolute;
           top: 0px;
           z-index: 1;
@@ -60,7 +60,7 @@ exports[`ScrollablePane renders correctly 1`] = `
 
         {
           bottom: 0px;
-          pointer-events: auto;
+          pointer-events: none;
           position: absolute;
         }
         @media screen and (-ms-high-contrast: active){& {
@@ -80,7 +80,7 @@ exports[`ScrollablePane renders correctly 1`] = `
 
           {
             bottom: 0px;
-            pointer-events: auto;
+            pointer-events: none;
             position: absolute;
             width: 100%;
           }