Form field unexpectedly resets after use:enhance submission

[dlmoffett]

Hey! I'm pretty new to sveltekit and loving it. But I've come across something unexpected that I'm going to assume is my fault before I create an issue.

I have a form with use:enhance and two text inputs (name and description). The form is to edit an existing resource. When the page is first loaded the expected/current values are visible in both inputs.

If I change one input's value and click the submit button I observe

• The value of the changed input is updated to the new value
• The value of the unchanged input becomes empty and I see the placeholder

This is really unexpected because I see the expected value of the same field correctly displayed in all other places

• It's printed in the inspect
• It's visible in the label for the input
• It's visible in my <pre> for debugging

So the issue seems related the value binding and perhaps something to do with forms to me?

+page.svelte

<script lang="ts">
	import { enhance } from '$app/forms';
	import IconShieldPlus from '@lucide/svelte/icons/shield-plus';
	import IconTrash2 from '@lucide/svelte/icons/trash-2';

	let { data } = $props();
	$inspect(data.role); <--Prints expected value
</script>

<div class="space-y-[2rem] flex-1 flex flex-col">
	<h1 class="text-2xl mb-2">{data.role ? 'Edit Role' : 'Create Role'}</h1>

	<form method="POST" action="?/{data.role ? 'update' : 'create'}" use:enhance>
		<input type="hidden" name="id" value={data.role?.id} />

		<label class="label">
			<span class="label-text">Role name {data.role?.name}</span> <--Displays expected value
			<input
				class="input"
				type="text"
				name="name"
				value={data.role?.name} <--No value
				required
				placeholder="Role name"
			/>
		</label>

		<label class="label">
			<span class="label-text">Role description {data.role?.description}</span> <--Displays expected value
			<input
				class="input"
				type="text"
				name="description"
				value={data.role?.description} <--Displays expected value
				placeholder="Role description"
			/>
		</label>

		<button type="submit" class="btn preset-filled-success-500"
			><IconShieldPlus /><span>{data.role ? 'Update Role' : 'Create Role'}</span></button
		>
		{#if data.role}
			<button type="button" class="btn preset-filled-error-500"
				><IconTrash2 /><span>Delete role</span></button
			>
		{/if}
	</form>

	<pre>{JSON.stringify(data.role, null, 2)}</pre> <--Displays expected value
</div>

Demo

I'm sure I'm just missing something trivial.

[brunnerh]

Not sure where the inconsistency is coming from, this seems a bit buggy 🤔 (e.g. submit twice without interaction and the second submit clears the fields).

enhance resets the form and invalidates which should reload the data. Maybe something is wrong about the order of operations here.
As a workaround, you could skip the reset fully or conditionally.

You can provide a callbacks to enhance and invoke update with reset: false, it should be something like this:

<form use:enhance={() => ({ update }) => update({ reset: false })}>

(The outer function is called on submission, the inner on receiving a result.)

[dlmoffett]

I've tried this out and it does work, but I'm imagining this has perhaps negative side effects in the cases where there's an error?

I'm curious if you were able to repro or if you're basing it on my snippet and gif. I.E. is this an issue isolated to me or is it an issue in the framework?

[brunnerh]

I've tried this out and it does work, but I'm imagining this has perhaps negative side effects in the cases where there's an error?

It should behave the same, as far as I know. You usually just have to make sure that the behavior fits what the page would do with JS disabled/having failed to load (where you get a regular form submission).

I'm curious if you were able to repro or if you're basing it on my snippet and gif. I.E. is this an issue isolated to me or is it an issue in the framework?

I reproduced it based on your code. There might be a bug, this workflow does not strike me as that unusual.