fix: tick before resetting forms

.changeset/slow-bees-walk.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: wait a tick before resetting forms

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

@@ -84,6 +84,7 @@ export function form(id) {
 		 */
 		let enhance_callback = async (instance) => {
 			if (await instance.submit()) {
+				await tick();
 				instance.element.reset();
 			}
 		};

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

@@ -1 +1,13 @@
-Starting point
+<script lang="ts" module>
+	const pages = import.meta.glob('./**/+page.svelte');
+</script>
+
+<h3>Tests</h3>
+<ul style:font-family="sans-serif">
+	{#each Object.keys(pages) as name (name)}
+		{@const href = name.slice(1, -13)}
+		<li>
+			<a {href}>{href}</a>
+		</li>
+	{/each}
+</ul>

packages/kit/test/apps/async/src/routes/remote/form/as-value/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { as_value_form, get_values, get_hidden_values, reset_values } from './form.remote.ts';
+	import Form from './Form.svelte';
 
 	const values = $derived(await get_values());
 	const hidden_values = $derived(await get_hidden_values());
@@ -20,31 +21,7 @@
 
 <div class="forms">
 	{#each values as value (value.id)}
-		<form class="form" {...as_value_form.for(value.id)}>
-			<input {...as_value_form.fields.hidden.string.as('hidden', 'string')} />
-			<input {...as_value_form.fields.hidden.number.as('hidden', 1)} />
-			<input {...as_value_form.fields.hidden.boolean.as('hidden', true)} />
-
-			<input {...as_value_form.fields.text_field.as('text', value.text_field)} />
-
-			<input {...as_value_form.fields.number_field.as('number', value.number_field)} />
-
-			<select {...as_value_form.fields.select_field.as('select', value.select_field)}>
-				<option>apple</option>
-				<option>banana</option>
-				<option>cherry</option>
-			</select>
-
-			<input {...as_value_form.fields.color_field.as('color', value.color_field)} />
-
-			<input {...as_value_form.fields.range_field.as('range', value.range_field)} />
-
-			<label
-				>Checkbox
-				<input {...as_value_form.fields.checkbox_field.as('checkbox', value.checkbox_field)} />
-			</label>
-			<button {...as_value_form.fields.id.as('submit', value.id)}>submit</button>
-		</form>
+		<Form {value} />
 	{/each}
 </div>
 
@@ -69,12 +46,4 @@
 		flex-wrap: wrap;
 		gap: 0.25rem;
 	}
-	.form {
-		display: flex;
-		flex-direction: column;
-		max-width: 200px;
-		gap: 0.25rem;
-		padding: 0.5rem;
-		background: #eee;
-	}
 </style>

packages/kit/test/apps/async/src/routes/remote/form/as-value/Form.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { as_value_form, type get_values } from './form.remote';
+
+	const { value }: { value: Awaited<ReturnType<typeof get_values>>[number] } = $props();
+	const form = $derived(as_value_form.for(value.id));
+</script>
+
+<form class="form" {...form}>
+	<input {...form.fields.hidden.string.as('hidden', 'string')} />
+	<input {...form.fields.hidden.number.as('hidden', 1)} />
+	<input {...form.fields.hidden.boolean.as('hidden', true)} />
+
+	<input {...form.fields.text_field.as('text', value.text_field)} />
+
+	<input {...form.fields.number_field.as('number', value.number_field)} />
+
+	<select {...form.fields.select_field.as('select', value.select_field)}>
+		<option>apple</option>
+		<option>banana</option>
+		<option>cherry</option>
+	</select>
+
+	<input {...form.fields.color_field.as('color', value.color_field)} />
+
+	<input {...form.fields.range_field.as('range', value.range_field)} />
+
+	<label
+		>Checkbox
+		<input {...form.fields.checkbox_field.as('checkbox', value.checkbox_field)} />
+	</label>
+	<button {...form.fields.id.as('submit', value.id)}>submit</button>
+</form>
+
+<style>
+	.form {
+		display: flex;
+		flex-direction: column;
+		max-width: 200px;
+		gap: 0.25rem;
+		padding: 0.5rem;
+		background: #eee;
+	}
+</style>