Prevents inputs from changing ViewTransitions' form method or action (#…

…10856)

* Prevents inputs from changing ViewTransitions' form method or action. Fixes #10849

* Consistency 🧘‍♂️

.changeset/tasty-swans-refuse.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Prevents inputs with a name attribute of action or method to break ViewTransitions' form submission

packages/astro/components/ViewTransitions.astro

@@ -108,9 +108,16 @@ const { fallback = 'animate' } = Astro.props;
 			const form = el as HTMLFormElement;
 			const submitter = ev.submitter;
 			const formData = new FormData(form, submitter);
+			// form.action and form.method can point to an <input name="action"> or <input name="method">
+			// in which case should fallback to the form attribute
+			const formAction =
+				typeof form.action === 'string' ? form.action : form.getAttribute('action');
+			const formMethod =
+				typeof form.method === 'string' ? form.method : form.getAttribute('method');
 			// Use the form action, if defined, otherwise fallback to current path.
-			let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
-			const method = submitter?.getAttribute('formmethod') ?? form.method;
+			let action = submitter?.getAttribute('formaction') ?? formAction ?? location.pathname;
+			// Use the form method, if defined, otherwise fallback to "get"
+			const method = submitter?.getAttribute('formmethod') ?? formMethod ?? 'get';
 
 			// the "dialog" method is a special keyword used within <dialog> elements
 			// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-method

packages/astro/e2e/fixtures/view-transitions/src/pages/form-seven.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+
+---
+<Layout>
+	<form>
+		<p>This form has an no method defined, but input with `name=method`</p>
+		<input type="text" name="method" value="POST" />
+		<button id="submit">Submit</button>
+	</form>
+</Layout>

packages/astro/e2e/fixtures/view-transitions/src/pages/form-six.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+
+---
+<Layout>
+	<form method="POST" action="bar">
+		<p>This form has an input with `name=action`</p>
+		<input type="text" name="action" value="foo" />
+		<button id="submit">Submit</button>
+	</form>
+</Layout>

packages/astro/e2e/view-transitions.test.js

@@ -1168,6 +1168,25 @@ test.describe('View Transitions', () => {
 		).toEqual(['application/x-www-form-urlencoded']);
 	});
 
+
+	test('form POST that includes an input with name action should not override action', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/form-six'));
+		page.on('request', (request) => {
+			expect(request.url()).toContain('/bar')
+		});
+		// Submit the form
+		await page.click('#submit');
+	});
+
+	test('form without method that includes an input with name method should not override default method', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/form-seven'));
+		page.on('request', (request) => {
+			expect(request.method()).toBe('GET')
+		});
+		// Submit the form
+		await page.click('#submit');
+	});
+
 	test('Route announcer is invisible on page transition', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/no-directive-one'));