onChangeListenTo doesn't always trigger

[Studio384]

I'm working on implementing this package and am using form-level validation. However, I do have fields who's validation should run when another field changes. This is what the onChangeListenTo property is for, but it doesn't seem to run correctly when I'm using form-level validation.

const form = useForm({
  defaultValues: holiday,
  validatorAdapter: yupValidator(),
  validators: {
    onChange: yup.object({
      startDay: yup
        .date()
        .typeError("Start date must be a valid date.")
        .label("Start date")
        .min(startOfDay(new Date()), "Start date must be today or later.")
        .required(),
      endDay: yup
        .date()
        .typeError("End date must be a valid date.")
        .label("End date")
        .required()
        .test(
          "is-after-startDay",
          "End date must be the same or later than start date.",
          function (value) {
            return isBefore(this.parent.startDay, value);
          },
        ),
    }),
  },
  onSubmitt: async ({ value }: { value: Holiday }) => {
    Promise.resolve(editHoliday(value, holiday.restaurant))
      .then(() => toastChangesSaved("Holiday has been updated."))
      .catch((e) => toastError(e.message));
  },
});

<form.Field name="startDay" validators={{ onChangeListenTo: ["endDay"] }}>
  {(field) => (
    <TextField
      label="Start date"
      value={
        isDate(field.state.value)
          ? format(field.state.value, "yyyy-MM-dd")
          : field.state.value
      }
      onBlur={field.handleBlur}
      onChange={(e) => field.handleChange(e.target.value)}
      type="date"
      errors={field.state.meta.errors}
    />
  )}
</form.Field>
<form.Field name="endDay">
  {(field) => (
    <TextField
      label="End date"
      value={
        isDate(field.state.value)
          ? format(field.state.value, "yyyy-MM-dd")
          : field.state.value
      }
      onBlur={field.handleBlur}
      onChange={(e) => field.handleChange(e.target.value)}
      type="date"
      errors={field.state.meta.errors}
    />
  )}
</form.Field>

For some reason when changing the "startDate" field to something beyond the date set in "endDate", the validation will run, however, when that start date is changed back to a date before the end date, the error won't go away until end date has been altered.

[Pascalmh]

Can you fork one of the examples (probably this is the best: https://tanstack.com/form/latest/docs/framework/react/examples/yup) and build a reproduction?

[Studio384]

Here is a demo using the same code as above: https://stackblitz.com/edit/tanstack-form-varpm6

To reproduce:

1. Change the end date so the field is marked as touched.
2. Change the start date to be after the end date. The end date field will now be marked as being required to be after start.
3. Change the start date back to a date before end date. The end date field will remain marked as being incorrect.

[Balastrong]

Hey @Studio384 I tried your demo but it seems there's something broken with some Date/string types.

Anyway I see this which should probably be changed

          <form.Field
            name="endDay"
            validators={{
-              onChangeListenTo: ['endDay'],
+              onChangeListenTo: ['startDay'],