Fix body scroll lock on iOS

This fixes an issue where all touchmove events on iOS were getting disabled within GlobalOverlays Now attaching the attribute `body-scroll-lock-ignore` to an element will allow touchmove events on ios
reaviz · Mar 11, 2024 · 165358f · 165358f
1 parent 0865298
commit 165358f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/docs/components/Overlay.mdx b/docs/components/Overlay.mdx
@@ -34,6 +34,18 @@ Below is an example of a simple dialog component using the global overlay.
 
 <Canvas of={GlobalOverlayStories.DialogExample} sourceState="shown" />
 
+If you need scrolling within a dialog to work on iOS, you can use the `body-scroll-lock-ignore` attribute on the scrollable dialog content.
+
+```tsx
+<GlobalOverlay
+  // ...props
+>
+  <div body-scroll-lock-ignore>
+    <p>Scrolling content</p>
+  </div>
+</GlobalOverlay>
+```
+
 ### Connected Overlay
 A overlay component typically used by components like menus.
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
   },
   "homepage": "https://github.com/reaviz/rdk#readme",
   "dependencies": {
-    "body-scroll-lock": "^4.0.0-beta.0",
+    "body-scroll-lock-upgrade": "^1.1.0",
     "classnames": "^2.3.2",
     "framer-motion": "^11.0.6",
     "popper.js": "^1.16.1"

diff --git a/src/Overlay/GlobalOverlay/GlobalOverlay.tsx b/src/Overlay/GlobalOverlay/GlobalOverlay.tsx
@@ -1,5 +1,8 @@
 import React, { FC, Fragment, useCallback, useEffect, useRef } from 'react';
-import { disableBodyScroll } from 'body-scroll-lock';
+import {
+  disableBodyScroll,
+  clearAllBodyScrollLocks
+} from 'body-scroll-lock-upgrade';
 import { OverlayContext } from '../OverlayContext';
 import { AnimatePresence } from 'framer-motion';
 import { OverlayPortal } from '../OverlayPortal';
@@ -40,9 +43,29 @@ export const GlobalOverlay: FC<GlobalOverlayProps> = ({
   });
 
   useEffect(() => {
-    if (open && children !== undefined) {
-      disableBodyScroll(children);
+    if (open && overlayRef.current !== undefined) {
+      disableBodyScroll(overlayRef.current, {
+        // allowTouchMove determines which elements to allow touchmove events for iOS https://github.com/rick-liruixin/body-scroll-lock-upgrade?tab=readme-ov-file#allowtouchmove
+        //@ts-expect-error: allowTouchMove is typed wrong: https://github.com/rick-liruixin/body-scroll-lock-upgrade/issues/21
+        allowTouchMove: (el: HTMLElement) => {
+          while (el && el !== document.body) {
+            if (el.getAttribute('body-scroll-lock-ignore') !== null) {
+              return true;
+            }
+            if (el.parentElement !== null) {
+              el = el.parentElement;
+            }
+          }
+          return false;
+        }
+      });
+    } else {
+      clearAllBodyScrollLocks();
     }
+
+    return () => {
+      clearAllBodyScrollLocks();
+    };
   }, [children, open]);
 
   return (