formIsValid stays false despite all fields being valid?

 await form.validateAllFields("blur");
 await form.handleSubmit();

 await form.validateAllFields("blur");
 await form.handleSubmit();

const errors = useStore(form.store, state => state.errors)

useEffect(() => console.log(errors), [errors])

const errors = useStore(form.store, state => state.errors)

useEffect(() => console.log(errors), [errors])

import { useStore, type AnyFieldApi } from "@tanstack/react-form";

export const useFieldError = (field: AnyFieldApi) => {
  const isValid = useStore(field.store, (state) => state.meta.isValid);
  const isBlurred = useStore(field.store, (state) => state.meta.isBlurred);
  const fieldError = useStore(
    field.store,
    (state) => state.meta.errors?.[0]?.message,
  );
  const submissionAttempts = useStore(
    field.form.store,
    (state) => state.submissionAttempts,
  );

  /**
   * Show field errors only after user interaction is complete (blur) or form submission is attempted.
   * This improves UX by avoiding disruptive error messages while users are actively typing,
   * while still providing timely feedback once they've finished interacting with the field.
   */
  return (isBlurred || submissionAttempts > 0) && !isValid
    ? fieldError
    : undefined;
};

import { useStore, type AnyFieldApi } from "@tanstack/react-form";

export const useFieldError = (field: AnyFieldApi) => {
  const isValid = useStore(field.store, (state) => state.meta.isValid);
  const isBlurred = useStore(field.store, (state) => state.meta.isBlurred);
  const fieldError = useStore(
    field.store,
    (state) => state.meta.errors?.[0]?.message,
  );
  const submissionAttempts = useStore(
    field.form.store,
    (state) => state.submissionAttempts,
  );

  /**
   * Show field errors only after user interaction is complete (blur) or form submission is attempted.
   * This improves UX by avoiding disruptive error messages while users are actively typing,
   * while still providing timely feedback once they've finished interacting with the field.
   */
  return (isBlurred || submissionAttempts > 0) && !isValid
    ? fieldError
    : undefined;
};

import { useStore, type AnyFieldApi } from "@tanstack/react-form";

export const useFieldError = (field: AnyFieldApi) => {
  const isValid = useStore(field.store, (state) => state.meta.isValid);
  const isBlurred = useStore(field.store, (state) => state.meta.isBlurred);
  const fieldError = useStore(
    field.store,
    (state) => state.meta.errors?.[0]?.message,
  );
  const submissionAttempts = useStore(
    field.form.store,
    (state) => state.submissionAttempts,
  );

  // Track if field was modified after the last submission attempt
  const isDirtyAfterSubmission = useStore(field.store, (state) => {
    // If no submission attempts yet, this doesn't matter
    if (submissionAttempts === 0) return false;

    // Check if the field has been modified since the last submission
    return state.meta.isDirty;
  });

  /**
   * Show field errors only after user interaction is complete (blur) or form submission is attempted.
   * Hide errors while user is actively fixing the field after a submission attempt.
   * This improves UX by avoiding disruptive error messages while users are actively typing,
   * while still providing timely feedback once they've finished interacting with the field.
   */
  return (isBlurred || (submissionAttempts > 0 && !isDirtyAfterSubmission)) &&
    !isValid
    ? fieldError
    : undefined;
};

import { useStore, type AnyFieldApi } from "@tanstack/react-form";

