Can't get correct value through formik.values.fieldName inside the onChange handler

[anderlaw]

Bug report

export const App = () => {
  const formik = useFormik({
    initialValues: {
      email: 'foobar@example.com'
    },
    onSubmit: (values) => {},
  });
  return <div>
    <input name="email" type="text" value={formik.values.email} onChange={(e)=>{
      formik.handleChange(e);
      console.log('current email:-->',formik.values.email)
    }}/>
  </div>
}

when typing in the input, formik.values.email didn't return the current value of the input box

Current Behavior

Expected behavior

formik.values.email should return the current real value

Reproducible example

code sandbox

open the link and check the console tab

Suggested solution(s)

inside the executeChange function(Formik.ts file line 590), update the value in the ctx at the same time.

  const executeChange = React.useCallback(
    (eventOrTextValue: string | React.ChangeEvent<any>, maybePath?: string) => {
  ...
      if (field) {
        // Set form fields by name
        setFieldValue(field, val);
        // update fileds value in context
        ctx.values[field] = val;
      }
    },
    [setFieldValue, state.values]
  );

Additional context

Your environment

Software	Version(s)
Formik	2.2.9
React	17.0.2
TypeScript
Browser	chrome
npm/Yarn	yarn
Operating System	macos

[johnrom]

This should be fixed in my v3 prototype.

#3231

In my PR you would use formik.getState().values to get the latest state, as the values object associated with the render should be immutable.

[handhikadj]

I'm also experiencing this issue: https://codesandbox.io/s/pedantic-cloud-skr3r at the confirm password validation