Remote Functions: form update clears inputs on second submit

[munxar]

Describe the bug

💡 simple case

When using a simple remote function form to update data, the first submit or when data changes or triggers validation works as expected. when submitting the same input value, the value is set to an empty string.

🤓 more context

when client side routing is involved or redirects (server), the state in the client is not reflecting what the remote functions return. often it's the last state or the state when component was first visited.

🤷‍♂️ probably skill issues

i'm not sure if I just don't get how to correctly use form in an update scenario, so please correct me if my example is fundamentally wrong.

Reproduction

Go to this demo:
https://stackblitz.com/edit/sveltejs-kit-template-default-qmclzo4f?file=src%2Froutes%2F%2Bpage.svelte

• change text in the input (e.g. nobug)
• submit (works)
• submit again without changing (text is gone)

Logs

sometimes the **await_waterfall** warning is shown in the clients console.
(tried to follow the tip, but this doesn't to affect the bug)

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^6.1.0 => 6.1.1 
    @sveltejs/kit: ^2.43.2 => 2.46.5 
    @sveltejs/vite-plugin-svelte: ^6.2.0 => 6.2.1 
    svelte: ^5.39.5 => 5.39.12 
    vite: ^7.1.7 => 7.1.9

Severity

annoyance

Additional Information

As far as I can tell, the server state is correct and the data send to the remote function contains the expected content. If JavaScript is disabled everything works as expected, which would proof the first sentence.

enhance

I tried to tinker around with the client side enhance, which could make the behavior that I'd expect.
{...updateText.enhance(async ({ submit }) => { await submit(); })}
But now the state is wrong when navigating away and back on client side.

This is very annoying when implementing tradition CRUD flows that use a lot of routing for display, edit, delete states, and then submitting forms. I could never get the state correct in every case.

refresh

even when hardcore refresh everything on server, client side, the form state still is off when navigating around or use the browser history (e.g. back).

[sillvva]

Yeah, if you don't use .enhance() the form values will reset after a successful submission.

If you do use .enhance() the .issues(), .allIssues(), and .result will cache and keep their values as you navigate to another page and back. The internal submitted state is also cached. This is indeed a very annoying behavior and I think Svelte should provide a fix for this.

However, I've found a fairly simple solution. By providing a form id in .for() that is a random value, it will create a new instance of the form each time the page loads. Keep in mind that this value will be submitted as the .id property the object on the server. So if you expect a specific or empty value, you can override it with a hidden input.

<script>
  import { getText, updateText } from '$lib/demo.remote';
	let text = $derived(await getText());	

	const form = updateText.for(Math.random()); 
	// If your data has an id, use that with a random value of the same type as a fallback.
	// If your id is a uuid, use the same type of uuid. The remote form will submit this value as the id
	// ex. remoteForm.for(initialData.id ?? v7());
	// You can still override the id that is submitted in the form with a hidden input.
</script>
<h1>Remote Function Form (Bug?)</h1>

<div>
	Text: {text}
</div>
<form {...form.enhance(({ submit }) => { submit(); })}>
	<div>
		<label
			>Enter Text and submit twice (without chage)
			<input {...form.fields.text.as('text')} value={text} />
		</label>
		{#each form.fields.text.issues() as issue (issue)}
			<div>{issue.message}</div>
		{/each}
	</div>
	<button>update</button>
</form>

[munxar]

@sillvva thanks you for the workaround.
I hope this is not the final design and personally I think the "reset" of the form is not what should happen if you bind values to the fields.
As I wrote the first submit works as expected and if you change values too. Only if the form values are the same, they are reset.
Could the caching mechanism fails in this case, because nothing changes? This could explain why your idea with the random value brute forces a change.
But why does the first update work?

[sillvva]

I'm not sure why it only resets when the value doesn't change. I might be wrong (not a maintainer), but I think the expected behavior is that it should always reset without .enhance() so that it mimics standard HTML form behavior.

[munxar]

@sillvva I get your point about the "reset" behavior, but in my case this is not what would happen if you do it with only http and server side rendered html. Let me explain:
Here is a very simple example with the tools of SvelteKit without any Svelte logic only server side GET and POST.

https://stackblitz.com/edit/sveltejs-kit-ssr-form?file=src%2Froutes%2F%2Bserver.js

import { text } from '@sveltejs/kit';

// server side state
let value = 'Demo';

// template rendering a simple html form, value is set to the input value
const html = (value) => `<!doctype html>
<html>
	<body>
		<form method="post">
            <!-- here the current value is inserted -->
            <input name="test" value="${value}"/>
            <button>submit</button>			
        </form>
	</body>
</html>`;

// return the form
export const GET = () => {
	return text(html(value));
};

// receive the form
export const POST = async ({ request }) => {
    // parse the form value
    const form = await request.formData();
    // set the server side state
    value = form.get('test')?.toString() ?? '';
        
    // return the html template with the new state
    return text(html(value));
};

This is would be the behavior of a normal form in html. As you see, there is no "reset". Why should there be one? You explicitly bind the value before rendering your html. Which is what I want to achive with the example I gave in the Bug description.

<script>
    ...
    // state from the server
    let text = $derived(await getText());
<script>
<form>
    ...
    <!- bound to the input field -->
    <input value={text}>
</form>

Sorry that I'm so explicit here. But I really love how SvelteKit handled load functions and actions, because I could stay in the "old school" request / response cycle model but get the advantage of optimized client side "magic".

Currently the remote functions would give me more freedom how to structure my code, but only if the mental model would stay the same. Having a behavior that "resets" the form without taking the bound values into account feels wrong to me and is different from how plain html sites work.

Hopefully some core maintainer could give some more inside about this topic, because the documentation has no example for the update case.

[sillvva]

Here's a pure HTML form. The standard behavior is that the values reset, because the page reloads when a form is submitted.

https://stackblitz.com/edit/stackblitz-starters-gowa6eew?description=HTML/CSS/JS%20Starter&file=index.html&terminalHeight=10&title=Static%20Starter

Your example with the GET and POST is not HTML. It's more like express or PHP with dynamic rendering mixing logic and templating.

If you want to opt out of that behavior, use .enhance().

[colecrouter]

FWIW, the "reset" behavior is briefly mentioned in the docs:

When using enhance, the <form> is not automatically reset — you must call form.reset() if you want to clear the inputs.

@sillvva is correct, this "unchanged-fields-get-reset" behavior is not standard. Take this completely static page, for example:

<script>
  import { myForm } from "$lib/remote";
  let { data } = $props();
</script>

<form {...myForm}>
  First Name:
  <input {...myForm.fields.firstName.as("text")} value={data.firstName} />
  Last Name:
  <input {...myForm.fields.lastName.as("text")} value={data.lastName} />
  <input type="submit" value="Submit" />
</form>

As stated above, changing only 1 field causes & submitting causes the other field to reset. However, if you add export const csr = false;, all fields update. If you swap out the remote function for a vanilla form + form action, all fields update. I can't say it looks like the observed behavior is intended, but it could just be a strange edge case...

[sillvva]

I think I understand what is going on here. This $derived does not rerun the dependent effects, because the value returned does not change when you submit the same value. Therefore, it falls back to the default behavior of resetting the form.

let text = $derived(await getText());

When the value does change, it resets the form, but also updates the value attribute that is dependent on the derived text.

<input {...updateText.fields.text.as('text')} value={text} />

Here's an example to demonstrate this. If you change the value in the first input and submit, the first value is retained, but the second value is cleared. That is because the form is still being reset, but the template effect that depends on text is rerun.

Again the default reset behavior can be opted out of by using .enhance(). In a no-JS environment, the page should reload so it should not reset in that case either.

[munxar]

Here's a pure HTML form. The standard behavior is that the values reset, because the page reloads when a form is submitted.

Again, no. HTML does not "reset" anything. It just renders the values that you set in your input fields as values.
If you write html like:
<input name="message" /> and fill it out and submit, it will reload the initial page and that is why you experience as "reset".

Now let's write only HTML with this input:
<input name="message" value="Hello" /> If you change that input ("Hello") and submit that, it will NOT reset, it will render the initial value, because the page is reloaded.

Here is your example with values set, does the form reset?: https://stackblitz.com/edit/stackblitz-starters-31thepnh?file=index.html

And this behavior is what I'm talking about, because I'm loading data and set it to the inputs value, which doesn't work.
It is even visible when you look at the pages source, but "something" is wiping out the values, when client side dehydration is running. And that is just not what I expect.

Your example with the GET and POST is not HTML. It's more like express or PHP with dynamic rendering mixing logic and templating.

It IS normal HTML, that is returned from the server. And SvelteKit with any server side adapter is just like PHP, or express with templating + client side dehydration.

If you want to opt out of that behavior, use .enhance().

I disagree, it should behave like it does with the traditional load functions and actions or like if JS is disabled / csr = false.
Because that is what everyone would expect and not that the values suddenly are overwritten with an empty string.

[sillvva]

Part of the discussion on #14815 is about potentially making remote forms configurable by importing a factory function instead of an instance.

const data = $state(initialData);

const scopedTodo = $derived(todo({
  key: 'scoped', // key, for, or id
  preflight: schema,
  initialData: data, // $state
  /** Show errors on load */
  prevalidate: true,
  /** Clear values on submit */
  clearOnSubmit: false
}));

Throw a vote on there if this is something you want. The PR currently does not add any configuration options, but does make such features possible.