[v2] Validation runs on old values after setFieldTouched

[benknab]

🐛 Bug report

Current Behavior

Calling setFieldTouched runs validation on old values.

Expected behavior

Validation should be called on new values.

Reproducible example

https://codesandbox.io/s/formik-codesandbox-template-yqrgc

I can get around this issue with replacing

props.setFieldValue("name", "John");
props.setFieldTouched("name", true);

with

props.setFieldValue("name", "John");
// Set `shouldValidate` to `false` to prevent validation
props.setFieldTouched("name", true, false); 
// Call validation with the new values
props.validateField(name);

Additional context

Related problems I could find: #1977, #2025

Your environment

Software	Version(s)
Formik	2.0.6
React	16.12.0
Browser	Google Chrome 78
npm/Yarn	Yarn 1.19.0
Operating System	Fedora 31

[kirjai]

Not sure if the #2116 should have closed this issue or not, but i believe this is still a problem in 2.1.1

Reproducible example
https://codesandbox.io/s/formik-codesandbox-template-yqrgc

Upgrading formik to 2.1.1 in the reproducible example in the OP still shows the same behaviour

[jaredpalmer]

Both setXXX will are called synchronously in your example. setFieldTouched thus doesn’t wait for setFieldValue. Because hooks are annoying af, there is no way for us to provide a promise or callback after the commit AFAIK. Thus my suggestion is then to call setFieldValue first and let it run validation as side effect and then call setFieldTouched but abort validation.

[jaredpalmer]

My point above is that this isn’t a bug, it’s how React works.

[benknab]

Both setXXX will are called synchronously in your example. setFieldTouched thus doesn’t wait for setFieldValue. Because hooks are annoying af, there is no way for us to provide a promise or callback after the commit AFAIK. Thus my suggestion is then to call setFieldValue first and let it run validation as side effect and then call setFieldTouched but abort validation.

Thank you for the explanation!
I'm not sure it falls under the responsibilities of Formik since the behavior is the result of how React works, but maybe it would help people if it's documented in Formik so it's less confusing?

[straiki]

My point above is that this isn’t a bug, it’s how React works.

I understand that, but isn't there way, how to avoid this behavior if setFieldValue internally sets field is touched (maybe optionally)?

Or what is, in this case, the best way how to create custom Formik-hooked components that need to set the value (of course) as well as set they're touched - e.g. I don't want to validateOnChange, so validation runs when touched is set and therefore validation is run on old value.

Thanks for any insights

[arianitu]

I'm running into something similar, but it's with validation? Can someone help since this was working fine in Formik 1.x, but is now validation in Formik 2.x never seems to work correctly when using setFieldValue.

I tried the recommendation of using setFieldValue, then setFieldTouched and then validateField, but the field I am using is still not valid for some reason.

My code looks like so (a custom Field.)

Form.validationSchema = Yup.object().shape({
  size: Yup.string()
    .required('Size is required.'),
});

<Select
      options={options}
      name={field.name}
      value={foundOption}
      onChange={(option) => {        
        form.setFieldValue(field.name, option.value);
        form.setFieldTouched(field.name, true, false);
        form.validateField(field.name);        
        onChange(option.value);
       }}
      onBlur={field.onBlur}

In this case, 'Size is required' is showing up, even though I am setting a new value. The only time it starts to validate correctly is when I click away from the and then it finally validates. But why is it not validating when I select an option?

[arianitu]

If I print out the formik values, they look like so (after selecting an option.). It goes from invalid, valid to invalid again.

values: {name: "asfasf", size: "Small"}
errors: {size: "Size is required."}
isSubmitting: false
isValidating: false
isValid: false
dirty: true

then another render which makes it suddenly valid?:

values: {name: "asfasf", size: "Small"}
errors: {}
touched: {name: true, size: true}
status: undefined
isSubmitting: false
isValidating: false
isValid: true
dirty: true

Then another render which suddenly makes it invalid?

values: {name: "asfasf", size: "Small"}
errors: {size: "Size is required."}
touched: {name: true, size: true}
status: undefined
isSubmitting: false
isValidating: false
isValid: false
dirty: true

[arianitu]

I am unsure how to fix this, but my issue was if I enabled validateOnMount, it is running the Yup schema on initialValues instead of the actual values.

I think I may open another bug report since I think it is unrelated to this.

Looks like this is what I am running into:

#2046

[sebastian-ludwig]

My solution looks like this for form-level validation

const name = 'name';
const value = 'John';
form.setFieldValue(name, value);
form.setFieldTouched(name, true, false);
form.validateForm({ ...form.values, [name]: value });

[pcwa-ahendricks]

So anywhere I'm using Formik 2.x and I use setFieldValue() or setValue() with the form I use the following component to wrap the Formik component's children to correctly validate the form. Is this the best workaround?

import React, {useEffect} from 'react'
import {useFormikContext} from 'formik'

const FormikValidate = ({children}) => {
  const {values, validateForm} = useFormikContext()
  useEffect(() => {
    validateForm()
  }, [values, validateForm])
  return <>{children}</>
}

export default FormikValidate

[marek-sed]

If you have that option you can call setFieldTouched from onBlur handler.
It did fix this issue with react-select