Formik: Old error shown when setFieldValue and setFieldTouched are executed together

[codeincontext]

After executing the following code, Formik shows an error based on the previous value. The order of the two lines doesn't make a difference.

this.props.setFieldValue('rating', value);
this.props.setFieldTouched('rating', true);

Wrapping setFieldTouched in setImmediate solves the problem so I presume it's some kind of race condition?

[jaredpalmer]

Are you in React Native land? In the browser, React batches update to state in response to a change/blur event. Not sure if this behavior is mimicked in RN.

[codeincontext]

No, this is in the browser. I'm using a custom StarRating component and the
change is triggered by an onClick under the hood. I assume it would work
properly with radio elements and their onChange, then
On Mon, 31 Jul 2017 at 16:31 Jared Palmer [e-mail] wrote:

Are you in React Native land? In the browser, React batches update to
state in response to a change/blur event. Not sure if this behavior is
mimicked in RN.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/jaredpalmer/formik/issues/106#issuecomment-319187517,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFj68pQy6TjkqbJCwbPcDC0FnbVHPZeks5sTjmsgaJpZM4Oo4WN
.

[jontansey]

FYI in case it's helpful setValue and setTouched also present the same issue.

[joshuawootonn]

Why was this closed :/

[rovansteen]

@joshuawootonn because it was fixed in the commit mentioned above.

[joshuawootonn]

@rovansteen thanks for the quick response! I had only scanned the responses, you are right. Thanks!

[delphin92]

I still have this issue:

/* Custom field component */
const [field, meta, {setValue, setTouched}] = useField({name: controlId, ...props});
const change = (year, month) => {
        setValue({year: year, month: month});
        setTouched(true);
    };

/* Validation */
yup.addMethod(yup.mixed, 'monthYearLessThan', function (monthYear, message) {
    return this.test('monthYearLessThan', message, function (value) {
        console.log(value);
        return isMonthYearLess(value, this.parent[monthYear]);
    })
});

I am changing the value from 2016-01 to 2020-02. The validation was called twice, with new and old value:

{year: 2020, month: 2}
{year: 2016, month: 1}

So, field was marked as valid, that is incorrect.

I was forced to WA:

setValue({year: year, month: month});
setFieldTouched(name, true, false);