How to check isDirty from within a custom submitForm() function?

[msageryd]

I have a submitForm() function which is given to my components via context. I.e. I can explicitly call submitForm from any of my form components.

The submitForm function calls RHF's handleSubmit and also onSubmit if provided as a prop.

I only want to call handleSubmit if the form isDirty, so I check this from within the submitForm function. This value is read from useFormState in the same component as submitForm is declared.

Problem:
isDirty is not always "up to date". My current solution is to wrap the call in a setTimeout(.., 0) to wait a tick. But this is a hacky solution. I'm wondering what the correct solution would be?

[msageryd]

Hmm. My "hack" isn't reliable. I must have missed something essential. Please help me understand.

Here is what I want to achieve:

• TextInput -> submit onBlur
• Checkbox -> submit onChange

The onChange method I'm providing as a prop to Checkbox looks like this:

 export default function CheckBox({ value, onChange, label, ref }) {
   const { submitForm } = useFormApi();  //useFormApi provides a context in which I have packaged submitForm
   const internalOnChange = async (e) => {
     await onChange(e);
     submitForm();
  };

  return (
    <CheckBox checked={value} onChange={internalOnChange} />
  );
}

The same concept is used for TextInput, but onBlur is used instead of onChange.

I'm rendering {isDirty, etc} from useFormState() under my form, so I can see that isDirty changes to true as soon as I click a checkbox.

My submitForm function looks like this:
const { errors, isDirty, isValid, isSubmitted, isSubmitting, touchedFields } = useFormState({
control,
});

const submitForm = async () => {
  if (isDirty) {
    await handleSubmit(internalOnSubmit, internalOnError)();
    reset({}, { keepValues: true });
  } else {
    console.log('nothing to submit');
  }
};

My call to submitForm seems to happen before onChange(e) has had the chance to update isDirty. I'm guessing that I have messed up something. I thought it would siffice to await onChange to give it time to update all internals, given that for example validators can be async. But this doesn't work.

I cannot get a "fresh" isDirty within the submitForm function since hooks cannot be used there. I'm now contemplating to create a special Submit-component so I can get fresh isDirty values from the useFormState hook, but I don't think this should be this complicated.

Where am I going wrong?

---- edit:
For clarity:

• TextInput works fine since onChange has already happened whern onBlur occurs
• Checkboxes works porly. isDirty is not updated when the call to submitForm happens in internalOnChange.

[msageryd]

I now have a working solution, but I'd love to hear if I could have solved this better?

If onChange is called on a Checkbox, I know that the form is dirty. My solution is to take a parameter in my submitForm function to force submitting regardless of the state of isDirty.

  const submitForm = async (forceSubmit) => {
    if (isDirty || forceSubmit) {
      await handleSubmit(internalOnSubmit, internalOnError)();
      reset({}, { keepValues: true });
    } else {
      console.log('nothing to submit');
    }
  };