Hi everyone, we're updating our project from MUI4 to MUI5, react from v17 to v18 and we need also to update formik-material-ui to formik-mui, according to the documentation.
We're using the Select from 'formik-mui' as formik <Field/> value of component prop, and we're passing objects as options value with <MenuItem/>, but we got an error about this line:
|
const dataset = (e.target as any).dataset as DOMStringMap; |
Problem
When we change the selected option, it sets on form '[object Object]' value. That's because when the dropdown menu closes it calls onChange function to check the value but it gets the current value of the option from HTMLElement.dataset. In our case data-value value of each MenuItem had '[object Object]' value.
As a temporary fix, we add a custom onClose that manually sets the field touched:
<Field component={Select} onClose={() => { setFieldTouched(field.name, true, true) }} ... />
Hi everyone, we're updating our project from MUI4 to MUI5, react from v17 to v18 and we need also to update formik-material-ui to formik-mui, according to the documentation.
We're using the Select from 'formik-mui' as formik
<Field/>value of component prop, and we're passing objects as options value with<MenuItem/>, but we got an error about this line:formik-mui/packages/formik-mui/src/Select.tsx
Line 49 in 1efc87b
Problem
When we change the selected option, it sets on form
'[object Object]'value. That's because when the dropdown menu closes it calls onChange function to check the value but it gets the current value of the option from HTMLElement.dataset. In our case data-value value of each MenuItem had'[object Object]'value.As a temporary fix, we add a custom onClose that manually sets the field touched:
<Field component={Select} onClose={() => { setFieldTouched(field.name, true, true) }} ... />