validation occuring before onSubmit when integrating formik-material-ui for material-ui styling

Question

I want to add material-ui to my formik app. I am using the formik-material-ui library ( https://github.com/stackworx/formik-material-ui ) to do this. However, when i insert the material-ui textfield components into the fields, validation triggers before submitting. My hunch is that it is a mapStateToProps problem, but I am not sure how to integrate that into my code as there isn't much documentation on it.

Any help is much appreciated, thanks!

import React from 'react';
import * as Yup from 'yup';
import { Formik, Field, Form} from 'formik';
import { TextField } from 'formik-material-ui'; 

class Post0 extends React.Component {
  render() {
    return (
      <div>
        <Formik
          initialValues={{
            'email': this.props.initValues.email,
            'animal':  this.props.initValues.animal,
          }}   
          validationSchema={Yup.object().shape({
            email: Yup.string()
              .email('Invalid email address')
              .required('Please enter an email address'),
            animal: Yup.string().required('Required'),
          })} 
          onSubmit={(values) => {
            this.props.nextStep(values);   
          }}
          render={({ values, isSubmitting}) => (  
            <Form>
              <Field
                name="email"
                type="email"
                value={values.email}
                component={TextField}
                variant="outlined"
              />
              <Field
                name="animal"
                value={values.animal}
                component={TextField}
                variant="outlined"
              />

              <button type="submit">Submit</button>
            </Form>
          )}
        />
      </div>
    );
  }
}


export default Post0;  

Answer 1

By default with Formik, validation happens when inputs lose focus (ie after onBlur() is triggered by an input). Is this what you are talking about? You can change this behaviour if you want with with the validateOnBlur setting ( see the Formik documentation ).

See your example with validateOnBlur set to false here .