sveltejs / sveltejs/kit

Remote form field.as('text', defaultValue) uses stale field value across dynamic route records

Open
#15,815 0 comments 4 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

When using experimental remote forms ( @sveltejs/kit@2.59.1) on a dynamic edit route, field.as('text', defaultValue) can display a stale value from a previously visited record instead of the current route data.

The route data is correct, but the value returned by .as('text', data.task.title).value is stale.

Workaround: Old way.... this works correctly:
<input {...taskInfo.fields.title.as('text')} value={data.task.title} />

In the attached screenshot, the title should say "Hello World 2" (from the data load), instead it shows the previously visited stale title.

Image

src/routes/tasks/[id]/edit/+page.svelte

Reproduction
<script lang="ts"> import { taskInfo } from './task-edit.remote'; let { data } = $props(); </script>
<div>data.task.title: {data.task.title}</div>
<div>field.value(): {taskInfo.fields.title.value()}</div>
<div>as value: {taskInfo.fields.title.as('text', data.task.title).value}</div>
Server load export async function load({ params }) { const id = Number(params.id); const rows = await db.select().from(task).where(eq(task.id, id));
return {
	task: rows[0]
};

}
Steps:

Navigate to /tasks/1/edit.
Edit or interact with the title input.
Navigate back to the task list.
Navigate to /tasks/2/edit.
Observe that data.task.title is correct for task 2, but the input may show the stale title from task 1.
Expected behavior
field.as('text', data.task.title) should render the current data.task.title when the route data changes, or the docs should clarify that the second argument is only a fallback behind existing remote form input state.

Actual behavior
The input can show a stale value from a previous dynamic route record.

This works correctly:
<input {...taskInfo.fields.title.as('text')} value={data.task.title} />

Logs

System Info
@sveltejs/kit@2.59.1
Severity

annoyance

Additional Information

No response

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 the reproduction in src/routes/tasks/[id]/edit/+page.svelte and reproduce the navigation from task 1 to task 2. Trace taskInfo.fields.title.as('text', data.task.title) and its remote-form state across the route change. Done means the field shows the current data.task.title, or the documented fallback behavior is made explicit.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.