Errors using dynamic fields and field arrays in solid-form - reading properties of undefined

[edivados]

Describe the bug

My goal is to show / hide form fields dynamically based on the selected value of a select input. Unfortunately the form errors on submission after changing selection or adding a value to a field array. The same setup seems to work fine in react.

Your minimal, reproducible example

https://stackblitz.com/edit/solidjs-templates-vgzdkdzx?file=app%2FApp.tsx

Steps to reproduce

Issue 1: Cannot read properties of undefined (reading 'onChange')

1. On the field labeld Type select Stage 2
2. Submit the form (will trigger error boundary)
3. Open browser dev tools and go to console

The following error should be present:

FieldApi.ts:1353 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'onChange')
    at validateFieldFn (FieldApi.ts:1353:30)
    at FieldApi.ts:1370:9
    at batch (scheduler.ts:143:8)
    at FieldApi.validateSync (FieldApi.ts:1325:5)
    at FieldApi.validate (FieldApi.ts:1569:33)
    at FormApi.ts:1149:29
    at async Promise.all (solidjstemplatesgyky…ontainer.io/index 3)
    at async FormApi.validateAllFields (FormApi.ts:1161:30)
    at async FormApi.handleSubmit (FormApi.ts:1572:11)

Issue 2: Cannot read properties of undefined (reading 'length')

1. Press the Add Item button to add an empty entry to the items array
2. Submit the form (will trigger error boundary)
3. Open browser dev tools and go to console

The following error should be present:

TypeError: Cannot read properties of undefined (reading 'length')
    at App.tsx:167:48
    at Object.fn (chunk-KUGUZH4E.js?v=798142b7:677:60)
    at runComputation (chunk-6YKRBNQN.js?v=798142b7:769:22)
    at updateComputation (chunk-6YKRBNQN.js?v=798142b7:748:3)
    at runTop (chunk-6YKRBNQN.js?v=798142b7:863:7)
    at runUserEffects (chunk-6YKRBNQN.js?v=798142b7:960:18)
    at chunk-6YKRBNQN.js?v=798142b7:932:34
    at runUpdates (chunk-6YKRBNQN.js?v=798142b7:880:17)
    at completeUpdates (chunk-6YKRBNQN.js?v=798142b7:932:17)
    at runUpdates (chunk-6YKRBNQN.js?v=798142b7:881:5)

The error is caused reading errors.length on a field array subfield (L166-169).

{field().state.meta.isTouched && field().state.meta.errors.length ? 'Some errors' : null}

Expected behavior

Expecting not to throw any errors and work like the react version.
https://stackblitz.com/edit/vitejs-vite-vw2h5p9s?file=src%2FApp.tsx

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• Platform: Stackblitz
• Browser: Chrome
• Version: 133.0.6943.127

TanStack Form adapter

solid-form

TanStack Form version

v0.45.1

TypeScript version

No response

Additional context

Noticed the following regarding the first issue with reading onChange.

When changing the field Type to Stage 2 the form is reset by calling form.reset() in listeners and at that point the field Ref is not present in formApi's fieldMeta.

Found two ways to get around this problem:

<form.Field
  name="type"
  listeners={{
    onChange: ({ value }) => {
      Promise.resolve().then(() => {
        form.reset(form.state.values);
      });
    },
  }}
>

or

<form.Field
  name="type"
  listeners={{
    onChange: ({ value }) => {
      form.validate("change");
      form.reset(form.state.values);
    },
  }}
>

[LeCarbonator]

Interesting fix with the promise. Does this also fix the issue?

<form.Field
  name="type"
  listeners={{
    onChange: ({ value }) => {
      setTimeout(() => form.reset(form.state.values), 0);
    },
  }}
>

[edivados]

Yes, looks like this works too.