Remote Functions: form update clears inputs on second submit
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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