export const useFieldError = (field: AnyFieldApi) => {
  const isValid = useStore(field.store, (state) => state.meta.isValid);
  const isBlurred = useStore(field.store, (state) => state.meta.isBlurred);
  const fieldError = useStore(
    field.store,
    (state) => state.meta.errors?.[0]?.message,
  );
  const submissionAttempts = useStore(
    field.form.store,
    (state) => state.submissionAttempts,
  );

  // Track if field was modified after the last submission attempt
  const isDirtyAfterSubmission = useStore(field.store, (state) => {
    // If no submission attempts yet, this doesn't matter
    if (submissionAttempts === 0) return false;

    // Check if the field has been modified since the last submission
    return state.meta.isDirty;
  });

  /**
   * Show field errors only after user interaction is complete (blur) or form submission is attempted.
   * Hide errors while user is actively fixing the field after a submission attempt.
   * This improves UX by avoiding disruptive error messages while users are actively typing,
   * while still providing timely feedback once they've finished interacting with the field.
   */
  return (isBlurred || (submissionAttempts > 0 && !isDirtyAfterSubmission)) &&
    !isValid
    ? fieldError
    : undefined;
};

function tryGetErrorMessage(errors: unknown[]): string | undefined {
   return errors.map(err => {
      // error is a message already
      if (typeof err === 'string') return err;
      // error is nullish (technically unintended/impossible, but whatever)
      if (err === undefined || err === null) return null;
      // if error contains a 'message' string property, return that.
      if (typeof err === 'object' && 'message' in err && typeof err.message === 'string') {
         return err.message
      };
      // try stringifying as fallback
      return String(err);
   }).filter(v => typeof v === 'string').at(0);
}
export const useFieldError = (field: AnyFieldApi) => {
   const isValid = useStore(field.store, state => state.meta.isValid);
   const isBlurred = useStore(field.store, state => state.meta.isBlurred);
   const errors = useStore(field.store, state => state.meta.errors);
   const submissionAttempts = useStore(field.form.store, state => state.submissionAttempts);
   
   const forceShowError = useRef(false);
   
   useEffect(() => {
     if (!isBlurred) {
       // blurring a field means the 
       // field has been interacted with again. It assumes that you add the
       // `onChange` field listener as in v3
       forceShowError.current = false;
     }
   }, [isBlurred])

   useEffect(() => {
      // if the user has at least one submission attempt
      // force show errors for that attempt. Will reset per field
      // if it has been changed.
      if (submissionAttempts > 0) {
        forceShowError.current = true;
      }
   }, [submissionAttempts])
   
   if (isBlurred || forceShowError.current) {
      return tryGetErrorMessage(errors);
   }
   return undefined;
}

function tryGetErrorMessage(errors: unknown[]): string | undefined {
   return errors.map(err => {
      // error is a message already
      if (typeof err === 'string') return err;
      // error is nullish (technically unintended/impossible, but whatever)
      if (err === undefined || err === null) return null;
      // if error contains a 'message' string property, return that.
      if (typeof err === 'object' && 'message' in err && typeof err.message === 'string') {
         return err.message
      };
      // try stringifying as fallback
      return String(err);
   }).filter(v => typeof v === 'string').at(0);
}
export const useFieldError = (field: AnyFieldApi) => {
   const isValid = useStore(field.store, state => state.meta.isValid);
   const isBlurred = useStore(field.store, state => state.meta.isBlurred);
   const errors = useStore(field.store, state => state.meta.errors);
   const submissionAttempts = useStore(field.form.store, state => state.submissionAttempts);
   
   const forceShowError = useRef(false);
   
   useEffect(() => {
     if (!isBlurred) {
       // blurring a field means the 
       // field has been interacted with again. It assumes that you add the
       // `onChange` field listener as in v3
       forceShowError.current = false;
     }
   }, [isBlurred])

   useEffect(() => {
      // if the user has at least one submission attempt
      // force show errors for that attempt. Will reset per field
      // if it has been changed.
      if (submissionAttempts > 0) {
        forceShowError.current = true;
      }
   }, [submissionAttempts])
   
   if (isBlurred || forceShowError.current) {
      return tryGetErrorMessage(errors);
   }
   return undefined;
}

