jquense / yup

Dead simple Object schema validation
MIT License
22.72k stars 925 forks source link

Then and Otherwise do not seem to update Errors #2222

Closed Cbridger-mywellabee closed 2 months ago

Cbridger-mywellabee commented 2 months ago

Describe the bug

EDIT: I realise this might be a yupResovler issue for react-hook-form but I have created a snack showing the issue: https://snack.expo.dev/@cdbridger-mywellabee/yupresolvererror

I have a yup object like so:

const passwordValidation = (schema) =>
    schema
        .min(10, 'Password must be at least 10 characters')
        .matches(
            /(?=.*[A-Z])/,
            'Password must have at least one uppercase letter',
        )
        .matches(
            /(?=.*[a-z])/,
            'Password must have at least one lowercase letter',
        )
        .matches(/(?=.*[0-9])/, 'Password must have at least one number')
        .matches(
            /(?=.*[!@#$%^&*])/,
            'Password must have at least one special character',
        );

const schema = yup.object({
    firstName: yup.string().required('First name is required'),
    lastName: yup.string().required('Last name is required'),
    email: yup.string().email('Invalid email').required(),
    currentPassword: yup
        .string()
        .when(['newPassword', 'email', '$originalEmail'], {
            is: (newPassword, email, originalEmail) => {
                console.log(newPassword, email, originalEmail);
                return !!newPassword || email !== originalEmail;
            },
            then: (schema) => {
                console.log('running then');
                return schema.required('Current password is required');
            },
            otherwise: (schema) => {
                console.log('running otherwise: ');
                return schema.notRequired();
            },
        }),
    newPassword: passwordValidation(yup.string().notRequired()),
    newPasswordCopy: yup.string().when('newPassword', {
        is: (newPassword) => !!newPassword,
        then: (schema) =>
            schema
                .required('New password confirmation is required')
                .oneOf([yup.ref('newPassword')], 'Passwords must match'),
        otherwise: (schema) => schema.notRequired(),
    }),
});

When I provide values to the new password field, the errors aren't updated for the empty current password field (nor are they updated when I change the email) even though I can see the correct then/otherwise get run in the console logs:

 LOG  ss Test@gmail.com test@gmail.com
 LOG  running then
 LOG  {
  "newPassword": {
    "message": "Password must be at least 10 characters",
    "type": "min",
    "types": {
      "min": "Password must be at least 10 characters",
      "matches": [
        "Password must have at least one uppercase letter",
        "Password must have at least one number",
        "Password must have at least one special character"
      ]
    },
    "ref": {
      "name": "newPassword"
    }
  }
}
image

Expected behavior As soon as I start either changing the email or putting in a new password, I would start getting errors for current password (as it is required when there is either a change in email or a new password being set)

Platform (please complete the following information):

Cbridger-mywellabee commented 2 months ago

Yeah the issue is with react-hook-form