form validation function runs on on change for onSubmit forms

[ns-vpanfilov]

What you were expecting:

I have an async function that validates that email belongs to an active user. Although mode is set to onSubmit, the function is executed on change for. I expect validation function to only run on change

const emailValidators= async (v) => {
  console.log(v)
  return undefined
}

return (
    <SimpleForm mode='onSubmit' reValidateMode='onSubmit'>
      <TextInput label='Email' source='email' validate={emailValidators} />
    </SimpleForm>
  )

What happened instead:
Validation function runs on key press (console.log is triggered in the example above)

Environment

• React-admin version: 4.9.0
• React version: 18.2.0

[slax57]

Can you please provide a reproduction sandbox?

[ns-vpanfilov]

@slax57 , if you go to "Create Post" and type in any fields, you will notice that counter at the top is refreshing via "validate function

SANDBOX LINK

[ns-vpanfilov]

It is worth noting that field will not be marked as invalid until submit is pressed; however validate function still runs on each field change, increasing load on REST api server. Also note that changing a different field (Teaser) will also trigger validate function on Title

[slax57]

Thanks for the sandbox.
I suspect this is due to the way react-hook-form applies validation internally, but I need more time to confirm this.
I'm marking this as a bug for now.
Thanks for the report.

[ns-vpanfilov]

@slax57 react-hook-form works fine. Here is an example - only runs validate onSubmit (see Validation count)

LINK to hook form

[ns-vpanfilov]

@slax57, I also noticed that that the entire form re-renders on each event in any field (onChange and onBlur). See link below that displays validation function run counts and re-render counts. Notice that react-hook-form does not re-render oChange and onBlur.

updated sandbox link

[slax57]

Thanks @ns-vpanfilov for the additional info and the sandboxes, that allowed me to reproduce.
I managed to figure out what's going on, and traced back the issue down to this PR.

The following lines in useAugmentedForm.ts seem to have some side-effects, one of which being to re-validate the form on each input's change:

https://github.com/marmelab/react-admin/pull/8138/files#diff-db5ac5eb64aa33d90cfb8125c90bab7f6fedc7a6d7735371fe504faba541abd1R80-R106

We'll probably need to revert these changes, as we should not subscribe to all form state values upfront, but rather let each child component that needs specific form state values subscribe to them.

I'll open a PR, and perform checks against the OSS and EE components to ensure this doesn't break anything. Hopefully it won't break third-party components either. If ever it does, it probably means those components do not follow the RHF rules established here: https://react-hook-form.com/api/useform/formstate/#rules

[luongs3]

I still got this bug, at react-admin ^4.5.1.
validate function sill be called with onChange event. Although mode="onSubmit" reValidateMode="onSubmit" .

<Create>
  <SimpleForm mode="onSubmit" reValidateMode="onSubmit" onSubmit={onSubmit}>
            <FormDataConsumer>
              {({ formData }) => (
                <>
                  <TextInput
                    name="name"
                    source="name"
                    label="Name"
                    validate={[required(), maxLength(100), uniqueName]}
                    fullWidth
                    helperText={`${formData.name ? formData.name.length : 0}/100`}
                  />
                  <TextInput
                    name="symbol"
                    source="symbol"
                    label="Symbol"
                    // validate={[required(), maxLength(10), uniqueSymbol]}
                    fullWidth
                    helperText={`${formData.symbol ? formData.symbol.length : 0}/10`}
                  />
                </>
              )}
            </FormDataConsumer>
  </SimpleForm>
</Create>

[slax57]

@luongs3 This issue was fixed with PR #8826, released in v4.9.3.
Can you update react-admin to at least this version and retry?

[luongs3]

@slax57 Great. Updated the latest version and the issue gone