Formik: TypeError: Cannot read property 'type' of undefined with Formik v2

[flora8984461]

Bug report

Current Behavior

I keep getting this error, even I have tried all the solutions from
https://github.com/formium/formik/issues/789
https://stackoverflow.com/questions/61484075/syntax-react-select-with-formik
https://stackoverflow.com/questions/51518930/cannot-read-property-type-of-undefined-while-using-react-select-with-formik

Reproducible example

https://codesandbox.io/s/formik-codesandbox-template-forked-z9y05?file=/TestComponent.js

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.1.5
| React | 17.0.0-rc.3
| react-select | 3.1.1
| TypeScript | JavaScript
| Browser | Chrome & Firefox
| npm/Yarn | npm
| Operating System | Win

Any help is really appreciated!
Thanks!

[johnrom]

{...props.field} overrides your onChange directive, so onChange should go after it. Generally when you have a set of defaults you are applying to a component and might override, you should make it the first "prop".

Secondly, handleChange expects a primitive value. In your case, you wouldn't pass the full option object to your select's value, but the identifier that connects it to your data. For some reason, the React Select implementation you're using expects the full option object for its value, so you'll have to use setFieldValue manually.

I've also taken the liberty of moving your SelectField definition out of your TestComponent definition so it is a stable reference.

https://codesandbox.io/s/formik-codesandbox-template-forked-9wtvb?file=/TestComponent.js:804-817

I actually think handleChange should accept any value type. Instead of testing for string, it should test for instanceof Event or SyntheticEvent or something. That issue is here: https://github.com/formium/formik/issues/1973

[flora8984461]

Thank you so much for your help! It's working!

{...props.field} overrides your onChange directive, so onChange should go after it. Generally when you have a set of defaults you are applying to a component and might override, you should make it the first "prop".

Secondly, handleChange expects a primitive value. In your case, you wouldn't pass the full option object to your select's value, but the identifier that connects it to your data. For some reason, the React Select implementation you're using expects the full option object for its value, so you'll have to use setFieldValue manually.

I've also taken the liberty of moving your SelectField definition out of your TestComponent definition so it is a stable reference.

https://codesandbox.io/s/formik-codesandbox-template-forked-9wtvb?file=/TestComponent.js:804-817

I actually think handleChange should accept any value type. Instead of testing for string, it should test for instanceof Event or SyntheticEvent or something. That issue is here: #1973