Events added in enhance weren't cleaned up when the form was destroyed.

Author: ciscoheat

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - File uploads required extra configuration for the valibot adapter, now it works directly.
+- Events added in `enhance` weren't cleaned up when the form was destroyed. Note that this could be deprecated in a future version. Please add events only when calling `superForm`.
 
 ## [2.16.1] - 2024-07-18
 

src/lib/client/superForm.ts

@@ -1602,7 +1602,7 @@ export function superForm<
 			| ((input: Parameters<SubmitFunction>[0]) => Promise<Response | XMLHttpRequest>)
 			| undefined = undefined;
 
-		return kitEnhance(FormElement, async (submitParams) => {
+		const enhanced = kitEnhance(FormElement, async (submitParams) => {
 			let jsonData: Record<string, unknown> | undefined = undefined;
 			let validationAdapter = options.validators;
 			undefined;
@@ -1990,6 +1990,18 @@ export function superForm<
 
 			return validationResponse;
 		});
+
+		return {
+			destroy: () => {
+				// Remove only events added in enhance
+				for (const [name, events] of Object.entries(formEvents)) {
+					// @ts-expect-error formEvents and options have the same keys
+					formEvents[name] = events.filter((e) => e === options[name]);
+				}
+
+				enhanced.destroy();
+			}
+		};
 	}
 
 	function removeFiles(formData: T) {

src/routes/(v2)/v2/Navigation.svelte

@@ -62,7 +62,8 @@
 		'schemasafe-types',
 		'discriminated-union',
 		'simple-tainted',
-		'validity-objects'
+		'validity-objects',
+		'issue-466'
 	].sort();
 </script>
 

src/routes/(v2)/v2/issue-466/+page.server.ts

@@ -0,0 +1,19 @@
+import { superValidate } from '$lib/index.js';
+import { zod } from '$lib/adapters/zod.js';
+import { schema } from './schema.js';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return {
+		form
+	};
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const form = await superValidate(request, zod(schema));
+		return {
+			form
+		};
+	}
+};

src/routes/(v2)/v2/issue-466/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { superForm } from '$lib/index.js';
+	import { zodClient } from '$lib/adapters/zod.js';
+	import { schema } from './schema.js';
+
+	export let data;
+
+	let toggle = false;
+	let updatedCount = 0;
+	let updateCount = 0;
+
+	const { enhance, form } = superForm(data.form, {
+		validators: zodClient(schema),
+		onUpdate: () => updateCount++
+	});
+
+	const onUpdated = () => updatedCount++;
+</script>
+
+<button on:click={() => (toggle = !toggle)}>Toggle</button>
+
+{#if toggle}
+	<form method="post" use:enhance={{ onUpdated }}>
+		<input type="text" name="name" bind:value={$form.name} />
+		<button type="submit">Submit</button>
+	</form>
+{/if}
+
+<hr />
+
+<p>Update count : {updateCount}</p>
+<p>Updated count : {updatedCount}</p>

src/routes/(v2)/v2/issue-466/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(1),
+	email: z.string().email()
+});