Add body overflow hidden to useScrollLock (#832)

Author: mdodgelooker

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `ActionListItem` no longer have shadow and cursor: pointer without an onClick
 - `ActionListItemColumn` aligns with header columns
+- `useScrollLock` no longer jitters on attempted scroll (used in modals and overlays)
 
 ## [0.7.28] - 2020-04-20
 

packages/components/src/utils/useScrollLock.ts

@@ -24,11 +24,16 @@
 
  */
 
-import { useContext, useEffect } from 'react'
+import once from 'lodash/once'
+import { useContext, useEffect, useRef } from 'react'
 import { ModalContext } from '../Modal/ModalContext'
 import { useToggle } from './useToggle'
 import { useCallbackRef } from './useCallbackRef'
 
+function setBodyOverflowHidden() {
+  document.body.style.overflow = 'hidden'
+}
+
 export function useScrollLock(
   enabled = false,
   useCapture = false,
@@ -41,11 +46,20 @@ export function useScrollLock(
   const { disableScrollLock, enableScrollLock } = useContext(ModalContext)
   const { value, setOn, setOff } = useToggle(enabled)
 
+  // save the existing body overflow value
+  const bodyOverflowRef = useRef(document.body.style.overflow)
+
   useEffect(() => {
     let scrollTop = window.scrollY
     let scrollTarget: EventTarget | HTMLElement | null = document
 
+    const bodyOverflowCurrent = bodyOverflowRef.current
+    const setBodyOverflowOnce = once(setBodyOverflowHidden)
+
     function stopScroll(e: Event) {
+      // setting overflow: hidden again here avoids conflicting enable / disable with nested scroll locks
+      setBodyOverflowOnce()
+
       if (e.target !== null && e.target !== scrollTarget) {
         scrollTarget = e.target
         scrollTop =
@@ -66,13 +80,16 @@ export function useScrollLock(
     if (element && value) {
       window.addEventListener('scroll', stopScroll, true)
       disableScrollLock && disableScrollLock()
+      setBodyOverflowHidden()
     } else {
       window.removeEventListener('scroll', stopScroll, true)
       enableScrollLock && enableScrollLock()
+      document.body.style.overflow = bodyOverflowCurrent
     }
 
     return () => {
       window.removeEventListener('scroll', stopScroll, true)
+      document.body.style.overflow = bodyOverflowCurrent
     }
   }, [value, element, useCapture, disableScrollLock, enableScrollLock])
 

packages/playground/src/Popovers/Testing.tsx

@@ -110,6 +110,19 @@ function PopoverFocusTrap() {
               aria-label="Fruits"
               defaultValue="1"
             />
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
+            <Paragraph>Long text</Paragraph>
           </PopoverContent>
         }
       >
@@ -136,18 +149,20 @@ function MenuOpenDialog() {
             Open Menu
           </Button>
         </MenuDisclosure>
-        <MenuList>
-          <DialogManager
-            content={
-              <ModalContent>
-                <Paragraph>Some content inside the Dialog</Paragraph>
-                <Button onClick={openAlert}>Open Alert</Button>
-              </ModalContent>
-            }
-          >
-            {(onClick) => <MenuItem onClick={onClick}>Open Modal</MenuItem>}
-          </DialogManager>
-        </MenuList>
+        <DialogManager
+          content={
+            <ModalContent>
+              <Paragraph>Some content inside the Dialog</Paragraph>
+              <Button onClick={openAlert}>Open Alert</Button>
+            </ModalContent>
+          }
+        >
+          {(onClick) => (
+            <MenuList>
+              <MenuItem onClick={onClick}>Open Modal</MenuItem>
+            </MenuList>
+          )}
+        </DialogManager>
       </Menu>
     </Box>
   )
@@ -343,7 +358,7 @@ function MovingTarget() {
 
 export function TestPopovers() {
   return (
-    <Box m="large" display="flex">
+    <Box m="large" display="flex" height={1500}>
       <Box>
         <MenuOpenDialog />
         <Divider my="large" />

packages/playground/src/index.tsx

@@ -27,12 +27,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { ComponentsProvider } from '@looker/components'
-import { ActionListDemo } from './ActionList/ActionListDemo'
+import { TestPopovers } from './Popovers/Testing'
 
 const App: React.FC = () => {
   return (
     <ComponentsProvider>
-      <ActionListDemo />
+      <TestPopovers />
     </ComponentsProvider>
   )
 }