Support formmethod and formaction in ViewTransitions (#9084)

* Support formmethod and formaction in ViewTransitions

* Adding a changeset

* Update .changeset/new-pets-fail.md

Co-authored-by: Emanuele Stoppa <[email protected]>

* Be less clever

---------

Co-authored-by: Emanuele Stoppa <[email protected]>

.changeset/new-pets-fail.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Supports `formmethod` and `formaction` for form overrides

packages/astro/components/ViewTransitions.astro

@@ -88,11 +88,14 @@ const { fallback = 'animate', handleForms } = Astro.props;
 				}
 
 				const form = el as HTMLFormElement;
+				const submitter = ev.submitter;
 				const formData = new FormData(form);
 				// Use the form action, if defined, otherwise fallback to current path.
-				let action = form.action ?? location.pathname;
+				let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
+				const method = submitter?.getAttribute('formmethod') ?? form.method;
+
 				const options: Options = {};
-				if (form.method === 'get') {
+				if (method === 'get') {
 					const params = new URLSearchParams(formData as any);
 					const url = new URL(action);
 					url.search = params.toString();

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

@@ -0,0 +1,20 @@
+---
+import Layout from '../components/Layout.astro';
+let formData: FormData | undefined;
+if(Astro.request.method === 'POST') {
+	formData = await Astro.request.formData();
+}
+---
+<Layout>
+	{
+		Astro.request.method === 'GET' ? (
+			<h2>Contact Form</h2>
+			<form action="/contact" method="get">
+				<input type="hidden" name="name" value="Testing">
+				<button id="submit" type="submit" formmethod="post" formaction="/form-three">Submit</button>
+			</form>
+		) : (
+			<div id="three-result">Got: {formData?.get('name')}</div>
+		)
+	}
+</Layout>

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

@@ -1004,4 +1004,16 @@ test.describe('View Transitions', () => {
 			'There should be only 1 page load. No additional loads for the form submission'
 		).toEqual(1);
 	});
+
+	test('forms are overridden by formmethod and formaction', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/form-three'));
+
+		let locator = page.locator('h2');
+		await expect(locator, 'should have content').toHaveText('Contact Form');
+
+		// Submit the form
+		await page.click('#submit');
+		const result = page.locator('#three-result');
+		await expect(result, 'should have content').toHaveText('Got: Testing');
+	});
 });

packages/astro/package.json

@@ -186,7 +186,7 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.1.0",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "1.40.0-alpha-nov-13-2023",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.20.1",
     "@types/chai": "^4.3.5",