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

Ouverte
  • Quelque chose ne va pas ?
#2,390 2 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
typescript
Domaine
frontend

Piste de recherche

Commencez par src/AppForm/fieldComponentHelpers.lib.ts et src/VueForm/Components.lib.ts, puis examinez les tests de régression référencés dans PR #2392. Reproduisez l’échec avec la configuration de test du formulaire Vue et vérifiez que les composants de champ injectés se mettent à jour après des modifications de la validation et qu’ils mettent toujours à jour le formulaire après form.reset().

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
6.8k
Forks
705
Merge moyen
1 j 6 h
PR mergées (30 j)
12

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/form

Toutes les issues de TanStack/form

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.