How to use defaultValues properly?

[AnthonyLzq]

I have a form that looks something like:

<ValidatedForm
  validator={validator}
  method='post'
  resetAfterSubmit={true}
  id={FORM_UPDATE_ID}
  className={classes.form}
  defaultValues={{
    code: updateMemberResult.member.code,
    name: updateMemberResult.member.name,
    // ... other values
  }}
  onSubmit={(data, event) => {
    console.log('data, event', data, event)
  }}
>
  <FormInput
    name='name'
    inputClassName={cardClasses.cardFormControl}
    placeholder={`NOMBRES: ${updateMemberResult.member.name}`}
    marginBottom={32}
    marginBottomWithError={8}
  />
  {/* other fields */}
  <button type='submit'>Update</button>
</ValidatedForm>

But whenever I click the button my action is not being called, in fact, nothing is happening, the log I put in the onSubmit function is not working and there is no error message either. For the reference, I'm using Material-UI, but I don't know if that is relevant.

This is only happening when I use the defaultValues prop. Besides, I just verified that the button is triggering his own onClick function.

[airjp73]

Hi! Could you provide a github or codesandbox link with a reproduction? There are a lot of possible causes for the issue and I can't really tell just from the code you've provided here.

[AnthonyLzq]

Here I created a StackBlitz URL, for some reason CodeSandbox doesn't let me import a project from GH.

[AnthonyLzq]

Any suggestions?

[AnthonyLzq]

Hi @airjp73, could please help me?

[airjp73]

Hi! Sorry I missed this.

In your reproduction, the validator has a required field (photo) that isn't present in the form. So the submission is failing because the form is invalid, but the errors doesn't appear because there's no photo field.

[AnthonyLzq]

You saved me! Didn't notice that, thank you so much!