Nested schema validation seems broken

[jsprzybylski]

Nested validation with validation schema seems broken. It's definetly not an issue with yup as the example I've made works fine: https://repl.it/repls/PiercingSevereInformation

After executing Formik's runValidationSchema method with

values = {
  a: '',
  b: '',
  c: {
    d: '',
    e: ''
}

yup returns errors, as it should:

errors: [
  "a is a required field",
  "c.e is a required field"
]

runValidations resolves, and state is set with combinedErrors having proper values. this.state.errors are then passed to render and it's children get re-rendered, but with no errors for nested fields.

Simplyfied implementation of my form:

import React, { Component } from 'react';
import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';
import Button from '@material-ui/core/Button';
import yupObject from 'yup/lib/object';
import yupString from 'yup/lib/string';
import yupBoolen from 'yup/lib/boolean';

const ExampleForm = () => {
    const initialValues = {
      a: '',
      b: '',
      c: {
        d: '',
        e: '',
    }
    const validationSchema = yupObject().shape({
      a: yupString().min(3).required(),
      b: yupString().min(10),
      c: yupObject().shape({
        d: yupString().min(5),
        e: yupString().required(),
      }),
    });

    return (
      <Formik initialValues={initialValues} validationSchema={validationSchema}>
        {({ isSubmitting }) => (
          <Form autoComplete="off" noValidate>
            <Field name="a" label="field a" component={TextField} />
            <Field name="b" label="field b" component={TextField} />
            <Field name="c.d" label="field c.d" component={TextField} />
            <Field name="c.e" label="field c.e" component={TextField} />
            <Button variant="contained" color="primary" type="submit" disabled={isSubmitting}>ok</Button>
          </Form>
        )}
      </Formik>
    );
  }
}

As you can see I'm using MaterialUI with Formik Material UI.

Snippet from my package.json:

"@material-ui/core": "^3.1.1",
"formik": "^1.3.1",
"formik-material-ui": "0.0.9",
"yup": "^0.26.6"

Another thing is that I've been debugging Formik a little and one thing that I noticed was that Formik's validateYupSchema method did not clear values of nested objects (the for loop is not recursive). Passing

values = {
  a: '',
  b: 'xxx',
  c: { d: 'yyy', e: '' }
}

to validateYupSchema resulted in generating

validateData = {
  a: undefined,
  b: 'xxx',
  c: { d: 'yyy', e: '' }
}

though it didn't seem to have any impact. Maybe it would if nested validation worked properly so it's hard to say. This was mentioned in https://github.com/jaredpalmer/formik/issues/805#issuecomment-415262545

Could someone please provide an example of nested validation?

[jaredpalmer]

I'm not sure I understand the bug. Here's example of nested schema validation.

https://codesandbox.io/s/y7q2v45xqx

[jaredpalmer]

Can you also please fill out the bug report issue template with current / expected behavior? Thanks!

[vtni]

In your example, the error is always empty, even when submitting empty but required values..

[devgopesh]

This is an issue @jaredpalmer

[Pauldic]

I have this same issue the errors objects has all the error messages including the outer fields and fields of the nested object. While every other errors error renders successfully, errors for the nested field does not render to the UI, though generated