Custom Field Meta does not updated until input touched after 1.26.0

[ws-rush]

Describe the bug

I am using custom field meta's heavily, for example style={{ display: field.state.meta?.hidden ? 'none' : 'block' }}, for every field I have set of these meta's like dataSource, hidden, disabled, and others...

in example there is two field firstName and color, I have listener.onMount that hide firstName (through field.setMeta()) if color is "red", in v1.26.0 and before it works well, after this version it does not hide until I touch the field firstName

example use v1.26.0, change package version to see the problem

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-kqn6fekp?file=package.json,src%2Fsimple-form.tsx,src%2FApp.tsx&terminal=dev

Steps to reproduce

1. notice in example field firstName is hidden by default (it is hidden in onMount)
2. change the color to "green" field firstName will appear
3. upgrade tanstack-form version to newer version
4. after refresh you will notice firstName now is not hidden
5. touch the field firstName now it will hide

Expected behavior

compare by previous steps I exp expect:

1. notice in example field firstName is hidden by default (it is hidden in onMount)
2. change the color to "green" field firstName will appear
3. upgrade tanstack-form version to newer version
4. field firstName should still hidden by default

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: [linux, windows]
• Browsers: [chrome, vivaldi]

TanStack Form adapter

react-form

TanStack Form version

1.27.7

TypeScript version

5.9.3

Additional context

No response

[LeCarbonator]

This seems incredibly hacky. I assume you are running into a ton of type issues with injected meta properties?

[ws-rush]

This seems incredibly hacky. I assume you are running into a ton of type issues with injected meta properties?

Actually yes, but meta customisation is my first feature in tanstack-form

[matthewbbrandt]

Not sure how much rewriting you would have to do or if there are other edge cases that this doesn't handle (since I know you only attached a simple example), but one solution might be wrapping fields in a <form.Subscribe /> instead of relying on accessing and setting the meta in different listeners.

<form.Subscribe selector={(state) => state.values.color === 'red'}>
  {(isColorRed) => (
    <form.Field name="firstName">
      {(field) => (
        <div style={{ display: isColorRed ? 'none' : 'block' }}>
          <label htmlFor={field.name}>First Name:</label>
          <input
            id={field.name}
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
        </div>
      )}
    </form.Field>
  )}
</form.Subscribe>

[ws-rush]

Not sure how much rewriting you would have to do or if there are other edge cases that this doesn't handle (since I know you only attached a simple example), but one solution might be wrapping fields in a <form.Subscribe /> instead of relying on accessing and setting the meta in different listeners.

<form.Subscribe selector={(state) => state.values.color === 'red'}>
{(isColorRed) => (
<form.Field name="firstName">
{(field) => (
<div style={{ display: isColorRed ? 'none' : 'block' }}>
First Name:
<input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>

)}
</form.Field>
)}
</form.Subscribe>

one reason for using custom meta's instead od Subscriber, in many cases I don't attach values directly, I need make many conditions and checks, some of them from config and some checks depend on values in other fields, write those condations in Subscribe make code bad, so I am depending on use listeners on form level or field level make code more readable, split logic from UI entirely

[ws-rush]

this PR #1981 fix it, I will see if we can extend types of meta