function tryGetErrorMessage(errors: unknown[]): string | undefined {
  return errors
    .map((err) => {
      // error is a message already
      if (typeof err === 'string') return err;
      // error is nullish (technically unintended/impossible, but whatever)
      if (err === undefined || err === null) return null;
      // if error contains a 'message' string property, return that.
      if (
        typeof err === 'object' &&
        'message' in err &&
        typeof err.message === 'string'
      ) {
        return err.message;
      }
      // try stringifying as fallback
      return String(err);
    })
    .filter((v) => typeof v === 'string')
    .at(0);
}
export const useFieldError = (field: AnyFieldApi) => {
  const isValid = useStore(field.store, (state) => state.meta.isValid);
  const isBlurred = useStore(field.store, (state) => state.meta.isBlurred);
  const errors = useStore(field.store, (state) => state.meta.errors);
  const submissionAttempts = useStore(
    field.form.store,
    (state) => state.submissionAttempts
  );

  const lastValidAttempt = useRef(submissionAttempts);
  const showSubmitError = lastValidAttempt.current !== submissionAttempts;

  useEffect(() => {
    if (isValid && submissionAttempts > 0) {
      // the user has corrected the field since the last submission
      // requested changes.
      lastValidAttempt.current = submissionAttempts;
    }
    if (isValid && isBlurred) {
      // if the user changed the value so that it became valid,
      // you can remove the blurred state.
      field.setMeta((prev) => ({ ...prev, isBlurred: false }));
    }
  }, [field, isValid, isBlurred, submissionAttempts]);

  if (!isValid && (isBlurred || showSubmitError)) {
    return tryGetErrorMessage(errors);
  }
  return undefined;
};

function tryGetErrorMessage(errors: unknown[]): string | undefined {
  return errors
    .map((err) => {
      // error is a message already
      if (typeof err === 'string') return err;
      // error is nullish (technically unintended/impossible, but whatever)
      if (err === undefined || err === null) return null;
      // if error contains a 'message' string property, return that.
      if (
        typeof err === 'object' &&
        'message' in err &&
        typeof err.message === 'string'
      ) {
        return err.message;
      }
      // try stringifying as fallback
      return String(err);
    })
    .filter((v) => typeof v === 'string')
    .at(0);
}
export const useFieldError = (field: AnyFieldApi) => {
  const isValid = useStore(field.store, (state) => state.meta.isValid);
  const isBlurred = useStore(field.store, (state) => state.meta.isBlurred);
  const errors = useStore(field.store, (state) => state.meta.errors);
  const submissionAttempts = useStore(
    field.form.store,
    (state) => state.submissionAttempts
  );

  const lastValidAttempt = useRef(submissionAttempts);
  const showSubmitError = lastValidAttempt.current !== submissionAttempts;

  useEffect(() => {
    if (isValid && submissionAttempts > 0) {
      // the user has corrected the field since the last submission
      // requested changes.
      lastValidAttempt.current = submissionAttempts;
    }
    if (isValid && isBlurred) {
      // if the user changed the value so that it became valid,
      // you can remove the blurred state.
      field.setMeta((prev) => ({ ...prev, isBlurred: false }));
    }
  }, [field, isValid, isBlurred, submissionAttempts]);

  if (!isValid && (isBlurred || showSubmitError)) {
    return tryGetErrorMessage(errors);
  }
  return undefined;
};

 onChange: ({ fieldApi, formApi }) => {
        if (fieldApi.state.meta.errors.length > 0) {
          fieldApi.setMeta((prev) => ({
            ...prev,
            errorMap: {},
          }));
        }

        if (formApi.state.errorMap.onBlur) {
          formApi.validate("blur");
        }
      },

 onChange: ({ fieldApi, formApi }) => {
        if (fieldApi.state.meta.errors.length > 0) {
          fieldApi.setMeta((prev) => ({
            ...prev,
            errorMap: {},
          }));
        }

        if (formApi.state.errorMap.onBlur) {
          formApi.validate("blur");
        }
      },

 validators: {
      onBlur: schemaName,
      onChange: schemaName
    },

 validators: {
      onBlur: schemaName,
      onChange: schemaName
    },