Deleting field keeps data from subfields

[LeCarbonator]

Describe the bug

When calling <ReactExtendedFormApi>#deleteField(), subfields persist even after the parent field is deleted.

If subfields were invalid at point of deletion, the form is stuck in an invalid state and can no longer be submitted.

Your minimal, reproducible example

https://stackblitz.com/edit/bolt-vite-react-8afzqlnr?file=src%2FApp.tsx

Steps to reproduce

1. Enter stackblitz
2. Touch Robert's text input => canSubmit should now be false
3. Delete Robert by calling deleteField('people.Robert')
4. canSubmit = false, no matter if Martha's input is correct.
5. The form is stuck in an invalid state

Expected behavior

I expected subfields to also be deleted when deleting the parent field, but instead got stuck in a locked state.

Example use case: useForm for labeled columns, with options to add or remove columns. I experienced the invalid state when adding an empty column (which is invalid), then deleting it again.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

• Windows 11
• Firefox v135.0.1

TanStack Form adapter

None

TanStack Form version

v0.44.0

TypeScript version

v5.5.3

Additional context

For users experiencing the same issue, here's a hacky solution to get by until this is fixed:

Note that this solution was specifically made for ^0.42.0, as that is the version our repository uses.
The stackblitz is on v0.44.0, so this issue is not yet resolved on the latest version at this issue's creation.

/**
 * Deletes a tanstack form field and all subfields belonging to that field.
 * Note that this is an external function, and should not be used over internal ones.
 * - For leaf fields, use `form.deleteField()` instead.
 * - For arrays, use `form.removeFieldValue()` instead.
 * @param form The form instance to remove values from.
 * @param key The key to remove. Removes all subfields as well.
 * @example `editors.${key}` // also matches `editors.${key}.visibility`
 */
export function deleteFormFieldAndChildren<TParentData>(form: ReactFormExtendedApi<TParentData, any>, key: string) {
  const deleteKeys = Object.keys(form.fieldInfo).filter(s => s.startsWith(key));

  for (const k of deleteKeys) {
    form.deleteField(k as DeepKeys<TParentData>);
  }
  // there's some shenanigangs behind the scenes affecting `form.state.values`. Delete the main key again
  // to ensure there's no explicitly set undefined keys.
  form.deleteField(key as DeepKeys<TParentData>);
}

[LeCarbonator]

This bug appears to be related to field meta not properly updating when values are deleted.

Here's a test you can add to form-core's FieldApi.spec.ts:

  it('should remove the meta from deleted fields', async () => {
    const form = new FormApi({
      defaultValues: {
        names: [
          {
            firstName: 'John',
            lastName: '',
          },
          {
            firstName: 'Martha',
            lastName: 'Mustermann',
          },
        ],
      },
    })

    const field = new FieldApi({
      form,
      name: `names[${0}].lastName`,
      validators: {
        onMount: ({ value }) =>
          value.length > 0 ? undefined : 'Last name is required',
        onChange: ({ value }) =>
          value.length > 0 ? undefined : 'Last name is required',
      },
    })

    form.mount()
    field.mount()

    expect(form.state.canSubmit).toBe(false)

    await form.removeFieldValue('names', 0)

    expect(form.getFieldValue('names')).toEqual([
      {
        firstName: 'Martha',
        lastName: 'Mustermann',
      },
    ])

    expect(field.getMeta().errors).toStrictEqual([])
    expect(form.state.canSubmit).toBe(true)
  })

[LeCarbonator]

This is its current result as of v0.45.2

[aa-ndrej]

@crutchcorn I am facing this issue in the current version of @tanstack/vue-form.

dependencies:
@tanstack/vue-form 1.23.6
└── @tanstack/form-core 1.24.2

In the original describtion @LeCarbonator mentions the deleteField function. However, in the later test cases he uses the removeFieldValue function and the PR also does not address the deleteField function.
The original reproduction still produces the same behaviour when updating the @tanstack/react-form dependency to the current version 1.23.6.

I am facing this issue currently in @tanstack/react-form.
I have several subfields of a form foo.bar1, foo.bar2, ...
When the foo part of the form is hidden (conditionally) I call deleteField('foo') to remove the field and all subfields.
form.state.fieldMetaBase is then correctly updated and the field plus all subfields are removed. However, fieldMetaBase is NOT updated and because of that canSubmit is not updated as well.

Edit: It seems that calling deleteField does not change fieldMeta at all.