getFieldMeta does not return errors of nested field objects via yup schema

[TomasJerrySebo]

Bug report

Current Behavior

After an update of Yup from 0.27.0 -> 0.29.3, yup introduced the following change jquense/yup#539 and this probably caused the following use case:

Given we have a yup schema validation with a nested object with a set of validation, the useFormikContext returns the form errors as a flat object previously set by yup schema.

this flat error structure causes that now the getFieldMeta does not return any nested object, array errors since it expects that the errors are nested.

The following function fails to return the nested error:

https://github.com/formium/formik/blob/83c0299a7e287e16e1b2ee2c5d54328f6f2fc7c3/packages/formik/src/Formik.tsx#L900

because the getIn function only loops for nested errors.

https://github.com/formium/formik/blob/83c0299a7e287e16e1b2ee2c5d54328f6f2fc7c3/packages/formik/src/utils.ts#L77

Expected behavior

getFieldMeta returns the nested field object/array errors defined via yup validation schema.

Reproducible example

Suggested solution(s)

Update getIn function to return also errors via nested keys.

Additional context

Your environment

Software	Version(s)
Formik	2.1.3
React	16.13.1
TypeScript	4.1.2.
Browser	Chrome Version 87.0.4280.88
npm/Yarn	6.13.4
Operating System	macOS Catalina 10.15.4
Yup	0.29.3

[niksumeiko]

We have the same issue after YUP update. With the following YUP schema, errors coming from useFormikContext() are flat for additionalInfo.referenceText input field.

object().shape({
    'additionalInfo.referenceText': object().shape({
        value: string()
            .required(Translation.t('form.validation.referenceTextRequired'))
            .max(30, Translation.t('form.validation.referenceTextTooLong', { length: 30 })),
    }),
});

const { errors } = useFormikContext();

console.log(errors);
// {
//    additionalInfo.referenceText: "Reference text is required"
// }

Before YUP update, it's structure was as follows:

{
    "additionalInfo": {
        "referenceText": "Reference text is required"
    }
}

And we had no problem retrieving individual form field error via getFieldMeta():

const { error } = getFieldMeta('additionalInfo.referenceText');

console.log(error);
// Reference text is required

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[niksumeiko]

Maybe this is because of YUP latest update?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[eranimo]

This is still an issue with yup 0.32.9. Actually, it's still broken for me in 0.27.0. Are you sure this is caused by yup?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[FranciscoMendes10866]

Did anyone have a solution? I'm having the exact same problem in a project 🥲

[ghost]

Yes found same issue here

[4nduril]

Definitely not a Yup issue. I am using validate with my own validation and I also can't access validation errors on Field level via meta.error. Errors for nested fields show up flattened with dotted field names in the form's error object instead of a nested object.