Adds missing name/value of the submit button to the form data of a vi…

…ew transition (#9248) * Adds missing name/value of the submit button to the form data of a view transition * Update .changeset/ninety-weeks-juggle.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
withastro · Dec 1, 2023 · 43ddb52 · 43ddb52
1 parent 3cbd8ea
commit 43ddb52
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 2 deletions.
diff --git a/.changeset/ninety-weeks-juggle.md b/.changeset/ninety-weeks-juggle.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Adds properties of the submit button (name, value) to the form data of a view transition
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
@@ -97,10 +97,9 @@ const { fallback = 'animate' } = Astro.props;
 			if (el.tagName !== 'FORM' || isReloadEl(el)) {
 				return;
 			}
-
 			const form = el as HTMLFormElement;
 			const submitter = ev.submitter;
-			const formData = new FormData(form);
+			const formData = new FormData(form, submitter);
 			// 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;

diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro
@@ -0,0 +1,20 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+---
+
+<html>
+	<head>
+		<ViewTransitions handleForms/>
+		<meta charset="UTF-8" />
+	</head>
+	<body>
+		<h2>Voting Form</h2>
+		{Astro.url.search}
+		<h3>This form does neither have a `method`, nor an `action`, nor an `input` defined</h3>
+		<form>
+			<button name="stars" value="1">⭐</button>
+			<button id="three" name="stars" value="3">⭐⭐⭐</button>
+			<button name="stars" value="5">⭐⭐⭐⭐⭐</button>
+		</form>
+	</body>
+</html>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
@@ -1059,4 +1059,16 @@ test.describe('View Transitions', () => {
 		await expect(p, 'should have content').toHaveText('Page 2');
 		expect(loads.length, 'There should only be 1 page load').toEqual(1);
 	});
+
+	test('Submitter with a name property is included in form data', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/form-four'));
+
+		let locator = page.locator('h2');
+		await expect(locator, 'should have content').toHaveText('Voting Form');
+
+		// Submit the form
+		const expected = page.url() + '?stars=3';
+		await page.click('#three');
+		await expect(page).toHaveURL(expected);
+	});
 });