fix: modal scroll remains locked until the 1st level modal is closed

Author: thejackshelton

apps/website/src/routes/docs/headless/modal/examples/animatable.tsx

@@ -0,0 +1,35 @@
+import { PropsOf, component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Modal } from '@qwik-ui/headless';
+import styles from '../snippets/animation.css?inline';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+  useStyles$(styles);
+
+  return (
+    <>
+      <button
+        onClick$={() => {
+          showSig.value = true;
+        }}
+        class="rounded-base border px-3 py-2 hover:bg-accent/80"
+      >
+        Open Modal
+      </button>
+      <Modal bind:show={showSig} class="my-animation">
+        Inside the modal!
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: PropsOf<'svg'>, key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="currentColor"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}

apps/website/src/routes/docs/headless/modal/examples/animation.tsx

@@ -0,0 +1,22 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Modal } from '@qwik-ui/headless';
+import styles from '../snippets/modal.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  const isOpen = useSignal(false);
+
+  return (
+    <>
+      <button class="modal-trigger" onClick$={() => (isOpen.value = true)}>
+        Open Modal
+      </button>
+      <Modal class="modal" bind:show={isOpen}>
+        Modal Content
+        <input placeholder="inside input" />
+        <button>inside button</button>
+      </Modal>
+      <input placeholder="outside input" />
+    </>
+  );
+});

apps/website/src/routes/docs/headless/modal/examples/focus-trap.tsx

@@ -0,0 +1,36 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Modal } from '@qwik-ui/headless';
+import styles from '../snippets/modal.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  const isOpen = useSignal(false);
+
+  return (
+    <>
+      <button class="modal-trigger" onClick$={() => (isOpen.value = true)}>
+        Open Modal
+      </button>
+      <Modal class="modal" bind:show={isOpen}>
+        Modal Content
+        <NestedModal />
+      </Modal>
+    </>
+  );
+});
+
+export const NestedModal = component$(() => {
+  useStyles$(styles);
+  const isNestedOpen = useSignal(false);
+
+  return (
+    <>
+      <button class="modal-trigger" onClick$={() => (isNestedOpen.value = true)}>
+        Nested Modal Trigger
+      </button>
+      <Modal class="modal" bind:show={isNestedOpen}>
+        Nested Modal Content
+      </Modal>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/modal/examples/nested.tsx

@@ -0,0 +1,19 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Modal } from '@qwik-ui/headless';
+import styles from '../snippets/modal.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  const isOpen = useSignal(false);
+
+  return (
+    <div style={{ height: '200vh' }}>
+      <button class="modal-trigger" onClick$={() => (isOpen.value = true)}>
+        Open Modal
+      </button>
+      <Modal class="modal" bind:show={isOpen}>
+        Modal Content
+      </Modal>
+    </div>
+  );
+});

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

@@ -4,7 +4,7 @@ export type WidthState = {
   width: number | null;
 };
 
-import { clearAllBodyScrollLocks } from 'body-scroll-lock-upgrade';
+import { enableBodyScroll } from 'body-scroll-lock-upgrade';
 
 /**
  * Traps the focus of the given Modal
@@ -101,7 +101,7 @@ export function supportClosingAnimation(modal: HTMLDialogElement) {
       'animationend',
       () => {
         modal.classList.remove('modal-closing');
-        clearAllBodyScrollLocks();
+        enableBodyScroll(modal);
         modal.close();
       },
       { once: true },
@@ -112,15 +112,15 @@ export function supportClosingAnimation(modal: HTMLDialogElement) {
       'transitionend',
       () => {
         modal.classList.remove('modal-closing');
-        clearAllBodyScrollLocks();
+        enableBodyScroll(modal);
         modal.close();
       },
       { once: true },
     );
   }
   if (animationDuration === '0s' && transitionDuration === '0s') {
     modal.classList.remove('modal-closing');
-    clearAllBodyScrollLocks();
+    enableBodyScroll(modal);
     modal.close();
   }
 }