sveltejs / sveltejs/kit

Remote Functions: form update clears inputs on second submit

Open
#14,729 9 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

forms
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

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).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the behavior in the linked StackBlitz demo, starting with src/routes/+page.svelte and the remote function form submission flow. Compare repeated submits, client-side navigation, redirects, and browser history, then verify that the form state reflects the remote function result in each case.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.