Merge pull request #560 from thejackshelton/fix-modal

fix(modal): modal on iOS maintains proper scroll position & proper escape scroll unlock when tabbing

Author: thejackshelton

package.json

@@ -61,7 +61,6 @@
     "@storybook/test-runner": "0.13.0",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/cypress": "9.0.0",
-    "@types/body-scroll-lock": "3.1.1",
     "@types/eslint": "^8.44.2",
     "@types/estree-jsx": "^1.0.3",
     "@types/node": "^20.5.7",
@@ -72,7 +71,6 @@
     "all-contributors-cli": "^6.26.1",
     "autoprefixer": "^10.4.15",
     "axe-core": "^4.7.2",
-    "body-scroll-lock": "4.0.0-beta.0",
     "chromatic": "^6.24.1",
     "clipboard-copy": "4.0.1",
     "commitizen": "^4.3.0",

packages/kit-headless/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@qwik-ui/utils": "workspace:*",
     "@floating-ui/dom": "^1.0.10",
-    "body-scroll-lock": "^4.0.0-beta.0",
+    "body-scroll-lock-upgrade": "1.1.0",
     "country-list-json": "^1.1.0",
     "focus-trap": "^7.5.3",
     "libphonenumber-js": "^1.10.43"

packages/kit-headless/src/components/modal/modal-behavior.ts

@@ -1,11 +1,10 @@
-import { QwikMouseEvent } from '@builder.io/qwik';
 import { FocusTrap, createFocusTrap } from 'focus-trap';
 
 export type WidthState = {
   width: number | null;
 };
 
-import { clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { clearAllBodyScrollLocks } from 'body-scroll-lock-upgrade';
 
 /**
  * Traps the focus of the given Modal
@@ -54,7 +53,7 @@ export async function closeModal(modal: HTMLDialogElement) {
  */
 export function wasModalBackdropClicked(
   modal: HTMLDialogElement | undefined,
-  clickEvent: QwikMouseEvent,
+  clickEvent: MouseEvent,
 ): boolean {
   if (!modal) {
     return false;

packages/kit-headless/src/components/modal/modal.tsx

@@ -2,7 +2,6 @@ import {
   $,
   QRL,
   QwikIntrinsicElements,
-  QwikMouseEvent,
   Signal,
   Slot,
   component$,
@@ -21,7 +20,7 @@ import {
   wasModalBackdropClicked,
 } from './modal-behavior';
 
-import { disableBodyScroll } from 'body-scroll-lock';
+import { disableBodyScroll } from 'body-scroll-lock-upgrade';
 
 import styles from './modal.css?inline';
 
@@ -47,15 +46,20 @@ export const Modal = component$((props: ModalProps) => {
 
     const focusTrap = trapFocus(modal);
 
-    window.addEventListener(
-      'keydown',
-      overrideNativeDialogEscapeBehaviorWith(() => (showSig.value = false)),
-      { once: true },
-    );
+    const escapeKeyListener = overrideNativeDialogEscapeBehaviorWith(() => {
+      showSig.value = false;
+    });
+
+    window.addEventListener('keydown', escapeKeyListener);
 
     if (isOpen) {
+      // HACK: keep modal scroll position in place with iOS
+      const storedRequestAnimationFrame = window.requestAnimationFrame;
+      window.requestAnimationFrame = () => 42;
+
       showModal(modal);
       disableBodyScroll(modal, { reserveScrollBarGap: true });
+      window.requestAnimationFrame = storedRequestAnimationFrame;
       props.onShow$?.();
       activateFocusTrap(focusTrap);
     } else {
@@ -65,10 +69,11 @@ export const Modal = component$((props: ModalProps) => {
 
     cleanup(() => {
       deactivateFocusTrap(focusTrap);
+      window.removeEventListener('keydown', escapeKeyListener);
     });
   });
 
-  const closeOnBackdropClick$ = $((event: QwikMouseEvent) => {
+  const closeOnBackdropClick$ = $((event: MouseEvent) => {
     if (props.alert === true || props.closeOnBackdropClick === false) {
       return;
     }