When you render Field conditionally first rendered field will override all next rendered fields

[vara855]

Describe the bug

Use case:

I want to render different Field components according to some condition of form state.values.

It used to work in previous versions (0.21=<).

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-dvwuju?file=src%2FApp.jsx

Steps to reproduce

1. go to https://stackblitz.com/edit/vitejs-vite-dvwuju?file=src%2FApp.jsx
2. fill input
3. click checkbox
4. check values of form

Expected behavior

I expected that values firstField value will dissapear from state when you uncheck checkbox and secondField value will be stored in state.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Arc browser

TanStack Form adapter

react-form

TanStack Form version

v0.25.1

TypeScript version

=v5.4.5

Additional context

No response

[vara855]

upd: You may fix it if you render it under different Subscribe components. But it feels like a bug...

[BenJenkinson]

You can also "fix" it by applying a key prop to each of the <Field> instances that would occupy the same position in the tree, (e.g. <Field key="first" name="firstField">).

Because of that, I think the problem is that the <Field> component and useField state not "noticing" when the name prop has changed.

Here, we see that the fieldApi instance is created once with the initial name value, and then kept in state.

form/packages/react-form/src/useField.tsx

Lines 68 to 81 in 2bebfd5

	const [fieldApi] = useState(() => {
	const api = new FieldApi({
	...opts,
	form: opts.form,
	name: opts.name,
	})
	const extendedApi: typeof api & ReactFieldApi<TParentData, TFormValidator> =
	api as never
	extendedApi.Field = Field as never
	return extendedApi
	})

The value of this.name is only set when a new instance is constructed:

form/packages/form-core/src/FieldApi.ts

Lines 429 to 442 in 2bebfd5

	/**
	* Initializes a new `FieldApi` instance.
	*/
	constructor(
	opts: FieldApiOptions<
	TParentData,
	TName,
	TFieldValidator,
	TFormValidator,
	TData
	>,
	) {
	this.form = opts.form as never
	this.name = opts.name as never

And the field's getValue and setValue functions use the initial this.name value:

form/packages/form-core/src/FieldApi.ts

Lines 597 to 611 in 2bebfd5

	/**
	* Gets the current field value.
	* @deprecated Use `field.state.value` instead.
	*/
	getValue = (): TData => {
	return this.form.getFieldValue(this.name) as TData
	}
	/**
	* Sets the field value and run the `change` validator.
	*/
	setValue = (updater: Updater<TData>, options?: UpdateMetaOptions) => {
	this.form.setFieldValue(this.name, updater as never, options)
	this.validate('change')
	}

In the update function, we can see that it uses the opt.name value to get the correct default value, but doesn't update the stored this.name to be the new value of opts.name; so getValue/setValue continue to use the (initial, now incorrect) value.

form/packages/form-core/src/FieldApi.ts

Lines 564 to 595 in 2bebfd5

	update = (
	opts: FieldApiOptions<
	TParentData,
	TName,
	TFieldValidator,
	TFormValidator,
	TData
	>,
	) => {
	// Default Value
	if (this.state.value === undefined) {
	const formDefault = getBy(opts.form.options.defaultValues, opts.name)
	if (opts.defaultValue !== undefined) {
	this.setValue(opts.defaultValue as never, {
	dontUpdateMeta: true,
	})
	} else if (formDefault !== undefined) {
	this.setValue(formDefault as never, {
	dontUpdateMeta: true,
	})
	}
	}
	// Default Meta
	if (this._getMeta() === undefined) {
	this.setMeta(this.state.meta)
	}
	this.options = opts as never
	}

[vara855]

@BenJenkinson Yep, everything works as you explained. Thank you for explanation. I haven't tried to dive into implementation. In my codebase I've fixed it with two Subscribe blocks.

For me it looks like unhandled name property of opts in update.

I think it's worth fixing that. I may do a PR on that. Either it's worth reflecting in the doc. @crutchcorn what do you think? Do you mind if I fix it?