fix: allow scrolling modal inner elements

Author: maiieul

apps/website/src/routes/docs/headless/modal/auto-api/api.ts

@@ -1,37 +1,37 @@
 export const api = {
-  modal: [
+  "modal": [
     {
-      'modal-close': [],
+      "modal-close": []
     },
     {
-      'modal-content': [],
+      "modal-content": []
     },
     {
-      'modal-context': [],
+      "modal-context": []
     },
     {
-      'modal-description': [],
+      "modal-description": []
     },
     {
-      'modal-footer': [],
+      "modal-footer": []
     },
     {
-      'modal-header': [],
+      "modal-header": []
     },
     {
-      'modal-panel': [],
+      "modal-panel": []
     },
     {
-      'modal-root': [],
+      "modal-root": []
     },
     {
-      'modal-title': [],
+      "modal-title": []
     },
     {
-      'modal-trigger': [],
+      "modal-trigger": []
     },
     {
-      'use-modal': [],
-    },
-  ],
-};
+      "use-modal": []
+    }
+  ]
+};

apps/website/src/routes/docs/headless/modal/examples/inner-scroll.tsx

@@ -0,0 +1,21 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Modal } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Modal.Root>
+      <Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
+      <Modal.Panel class="modal-panel">
+        <h2>Scrollable body</h2>
+        <div data-testid="inner-scroll" style={{ height: '120px', overflowY: 'auto' }}>
+          <div style={{ height: '800px' }}>Tall content that scrolls inside the panel</div>
+        </div>
+      </Modal.Panel>
+    </Modal.Root>
+  );
+});
+
+// internal
+import styles from '../snippets/modal.css?inline';

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

@@ -53,12 +53,7 @@ export const HModalPanel = component$((props: PropsOf<'dialog'>) => {
 
     if (!panelRef.value) return;
 
-    // Initialize the scroll locker once. `@fluejs/noscroll` keeps the panel
-    // itself scrollable/interactive (incl. touch dragging on iOS Safari) while
-    // the page behind it is locked — unlike body-scroll-lock-upgrade, which
-    // blocked movement-based touch inside the modal on iOS (#1113).
     if (!isInitialized.value) {
-      markScrollable(panelRef.value);
       isInitialized.value = true;
 
       const noScroll = createNoScroll({
@@ -74,6 +69,20 @@ export const HModalPanel = component$((props: PropsOf<'dialog'>) => {
 
     if (isOpen) {
       await showModal(panelRef.value);
+
+      // noscroll only lets touch gestures scroll elements it has marked.
+      // Mark the panel and any inner scroll container (e.g. a scrollable body
+      // with a sticky header/footer) so they remain touch-scrollable on iOS;
+      // otherwise the gesture resolves to the non-scrollable dialog and gets
+      // prevented. Re-scanned on each open to pick up the current content.
+      markScrollable(panelRef.value);
+      panelRef.value.querySelectorAll<HTMLElement>('*').forEach((el) => {
+        const { overflowX, overflowY } = getComputedStyle(el);
+        if (/(auto|scroll|overlay)/.test(`${overflowX} ${overflowY}`)) {
+          markScrollable(el);
+        }
+      });
+
       disablePageScroll.value?.();
       activateFocusTrap(focusTrap);
     } else {

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

@@ -138,6 +138,24 @@ test.describe('Scroll locking', () => {
     ).toBe(true);
   });
 
+  test(`GIVEN a modal with an inner scroll container
+        WHEN the modal is opened
+        THEN both the panel and the inner container are marked scrollable`, async ({
+    page,
+  }) => {
+    const { driver: d } = await setup(page, 'inner-scroll');
+
+    await d.openModal();
+
+    // noscroll only allows touch-scrolling on elements it has marked; the panel
+    // and any inner scroll container must both carry the marker (#1113).
+    await expect(d.getModal()).toHaveAttribute('data-noscroll-target-scrollable', '');
+    await expect(page.getByTestId('inner-scroll')).toHaveAttribute(
+      'data-noscroll-target-scrollable',
+      '',
+    );
+  });
+
   test(`GIVEN a modal
     WHEN navigating to another page in SPA
     THEN the body should not have overflow hidden`, async ({ page }) => {