diff --git a/src/use-position-fixed.ts b/src/use-position-fixed.ts index 4a6efc2..59bbcfb 100644 --- a/src/use-position-fixed.ts +++ b/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 diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx index 0e99d34..17e6de1 100644 --- a/test/src/app/page.tsx +++ b/test/src/app/page.tsx @@ -14,7 +14,8 @@ export default function Page() { Non-dismissible Initial snap Controlled - Controlled + Default open + With redirect ); } diff --git a/test/src/app/with-redirect/long-page/page.tsx b/test/src/app/with-redirect/long-page/page.tsx new file mode 100644 index 0000000..729bab0 --- /dev/null +++ b/test/src/app/with-redirect/long-page/page.tsx @@ -0,0 +1,10 @@ +'use client'; + +export default function Page() { + return ( +
+

scroll down

+

content only visible after scroll

+
+ ); +} diff --git a/test/src/app/with-redirect/page.tsx b/test/src/app/with-redirect/page.tsx new file mode 100644 index 0000000..c929b00 --- /dev/null +++ b/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 ( +
+ + + + + + + + Close +
+
+
+ Redirect to another route. +

This route is only used to test the body reset position.

+

+ Go to{' '} + + another route + {' '} +

+
+
+ + + +
+ ); +} diff --git a/test/tests/with-redirect.spec.ts b/test/tests/with-redirect.spec.ts new file mode 100644 index 0000000..8ee94d7 --- /dev/null +++ b/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(); + }); +});