Fix modal spa lock (#1061)

* feat: failing test

* fix: failing test

* changeset

Author: thejackshelton

.changeset/itchy-laws-hunt.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: cleanup scroll locking

apps/component-tests/src/routes/test-route/index.tsx

@@ -0,0 +1,5 @@
+import { component$ } from '@builder.io/qwik';
+
+export default component$(() => {
+  return <div>Test Route</div>;
+});

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

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

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

@@ -0,0 +1,35 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Modal, Label } 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">
+        <Modal.Title>Edit Profile</Modal.Title>
+        <Modal.Description>
+          You can update your profile here. Hit the save button when finished.
+        </Modal.Description>
+        <Label>
+          Name
+          <input type="text" placeholder="John Doe" />
+        </Label>
+        <Label>
+          Email
+          <input type="text" placeholder="[email protected]" />
+        </Label>
+        <footer>
+          <Modal.Close class="modal-close">Cancel</Modal.Close>
+          <Modal.Close class="modal-close">Save Changes</Modal.Close>
+        </footer>
+        <Link href="../../../test-route">SPA NAVIGATION</Link>
+      </Modal.Panel>
+    </Modal.Root>
+  );
+});
+
+// internal
+import styles from '../snippets/modal.css?inline';
+import { Link } from '@builder.io/qwik-city';

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

@@ -16,6 +16,8 @@ import { modalContextId } from './modal-context';
 
 import styles from './modal.css?inline';
 import { useModal } from './use-modal';
+import { isServer } from '@builder.io/qwik/build';
+import { enableBodyScroll } from 'body-scroll-lock-upgrade';
 
 export type ModalProps = Omit<PropsOf<'dialog'>, 'open'> & {
   onShow$?: QRL<() => void>;
@@ -59,7 +61,10 @@ export const HModalPanel = component$((props: PropsOf<'dialog'>) => {
     }
 
     cleanup(async () => {
+      if (isServer) return;
       await deactivateFocusTrap(focusTrap);
+      if (!panelRef.value) return;
+      enableBodyScroll(panelRef.value);
     });
   });
 

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

@@ -11,7 +11,6 @@ export const HModalTrigger = component$((props: PropsOf<'button'>) => {
   return (
     <button
       aria-haspopup="dialog"
-      aria-label="Open Theme Customization Panel"
       aria-expanded={context.showSig.value}
       data-open={context.showSig.value ? '' : undefined}
       data-closed={!context.showSig.value ? '' : undefined}

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

@@ -137,6 +137,22 @@ test.describe('Scroll locking', () => {
       }),
     ).toBe(true);
   });
+
+  test(`GIVEN a modal
+    WHEN navigating to another page in SPA
+    THEN the body should not have overflow hidden`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'test-spa-scroll');
+
+    await expect(page.locator('body')).not.toHaveCSS('overflow', 'hidden');
+
+    await d.openModal();
+
+    await expect(page.locator('body')).toHaveCSS('overflow', 'hidden');
+
+    await page.click('[q\\:link]');
+
+    await expect(page.locator('body')).not.toHaveCSS('overflow', 'hidden');
+  });
 });
 
 test.describe('Focus Trap', () => {