[v2][vue] Field components registered with `createFormHook` don't rerender on field state changes, and lose their field API after `form.reset()`

Offen
  • Stimmt etwas nicht?
#2,390 2 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript
Bereich
frontend

Rechercherichtung

Beginne mit src/AppForm/fieldComponentHelpers.lib.ts und src/VueForm/Components.lib.ts und untersuche anschließend die in PR #2392 referenzierten Regressionstests. Reproduziere den Fehler mit dem Vue-Formular-Test-Setup und überprüfe, dass injizierte Feldkomponenten nach Änderungen an der Validierung aktualisiert werden und das Formular nach form.reset() weiterhin aktualisieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Describe the bug

In @tanstack/[email protected], field components registered through createFormHook with getFormHookHelpers().fieldComponent.strict() (the pattern used in examples/vue/large-form) only render once:

  1. They don't rerender when the field state changes. After a change that produces a validation error, the form state is correct (form.getFieldMeta('name').errors contains the error and meta.isInvalid is true), but the injected component keeps showing its first render: no error message and aria-invalid="false". Rendering the same field directly inside the <form.Field> slot updates as expected.
  2. They lose their field API after form.reset(). After a reset, typing into the injected component no longer updates the form value.

Root cause

  • wrapField (src/AppForm/fieldComponentHelpers.lib.ts) injects the field API and passes the same object as a prop on every render. The parent Field rerenders its slot because of its own subscription, but Vue skips updating the injected component because its props are unchanged (same object reference), and the child's reads of the field API getters are not tracked by Vue.
  • createFieldComponent (src/VueForm/Components.lib.ts) calls provide(fieldContext, fieldApi.value) once during setup. useField replaces fieldApi.value when resetVersion changes, so after form.reset() the injected component keeps the old instance. The comment above that line ("Field APIs are stable for a mounted name… the parent subscription handles state-driven renders") doesn't hold for injected components.
Your minimal, reproducible example

Regression tests are included in PR #2392. Minimal Vue SFC repro:

<!-- TextField.vue — same as examples/vue/large-form/src/components/TextField.vue -->
<script setup lang="ts">
import type { FieldWithValue } from '@tanstack/vue-form'
defineProps<{ field: FieldWithValue<string>; label: string }>()
</script>

<template>
  <label :for="field.name">{{ label }}</label>
  <input
    :id="field.name"
    :value="field.value"
    :aria-invalid="field.meta.isInvalid"
    @input="field.handleChange(($event.target as HTMLInputElement).value)"
  />
  <p v-for="error in field.errors" :key="error.message">{{ error.message }}</p>
</template>

<!-- Form.vue -->
<script setup lang="ts">
import { createFormHook, getFormHookHelpers } from '@tanstack/vue-form'
import TextField from './TextField.vue'

const { fieldComponent } = getFormHookHelpers()
const { useAppForm } = createFormHook({
  fieldComponents: { TextField: fieldComponent.strict(TextField, 'field') },
  formComponents: {},
})

const form = useAppForm({
  defaultValues: { name: '' },
  validators: [
    {
      triggers: ['change'],
      run: ({ value, createErrorMap }) => {
        const errors = createErrorMap()
        if (value.name.length < 2) errors.fields.name = 'At least 2 characters'
        return errors
      },
    },
  ],
})
</script>

<template>
  <form.Field name="name" v-slot="{ field }">
    <field.TextField label="Name" />
  </form.Field>
  <button type="button" @click="form.reset()">Reset</button>
</template>
Steps to reproduce
  1. Render Form.vue.
  2. Type one character into the input.
  3. form.getFieldMeta('name').errors contains "At least 2 characters", but TextField shows no error and aria-invalid stays "false".
  4. Click Reset, then type again: form.state.values.name doesn't change.
Expected behavior

Injected field components rerender when their field state changes and keep working after form.reset(), the same as markup rendered directly inside the <form.Field> slot.

How often does this bug happen?

Every time

Platform
  • macOS, Node 24
  • Reproduced in Vitest with both happy-dom and jsdom (the upstream packages/vue-form test setup)
  • Vue 3.6.0-rc.8
TanStack Form adapter

vue-form

TanStack Form version

2.0.0-alpha.2 (also reproduced on the alpha branch at 6e5b809)

TypeScript version

6.0.3

Additional context

I opened PR #2392 with a fix and two regression tests. Both tests fail before the change and pass after it.

Vorherrschende Sprache
TypeScript
Sterne
6.8k
Forks
705
Ø Merge
1 T. 7 Std.
Gemergte PRs (30 T.)
13

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/form

Alle Issues in TanStack/form

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.