vendredi 3 septembre 2021

Returning true in Yup test function is not clearing the previous error message in react-hook-form formState

Repo to duplicate the problem: https://codesandbox.io/s/yup-react-hook-form-material-checkbox-5dqbm

I am working on a form that I created with react-hook-form and yup. I have a checkbox group and I am trying to require at least one checkbox to be selected before submitting. I created a checkbox group with Material UI and handled validation with yup test function.

Here are my default values showing the structure.

 const defaultValues = {
    companyName: "",
    singleCheckbox: false,
    multiCheckbox: { option1: false, option2: false }
  };

And this is my yup validation. Basically, I am checking if one of the options of multiCheckbox is true, return true otherwise return false.

 const yupSchema = yup.object().shape({
    companyName: yup.string().required("Company name is required"),
    singleCheckbox: yup.boolean().test("singleCheckbox", "Required", (val) => {
      console.log(val, "yup singleCheckbox result");
      return val;
    }),
    multiCheckbox: yup
      .object()
      .shape({
        option1: yup.boolean(),
        option2: yup.boolean()
      })
      .test(
        "multiCheckbox",
        "At least one of the checkbox is required",
        (options) => {
          console.log(
            options.option1 || options.option2,
            "yup multiCheckbox result"
          );
          return options.option1 || options.option2;
        }
      )
  });

Problem: When I hit 'Submit' button without filling out any field, I see all the error messages that I should. And error messages are disappearing when I start filling the input form and clicking on the single checkbox but error message for multiCheckbox is not going away.

First I thought something is wrong with the test function, that's why I implemented the same logic to singleCheckbox as well. singleCheckbox is working as expected but multiCheckbox is not, even though test function of yup returns true.

What I have tried: I tried to change revalidation value of useForm to onBlur and onChange but it didn't work out for me.

Observation: Clicking on Submit button brings all the error messages. After selecting one of the options of multiCheckbox and hitting submit button again clears error message of multiCheckbox. So I am assuming there is a disconnection between yup validation and react-hook-form validation. But why same disconnection is not happening for single singleCheckbox?




Aucun commentaire:

Enregistrer un commentaire