fix: don't reset form after enhanced form submit (#14626)

* WIP don't reset form after enhanced form submit

* fix test

* changeset

* docs

Author: Rich-Harris

.changeset/heavy-donkeys-attack.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: don't automatically reset form after an enhanced submission

documentation/docs/20-core-concepts/60-remote-functions.md

@@ -757,6 +757,8 @@ We can customize what happens when the form is submitted with the `enhance` meth
 </form>
 ```
 
+> When using `enhance`, the `<form>` is not automatically reset — you must call `form.reset()` if you want to clear the inputs.
+
 The callback receives the `form` element, the `data` it contains, and a `submit` function.
 
 To enable client-driven [single-flight mutations](#form-Single-flight-mutations), use `submit().updates(...)`. For example, if the `getPosts()` query was used on this page, we could refresh it like so:

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

@@ -71,6 +71,12 @@ export function form(id) {
 		 */
 		const versions = $state({});
 
+		/**
+		 * This ensures that `{field.value()}` is updated even if the version hasn't been initialized
+		 * @type {Set<string>}
+		 */
+		const version_reads = new Set();
+
 		/** @type {Record<string, InternalRemoteFormIssue[]>} */
 		let issues = $state.raw({});
 
@@ -91,6 +97,16 @@ export function form(id) {
 
 		let submitted = false;
 
+		function update_all_versions() {
+			for (const path of version_reads) {
+				versions[path] ??= 0;
+			}
+
+			for (const key of Object.keys(versions)) {
+				versions[key] += 1;
+			}
+		}
+
 		/**
 		 * @param {FormData} form_data
 		 * @returns {Record<string, any>}
@@ -219,14 +235,7 @@ export function form(id) {
 						if (issues.$) {
 							release_overrides(updates);
 						} else {
-							input = {};
-
-							for (const [key, value] of Object.entries(versions)) {
-								if (value !== undefined) {
-									versions[key] ??= 0;
-									versions[key] += 1;
-								}
-							}
+							update_all_versions();
 
 							if (form_result.refreshes) {
 								refresh_queries(form_result.refreshes, updates);
@@ -420,6 +429,15 @@ export function form(id) {
 					}
 				});
 
+				form.addEventListener('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));
+					update_all_versions();
+				});
+
 				return () => {
 					element = null;
 					preflight_schema = undefined;
@@ -510,7 +528,10 @@ export function form(id) {
 					create_field_proxy(
 						{},
 						() => input,
-						(path) => versions[path],
+						(path) => {
+							version_reads.add(path);
+							versions[path];
+						},
 						(path, value) => {
 							if (path.length === 0) {
 								input = value;

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

@@ -1806,12 +1806,16 @@ test.describe('remote functions', () => {
 			await page.getByText('resolve deferreds').click();
 			await expect(page.getByText('enhanced.pending:')).toHaveText('enhanced.pending: 0');
 			await expect(page.getByText('await get_message():')).toHaveText('await get_message(): hello');
+
+			// enhanced submission should not clear the input; the developer must do that at the appropriate time
+			await expect(page.locator('[data-enhanced] input')).toHaveValue('hello');
+		} else {
+			await expect(page.locator('[data-enhanced] input')).toHaveValue('');
 		}
 
 		await expect(page.getByText('enhanced.result')).toHaveText(
 			'enhanced.result: hello (from: enhanced)'
 		);
-		await expect(page.locator('[data-enhanced] input')).toHaveValue('');
 	});
 
 	test('form preflight works', async ({ page, javaScriptEnabled }) => {