[v2] Form-level validation runs on old values

[gggdomi]

🐛 Bug report

Current Behavior

Using setValues with a form-level <Formik validate> will call validation function on the previous state.

Expected behavior

Validation should be called on the newly set values. Works as expected with Formik 1.5.8

Reproducible example

Very minimal example : https://codesandbox.io/s/formik-codesandbox-template-zm8tc

Just press "Set Values" button and watch console : Validation called on : "old name" appears instead of expected Validation called on : "John"

Suggested solution(s)

Weirdly, setValues and setFieldValue implementation are very similar (see below), but only the former is broken

formik/src/Formik.tsx

Lines 516 to 521 in d90149e

	const setValues = useEventCallback((values: Values) => {
	dispatch({ type: 'SET_VALUES', payload: values });
	return validateOnChange
	? validateFormWithLowPriority(state.values)
	: Promise.resolve();
	});

formik/src/Formik.tsx

Lines 533 to 546 in d90149e

	const setFieldValue = useEventCallback(
	(field: string, value: any, shouldValidate: boolean = true) => {
	dispatch({
	type: 'SET_FIELD_VALUE',
	payload: {
	field,
	value,
	},
	});
	return validateOnChange && shouldValidate
	? validateFormWithLowPriority(setIn(state.values, field, value))
	: Promise.resolve();
	}
	);

Related problem ?

Calling setFieldValue multiple times has a different behaviour regarding validation since v2.

Minimal example : https://codesandbox.io/s/formik-codesandbox-template-f2huz

Just press "Set Values" button and watch console :

Validation called on : {a: 1, b: 0}
Validation called on : {a: 0, b: 2}

In Formik 1.5.8, the output (which feels better to me) would be :

Validation called on : {a: 1, b: 2}
Validation called on : {a: 1, b: 2}

Your environment

Software	Version(s)
Formik	2.0.3
React	16.11.0
TypeScript	-
Browser	Chrome 78
npm/Yarn	Yarn 1.19.0
Operating System	Mac OS 10.15

[anothertempore]

I think the reason for this problem is that dispatch is an async function, so there is no way to know when the state has been updated.

For the setValue method, I think we can easily pass the values parameter into validateFormWithLowPriority method, but for the setFieldValue method, I have no idea how to deal with it.

Related issues:

• useReducer's dispatch should return a promise which resolves once its action has been delivered facebook/react#15344
• Dancing between state and effects - a real-world use case facebook/react#15240