From 3878a91be4879988c7235f433e50a6dc82e32288 Mon Sep 17 00:00:00 2001 From: Ted Klingenberg Date: Tue, 5 Dec 2023 19:42:53 -0500 Subject: [PATCH] Prevent client-side navigation for method="dialog" (#9327) Co-authored-by: Nate Moore --- .changeset/rich-keys-rescue.md | 5 +++++ packages/astro/components/ViewTransitions.astro | 7 +++++++ .../view-transitions/src/pages/dialog.astro | 16 ++++++++++++++++ packages/astro/e2e/view-transitions.test.js | 14 ++++++++++++++ 4 files changed, 42 insertions(+) create mode 100644 .changeset/rich-keys-rescue.md create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro diff --git a/.changeset/rich-keys-rescue.md b/.changeset/rich-keys-rescue.md new file mode 100644 index 0000000000..1107f35b17 --- /dev/null +++ b/.changeset/rich-keys-rescue.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes an edge case for `
` when using View Transitions. Forms with `method="dialog"` no longer require an additional `data-astro-reload` attribute. diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 6ce08cec95..d9786ac6ac 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -104,6 +104,12 @@ const { fallback = 'animate' } = Astro.props; let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname; const method = submitter?.getAttribute('formmethod') ?? form.method; + // the "dialog" method is a special keyword used within elements + // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-method + if (method === "dialog") { + return + } + const options: Options = { sourceElement: submitter ?? form }; if (method === 'get') { const params = new URLSearchParams(formData as any); @@ -113,6 +119,7 @@ const { fallback = 'animate' } = Astro.props; } else { options.formData = formData; } + ev.preventDefault(); navigate(action, options); }); diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro new file mode 100644 index 0000000000..07d4b0f00b --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro @@ -0,0 +1,16 @@ +--- +import { ViewTransitions } from "astro:transitions"; +--- + + + + + + + + + + + + + diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index bfc5d7d4a9..27b7ea6d6a 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -1074,4 +1074,18 @@ test.describe('View Transitions', () => { await page.click('#three'); await expect(page).toHaveURL(expected); }); + + test('Dialog using form with method of "dialog" should not trigger navigation', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/dialog')); + + let requests = []; + page.on('request', request => requests.push(`${request.method()} ${request.url()}`)); + + await page.click('#open'); + await expect(page.locator("dialog")).toHaveAttribute("open") + await page.click('#close'); + await expect(page.locator("dialog")).not.toHaveAttribute("open") + + expect(requests).toHaveLength(0) + }); });