sveltejs / sveltejs/kit

Invalid field values in client-side enhanced form callback

Open
#16,359 0 comments 0 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

Field values read in a remoteForm.enhance() callback may be (a) misaligned with the defined type (e.g. returning undefined instead of the typed non-nullable string[]), and (b) out of date when fields were controlled programmatically.

Consequently:

  • Calling myForm.fields.myIds.map(...) may break at runtime. TS may have typed myIds as string[], but at runtime the value may resolve to undefined, and calling .map() will throw an uncaught `Uncaught TypeError.
  • Client-side enhanced form logic that relies on field values via myForm.fields may not read the correct values.
Reproduction

Repro along with demo instructions:

https://stackblitz.com/edit/sveltekit-enhanced-form-missing-client-values?file=md!README.md

See

  • Instructions: README.md
  • Code: src/routes/+page.svelte & src/routes/form.remote.ts
Logs

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: 22.22.3 - /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/kit: ^2.69.3 => 2.69.3 
  @sveltejs/vite-plugin-svelte: ^6.2.4 => 6.2.4 
  svelte: ^5.56.5 => 5.56.5 
  vite: ^7.3.6 => 7.3.6
Severity

serious, but I can work around it

(current hacky workaround may be to call myForm.fields.myField.set(...) inside of an $effect for a managed field)

Additional Information

Notably:

  • new FormData(myForm.element) inside .enhance() shows all the expected values client-side
  • in the server-side remote form function, the values are all as expected

Also, I could have sworn that this used to work fine in a previous sveltekit version, and thought perhaps v2.68.0 introduced a regression. But even after reverting way back to February (v2.52.2) this bug is present.

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

Start with README.md and reproduce the issue in src/routes/+page.svelte and src/routes/form.remote.ts using the linked StackBlitz demo. Compare values exposed through myForm.fields inside remoteForm.enhance() with FormData and the server-side values, including programmatically controlled fields. Done means the callback exposes current values matching their declared types, without undefined values for non-nullable fields.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.