diff --git a/.changeset/rich-keys-rescue.md b/.changeset/rich-keys-rescue.md new file mode 100644 index 000000000000..1107f35b17cc --- /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 6ce08cec9556..d9786ac6ac32 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 000000000000..07d4b0f00b39 --- /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 bfc5d7d4a92d..27b7ea6d6a76 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) + }); });