form component renders twice + isValid turns true only on blur

Hi everyone,

I have the following component using Formik … i have two problems i am struggling to fix for half a day now 😦

1. The console.log u see there renders twice per change … so if i input 1 character my component renders twice
2. The form has only one input with basic validation … for some reason … while i type the email the form does become valid until the input looses focus

Can anyone give me any kind of feedback on what i am doing wrong?

thanks

const RecoverPasswordForm = ({ updateCaptchaHandle, processSubmit, history, values, errors, touched, isSubmitting, isValid, status, resetForm, setErrors }) => {
    console.log('render forgot password form');
    return (<div className="m-login__forget-password animated flipInX">
        <div className="m-login__head" style={{ marginBottom: '30px' }}>
            <h3 className="m-login__title">Forgotten Password ?</h3>
            <div className="m-login__desc">Enter your email to reset your password:</div>
        </div>
        <Form className={ "m-form m-form--fit m-form--label-align-right" + (errors.forgotPassword || (status && status.success) ? " m-t-20" : "") }>
            <ReCaptcha reference={updateCaptchaHandle} onChange={(captcha) => processSubmit(captcha, resetForm, setErrors)} />
            {status && status.success && <div className="m-alert m-alert--outline alert alert-success alert-dismissible" role="alert">
                <span>Please check you inbox! If we find any record of your email we will send there instructions for recover you password!</span>
            </div>}
            {errors.forgotPassword && <div className="m-alert m-alert--outline alert alert-danger alert-dismissible" role="alert">
                <span>We tried but something went wrong</span>
            </div>}
            <div className={"form-group m-form__group p-b-0" + (touched.email && errors.email ? " has-danger": "")}>
                <label htmlFor="email">Your Email</label>
                <Field className="form-control m-input m-input--air" type="text" id="email" name="email" autoComplete="off" placeholder="[e-mail]" />
                <div id="email-error" className="form-control-feedback">{ touched.email && errors.email ? errors.email : '\u00A0' }</div>
            </div>
            <div className="row m-form__actions">
                <div className="col m--align-left">
                    {isSubmitting?"true":"false"} / {isValid?"true":"false"}
                    <button disabled={isSubmitting || !isValid} id="m_login_forget_password_submit" className={"btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air" + (isSubmitting ? " m-loader m-loader--light m-loader--left" : "")}>Request</button>
                </div>
                <div className="col m--align-right">
                    <button onClick={ () => !isSubmitting && history.push("/auth") } type="button" id="m_login_forget_password_cancel" className="btn btn-outline-focus m-btn m-btn--pill m-btn--custom">Cancel</button>
                </div>
            </div>
        </Form>
    </div>);
}


const RecoverPasswordFormHOC = compose(
    withRouter,
    graphql(ForgotPasswordMutation, {
        name: 'forgotPasswordMutation'
    }),
    withState('captchaHandle', 'setCaptchaHandle', null),
    withState('formValues', 'setFormValues', null),
    withHandlers({
        updateCaptchaHandle: ({ setCaptchaHandle }) => (handle) => setCaptchaHandle(handle),
        processSubmit: ({ formValues, forgotPasswordMutation, history }) => async (captcha, resetForm, setErrors) => {
            const { data: { forgotPassword: { status }} } = await forgotPasswordMutation({
                variables: {
                    email: formValues.email
                }
            });
            resetForm();
            if (status) {
                history.push({
                    pathname: '/auth',
                    state: { recoverEmailSent: true }
                });
            } else {
                setErrors({ forgotPassword: true });
            }
        }
    }),
    withFormik({
        mapPropsToValues({ email }) {
            return {
                email: email || ''
            }
        },
        validationSchema: Yup.object().shape({
            email: Yup.string().email(`That's not really an email`).required(`FYI we need your email to sign you in`).max(100, '100 characters we think are enough for your email'),
        }),
        validateOnChange: true,
        handleSubmit: (values, { props: { setFormValues, captchaHandle } }) => {
            setFormValues(values);
            captchaHandle.execute();
        }
    }),
    onlyUpdateForKeys(['isSubmitting', 'isValid', 'errors', 'touched', 'status', 'values']),
    pure
);

[jaredpalmer]

When we initially went with Yup, async was the only option. It was pretty annoying tbh to design around. I think it’d be worth moving to sync Yup because I would take a guess that 95% of Yup schema’s only use sync features anyways.

[jaredpalmer]

Edit: it would break lots of forms.