From 89ef7eab4d2f574977bf83256bde78d65e6f92da Mon Sep 17 00:00:00 2001 From: Eddie Liu Date: Thu, 23 Jul 2020 10:42:42 -0700 Subject: [PATCH] Scrollable Pane: Fix pointer events (#13744) * Fix pointer events * Change files * Update snapshots Co-authored-by: Eddie Liu --- ...6-22-14-24-21-edwl-2020-06-fixScrollablePaneClick.json | 8 ++++++++ .../components/ScrollablePane/ScrollablePane.styles.ts | 2 +- .../__snapshots__/ScrollablePane.test.tsx.snap | 6 +++--- 3 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 change/office-ui-fabric-react-2020-06-22-14-24-21-edwl-2020-06-fixScrollablePaneClick.json 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 new file mode 100644 index 0000000000000..9c40d570124b8 --- /dev/null +++ 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 index 71eea0dec2350..f81bf412d9181 100644 --- 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/packages/office-ui-fabric-react/src/components/ScrollablePane/__snapshots__/ScrollablePane.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ScrollablePane/__snapshots__/ScrollablePane.test.tsx.snap index 2460f361cdd76..defe782aa61bb 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/__snapshots__/ScrollablePane.test.tsx.snap +++ b/packages/office-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%; }