Describe the bug
In @tanstack/vue-form@2.0.0-alpha.2, field components registered through createFormHook with getFormHookHelpers().fieldComponent.strict() (the pattern used in examples/vue/large-form) only render once:
- 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.
- 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
- Render
Form.vue.
- Type one character into the input.
form.getFieldMeta('name').errors contains "At least 2 characters", but TextField shows no error and aria-invalid stays "false".
- 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.
Describe the bug
In
@tanstack/vue-form@2.0.0-alpha.2, field components registered throughcreateFormHookwithgetFormHookHelpers().fieldComponent.strict()(the pattern used inexamples/vue/large-form) only render once:form.getFieldMeta('name').errorscontains the error andmeta.isInvalidistrue), but the injected component keeps showing its first render: no error message andaria-invalid="false". Rendering the same field directly inside the<form.Field>slot updates as expected.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 parentFieldrerenders 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) callsprovide(fieldContext, fieldApi.value)once during setup.useFieldreplacesfieldApi.valuewhenresetVersionchanges, so afterform.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:
Steps to reproduce
Form.vue.form.getFieldMeta('name').errorscontains "At least 2 characters", butTextFieldshows no error andaria-invalidstays"false".form.state.values.namedoesn'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
packages/vue-formtest setup)TanStack Form adapter
vue-form
TanStack Form version
2.0.0-alpha.2 (also reproduced on the
alphabranch 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.