Skip to content

field.as(type, default) breaks reactivity when value is updated via field.set() #15663

@DrUse1

Description

@DrUse1

Describe the bug

When using field.as(type, default) method with a default value, the input field fails to reflect updates made programmatically via field.set().

If the second argument is omitted, the field updates correctly. If it is provided, the field remains stuck at the default value regardless of calls to .set().

Minimal Code Example:

// form.remote.ts
import { z } from "zod";
import { form } from "$app/server";

export const durationForm = form(z.object({
  duration: z.number()
}), async (data) => { /* ... */ });
<script>
  import { durationForm } from "./form.remote.ts";

  function updateValue() {
    // This should update all inputs linked to this field
    durationForm.fields.duration.set(120);
  }
</script>

<button onclick={updateValue}>Set duration to 120</button>

<form {...durationForm}>
  <!-- WORKS: Updates to 120 when button is clicked -->
  <input {...durationForm.fields.duration.as('number')} />

  <!-- BUG: Stays at 5, never updates to 120 -->
  <input {...durationForm.fields.duration.as('number', 5)} />
</form>

Expected Behavior

The input initialized with durationForm.fields.duration.as('number', 5) should:

  1. Initialize with 5.
  2. Update to 120 as soon as durationForm.fields.duration.set(120) is called.

Actual Behavior

The input initialized with a default value via .as() ignores any subsequent reactive updates from the form state. It seems the default value takes precedence over the internal state even after the state has changed.

Reproduction

Link to reproduction: (https://www.sveltelab.dev/ogz92rme39y5835)

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.0 - /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: ^3.0.0 => 3.3.1 
    @sveltejs/kit: ^2.56.1 => 2.56.1 
    @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.1.1 
    svelte: ^5.55.1 => 5.55.1 
    vite: ^6.0.0 => 6.4.1

Severity

annoyance

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions