fix: restore position settings on drawer unmount (#462)

* fix: restore position settings on drawer destroy

* fix: typo

* fix: unused att

src/use-position-fixed.ts

@@ -109,6 +109,20 @@ export function usePositionFixed({
     };
   }, []);
 
+  React.useEffect(() => {
+    if (!modal) return;
+
+    return () => {
+      if (typeof document === 'undefined') return;
+
+      // Another drawer is opened, safe to ignore the execution
+      const hasDrawerOpened = !!document.querySelector('[data-vaul-drawer]');
+      if (hasDrawerOpened) return;
+
+      restorePositionSetting();
+    };
+  }, [modal, restorePositionSetting]);
+
   React.useEffect(() => {
     if (nested || !hasBeenOpened) return;
     // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening

test/src/app/page.tsx

@@ -14,7 +14,8 @@ export default function Page() {
       <Link href="/non-dismissible">Non-dismissible</Link>
       <Link href="/initial-snap">Initial snap</Link>
       <Link href="/controlled">Controlled</Link>
-      <Link href="/default-open">Controlled</Link>
+      <Link href="/default-open">Default open</Link>
+      <Link href="/with-redirect">With redirect</Link>
     </div>
   );
 }

test/src/app/with-redirect/long-page/page.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Page() {
+  return (
+    <div className="bg-zinc-100 space-y-10">
+      <p className="pb-[120vh] bg-zinc-600 text-white font-bold">scroll down</p>
+      <p data-testid="content" className="py-32 bg-zinc-800 text-white">content only visible after scroll</p>
+    </div>
+  );
+}

test/src/app/with-redirect/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Link from 'next/link';
+import { Drawer } from 'vaul';
+
+export default function Page() {
+  return (
+    <div className="w-screen h-screen bg-white p-8 flex justify-center items-center">
+      <Drawer.Root>
+        <Drawer.Trigger asChild>
+          <button data-testid="trigger" className="text-2xl">
+            Open Drawer
+          </button>
+        </Drawer.Trigger>
+        <Drawer.Portal>
+          <Drawer.Overlay data-testid="overlay" className="fixed inset-0 bg-black/40" />
+          <Drawer.Content
+            data-testid="content"
+            className="bg-zinc-100 flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0"
+          >
+            <Drawer.Close data-testid="drawer-close">Close</Drawer.Close>
+            <div className="p-4 bg-white rounded-t-[10px] flex-1">
+              <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
+              <div className="max-w-md mx-auto">
+                <Drawer.Title className="font-medium mb-4">Redirect to another route.</Drawer.Title>
+                <p className="text-zinc-600 mb-2">This route is only used to test the body reset position.</p>
+                <p className="text-zinc-600 mb-8">
+                  Go to{' '}
+                  <Link href="/with-redirect/long-page" data-testid="link" className="underline">
+                    another route
+                  </Link>{' '}
+                </p>
+              </div>
+            </div>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </div>
+  );
+}

test/tests/with-redirect.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+import { openDrawer } from './helpers';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/with-redirect');
+});
+
+test.describe('With redirect', () => {
+  test('should restore body position settings', async ({ page }) => {
+    await openDrawer(page);
+    await page.getByTestId('link').click();
+
+    await page.waitForURL('**/with-redirect/long-page');
+
+    const content = page.getByTestId('content');
+
+    // safe check
+    await expect(content).toBeVisible();
+
+    content.scrollIntoViewIfNeeded();
+
+    await expect(page.getByTestId('content')).toBeInViewport();
+  });
+});