fix: remove event listeners on form attachment cleanup

Fixes #14546

The call to `enhance()` returns a new object each time with a new attachment. And because we didn't remove the event listeners on attachment cleanup this created more and more listeners over time

Author: dummdidumm

.changeset/fix-form-for-duplicate-requests.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: remove event listeners on form attachment cleanup

packages/kit/src/runtime/client/remote-functions/form.svelte.js

@@ -319,7 +319,8 @@ export function form(id) {
 
 				form.addEventListener('submit', onsubmit);
 
-				form.addEventListener('input', (e) => {
+				/** @param {Event} e */
+				const handle_input = (e) => {
 					// strictly speaking it can be an HTMLTextAreaElement or HTMLSelectElement
 					// but that makes the types unnecessarily awkward
 					const element = /** @type {HTMLInputElement} */ (e.target);
@@ -398,17 +399,24 @@ export function form(id) {
 					name = name.replace(/^[nb]:/, '');
 
 					touched[name] = true;
-				});
+				};
+
+				form.addEventListener('input', handle_input);
 
-				form.addEventListener('reset', async () => {
+				const handle_reset = async () => {
 					// need to wait a moment, because the `reset` event occurs before
 					// the inputs are actually updated (so that it can be cancelled)
 					await tick();
 
 					input = convert_formdata(new FormData(form));
-				});
+				};
+
+				form.addEventListener('reset', handle_reset);
 
 				return () => {
+					form.removeEventListener('submit', onsubmit);
+					form.removeEventListener('input', handle_input);
+					form.removeEventListener('reset', handle_reset);
 					element = null;
 					preflight_schema = undefined;
 				};

packages/kit/test/apps/async/src/routes/remote/form/for-duplicate/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { get_count, increment } from './form.remote.js';
+	const count = get_count();
+</script>
+
+<p id="count">{count.current}</p>
+
+<!-- this looks weird but forces the spread into being reactive -->
+<form {...increment.for((count.current || 1) && 'a').enhance(async ({ submit }) => await submit())}>
+	<button type="submit" id="submit">Submit</button>
+</form>

packages/kit/test/apps/async/src/routes/remote/form/for-duplicate/form.remote.ts

@@ -0,0 +1,11 @@
+import { form, query } from '$app/server';
+import * as v from 'valibot';
+
+let count = 0;
+
+export const get_count = query(() => count);
+
+export const increment = form(v.object({}), async () => {
+	count++;
+	await get_count().refresh();
+});

packages/kit/test/apps/async/test/client.test.js

@@ -315,4 +315,14 @@ test.describe('remote function mutations', () => {
 
 		await expect(page.locator('h1')).toHaveText('hello from remote function!');
 	});
+
+	test('form.for() with enhance does not duplicate requests', async ({ page }) => {
+		await page.goto('/remote/form/for-duplicate');
+
+		for (let i = 1; i <= 3; i++) {
+			await page.click('#submit');
+			await page.waitForTimeout(100);
+			await expect(page.locator('#count')).toHaveText(String(i));
+		}
+	});
 });