fix: don't throw from remote form validate() if the form unmounts

.changeset/lucky-pandas-listen.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: don't throw from remote form `validate()` if the form unmounts while it is waiting for a tick

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

@@ -695,13 +695,14 @@ export function form(id) {
 			validate: {
 				/** @type {RemoteForm<any, any>['validate']} */
 				value: async ({ all = false, preflightOnly = false } = {}) => {
-					if (!element) return;
-
 					const id = ++validate_id;
 
 					// wait a tick in case the user is calling validate() right after set() which takes time to propagate
 					await tick();
 
+					// the form may have been removed from the DOM while we were waiting
+					if (!element) return;
+
 					const default_submitter = /** @type {HTMLElement | undefined} */ (
 						element.querySelector('button:not([type]), [type="submit"]')
 					);

packages/kit/test/apps/async/src/routes/remote/form/validate/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { issue_path_form, my_form, my_form_2 } from './form.remote.ts';
+	import { issue_path_form, my_form, my_form_2, unmount_form } from './form.remote.ts';
 	import * as v from 'valibot';
 
 	const schema = v.object({
@@ -8,7 +8,13 @@
 		button: v.literal('submitter')
 	});
 
+	const unmount_schema = v.object({
+		qux: v.picklist(['a', 'b'])
+	});
+
 	let error = $state(false);
+	let mounted = $state(true);
+	let unmount_error = $state('no error');
 </script>
 
 <form
@@ -72,3 +78,26 @@
 
 	<button>submit</button>
 </form>
+
+{#if mounted}
+	<form id="unmount-form" {...unmount_form.preflight(unmount_schema)}>
+		<input {...unmount_form.fields.qux.as('text')} />
+	</form>
+{/if}
+
+<button
+	id="unmount-then-validate"
+	onclick={async () => {
+		const validated = unmount_form.validate({ all: true });
+		mounted = false;
+
+		try {
+			await validated;
+		} catch (e) {
+			unmount_error = /** @type {Error} */ (e).message;
+		}
+	}}
+>
+	unmount then validate
+</button>
+<p id="unmount-error">{unmount_error}</p>

packages/kit/test/apps/async/src/routes/remote/form/validate/form.remote.ts

@@ -37,3 +37,12 @@ export const issue_path_form = form(
 		return data;
 	}
 );
+
+export const unmount_form = form(
+	v.object({
+		qux: v.picklist(['a', 'b'])
+	}),
+	async (data) => {
+		return data;
+	}
+);

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

@@ -596,6 +596,20 @@ test.describe('remote functions', () => {
 		await expect(allIssues).toContainText('"path":["nested","value"]');
 	});
 
+	test('form validate does not throw if the form unmounts while validating', async ({
+		page,
+		javaScriptEnabled
+	}) => {
+		if (!javaScriptEnabled) return;
+
+		await page.goto('/remote/form/validate');
+
+		await page.locator('#unmount-then-validate').click();
+
+		await expect(page.locator('#unmount-form')).toHaveCount(0);
+		await expect(page.locator('#unmount-error')).toHaveText('no error');
+	});
+
 	test('form validation issues cleared', async ({ page, javaScriptEnabled }) => {
 		if (!javaScriptEnabled) return;