fix: coerce values typed into remote form fields, apply the .as() default only until edited

.changeset/pre/as-default-until-edited.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: coerce values typed into remote form fields, and only apply the default given to `.as()` until the field is edited

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

@@ -535,7 +535,7 @@ export function form(id) {
 						}
 					}
 
-					set_nested_value(input, field, value);
+					set_nested_value(input, field, is_file ? value : coerce_form_value(field.type, value));
 				} else if (is_file) {
 					if (DEV && element.multiple) {
 						throw new Error(
@@ -554,7 +554,10 @@ export function form(id) {
 					set_nested_value(
 						input,
 						field,
-						element.type === 'checkbox' && !element.checked ? null : element.value
+						coerce_form_value(
+							field.type,
+							element.type === 'checkbox' && !element.checked ? null : element.value
+						)
 					);
 				}
 

packages/kit/src/runtime/form-utils.js

@@ -750,6 +750,17 @@ export function create_field_proxy(context, target = {}, path = []) {
 			}
 
 			if (prop === 'as') {
+				/**
+				 * the field's value, or `fallback` until the field has been edited
+				 * (without a fallback there is nothing to suppress, so `dirty` is not read)
+				 * @param {unknown} [fallback]
+				 */
+				const read = (fallback) =>
+					get_value() ??
+					(fallback !== undefined && Object.hasOwn(context.get_dirty(), key)
+						? undefined
+						: fallback);
+
 				/**
 				 * @param {string} type
 				 * @param {unknown} [input_value]
@@ -801,7 +812,7 @@ export function create_field_proxy(context, target = {}, path = []) {
 							value: {
 								enumerable: true,
 								get() {
-									return get_value() ?? input_value;
+									return read(input_value);
 								}
 							}
 						});
@@ -834,7 +845,7 @@ export function create_field_proxy(context, target = {}, path = []) {
 							enumerable: true,
 							get() {
 								const value = get_value();
-								if (value == null) return checked;
+								if (value == null) return read(checked);
 								if (type === 'radio') return value === input_value;
 								if (is_array) return /** @type {unknown[]} */ (value).includes(input_value);
 								return value;
@@ -897,8 +908,7 @@ export function create_field_proxy(context, target = {}, path = []) {
 						value: {
 							enumerable: true,
 							get() {
-								const value = get_value() ?? input_value;
-								return value != null ? String(value) : '';
+								return String(read(input_value) ?? '');
 							}
 						}
 					});

packages/kit/src/runtime/form-utils.spec.js

@@ -850,4 +850,18 @@ describe('create_field_proxy', () => {
 		expect(cloned.getTime()).toBe(original.getTime());
 		expect(cloned).not.toBe(original);
 	});
+
+	test('the default given to as() only applies until the field is edited', () => {
+		const edited = create_field_proxy({
+			form_id: 'form',
+			get: () => ({}),
+			set: () => {},
+			get_issues: () => ({}),
+			get_touched: () => ({}),
+			get_dirty: () => ({ a: true })
+		});
+
+		expect(edited.a.as('number', 3).value).toBe('');
+		expect(edited.a.as('checkbox', true).checked).toBe(undefined);
+	});
 });

packages/kit/test/apps/async/src/routes/remote/form/default-until-edited/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { edit } from './form.remote.ts';
+</script>
+
+<form {...edit}>
+	<input id="amount" {...edit.fields.amount.as('number', 200)} />
+	<button id="reset" type="reset">reset</button>
+</form>
+<p id="value">{JSON.stringify(edit.fields.value())}</p>

packages/kit/test/apps/async/src/routes/remote/form/default-until-edited/form.remote.ts

@@ -0,0 +1,4 @@
+import { form } from '$app/server';
+import * as v from 'valibot';
+
+export const edit = form(v.object({ amount: v.optional(v.number()) }), async () => {});

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

@@ -259,6 +259,29 @@ test.describe('remote functions', () => {
 		});
 	});
 
+	test('the default given to .as() only applies until the field is edited', async ({
+		page,
+		javaScriptEnabled
+	}) => {
+		test.skip(!javaScriptEnabled);
+
+		await page.goto('/remote/form/default-until-edited');
+		const amount = page.locator('#amount');
+		const value = page.locator('#value');
+		await expect(amount).toHaveValue('200');
+
+		await amount.fill('20');
+		await expect(value).toHaveText('{"amount":20}');
+
+		await amount.press('Backspace');
+		await amount.press('Backspace');
+		await expect(amount).toHaveValue('');
+		await expect(value).toHaveText('{}');
+
+		await page.click('#reset');
+		await expect(amount).toHaveValue('200');
+	});
+
 	test('radio and checkbox inputs keep the current value when only another field changes', async ({
 		page,
 		javaScriptEnabled