fix: ensure remote form fields.set triggers reactivity (#14661)

* fix: ensure remote form fields.set triggers reactivity

* test: cover remote form fields.set reactivity

* chore: changeset

* Apply suggestion from @teemingc

* Apply suggestion from @teemingc

---------

Co-authored-by: Tee Ming <[email protected]>

Author: LeeWxx

.changeset/easy-plants-remain.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: ensure `form` remote functions' `fields.set` triggers reactivity

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

@@ -537,8 +537,21 @@ export function form(id) {
 						(path, value) => {
 							if (path.length === 0) {
 								input = value;
+								update_all_versions();
 							} else {
 								input = deep_set(input, path.map(String), value);
+
+								const key = build_path_string(path);
+								versions[key] ??= 0;
+								versions[key] += 1;
+								touched[key] = true;
+
+								const parent_path = path.slice();
+								while (parent_path.pop() !== undefined) {
+									const parent_key = build_path_string(parent_path);
+									versions[parent_key] ??= 0;
+									versions[parent_key] += 1;
+								}
 							}
 						},
 						() => issues

packages/kit/test/apps/basics/src/routes/remote/form/imperative/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { set_message } from '../form.remote.js';
+	import * as v from 'valibot';
+
+	const schema = v.object({
+		message: v.picklist(
+			['hello', 'goodbye', 'unexpected error', 'expected error', 'redirect'],
+			'message is invalid'
+		)
+	});
+</script>
+
+<form {...set_message.preflight(schema)}>
+	<label>
+		<span>Message</span>
+		<input {...set_message.fields.message.as('text')} />
+	</label>
+
+	<p id="issue">
+		{set_message.fields.message.issues()?.[0]?.message ?? 'ok'}
+	</p>
+	<p id="value">{set_message.fields.message.value()}</p>
+
+	<button
+		id="set-and-validate"
+		type="button"
+		on:click={async () => {
+			set_message.fields.message.set('hello');
+			await set_message.validate({ includeUntouched: true });
+		}}
+	>
+		Set & validate
+	</button>
+	<button>Submit</button>
+</form>

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

@@ -1965,6 +1965,18 @@ test.describe('remote functions', () => {
 		await expect(page.locator('p')).toHaveText('success');
 	});
 
+	test('fields.set updates DOM before validate', async ({ page }) => {
+		await page.goto('/remote/form/imperative');
+
+		const input = page.locator('input[name="message"]');
+		await input.fill('123');
+
+		await page.locator('#set-and-validate').click();
+
+		await expect(input).toHaveValue('hello');
+		await expect(page.locator('#issue')).toHaveText('ok');
+	});
+
 	test('command pending state is tracked correctly', async ({ page }) => {
 		await page.goto('/remote');