FormAction items have unusual iteration behaviour
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
I'm using Form Actions to return a revised array of items in order to dynamically add form items when JS is not available.
Dynamic form code example
<script>
// ...
export let form;
let items = []
items[0] = ['pets', '']
$: {
if (form?.items?.length > 0) {
items = form.items
}
}
const add = (e) => {
return // remove this `return` for a 'working' loop
e.preventDefault()
items.push(['pets', ''])
items = items
}
</script>
<form method="POST" action="?/submit" use:enhance>
{#each items as [key, value], i}
<label>
Pet name #{i + 1}
<input name="pets" value={value} />
</label><br />
{/each}
<button
formaction="?/add"
on:click={add}
>Add item</button>
<!-- ... -->
</form>
Where the "Add item" button goes to the back-end action and returns an updated array of items.
I expect the named action to return an updated array, and it does, but they're not rendered in the correct order, nor do some of the names appear after adding clicking 'Add item' a few times with entered data.
Reproduction
https://www.sveltelab.dev/e7a4t8onvtul9th
- Observe 'debug' text displaying proper array items, yet they aren't reflected in the
#eachloop - Enabling JS to perform
.push()client-side works as intended, comment out Line 15 to see
Logs
No response
System Info
System:
OS: macOS 12.6.6
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 224.02 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v18.16.0/bin/npm
Browsers:
Brave Browser: 114.1.52.126
Chrome: 114.0.5735.133
Safari: 16.5
npmPackages:
@sveltejs/adapter-auto: ^2.1.0 => 2.1.0
@sveltejs/kit: ^1.20.4 => 1.20.4
@sveltejs/vite-plugin-svelte: ^2.3.0 => 2.3.0
svelte: ^3.59.2 => 3.59.2
vite: ^4.3.8 => 4.3.8
Severity
serious, but I can work around it
Additional Information
No response
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
Start by reproducing the behavior in the linked SvelteLab example, focusing on the Form Actions response and the subsequent {#each} rendering. Trace how the returned items reach the client and compare their order and names after repeated additions; done means server-returned items render in the correct order with all names preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- full-stack
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100