Prevent client-side navigation for method="dialog" (#9327)

doseofted · natemoo-re · web-flow · commit 3878a91be487 · 2023-12-05T18:42:53.000-06:00
Co-authored-by: Nate Moore &lt;natemoo-re@users.noreply.github.com&gt;
diff --git a/.changeset/rich-keys-rescue.md b/.changeset/rich-keys-rescue.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an edge case for `<form method="dialog">` 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
@@ -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 <dialog> 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
@@ -0,0 +1,16 @@
+---
+import { ViewTransitions } from "astro:transitions";
+---
+<html>
+	<head>
+    <ViewTransitions />
+	</head>
+	<body>
+    <button id="open" onclick="modal.showModal()">Open Modal</button>
+    <dialog id="modal">
+      <form method="dialog">
+        <button id="close">Close</button>
+      </form>
+    </dialog>
+	</body>
+</html>
diff --git 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)
+	});
 });
