[BUG Select] Use HTMLElement.dataset to get option values in Select doesn't work

[ppbevilacqua]

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

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) }} ... />

[cliedeman]

Hi @ppbevilacqua
Can you share a code sandbox with the issue?

[ppbevilacqua]

Hi @cliedeman
that's the link: https://codesandbox.io/s/agitated-rosalind-37142l

I commented onClose prop to simulate the normal case

[schester44]

same for numeric values.. #351

they're converted to a string

[ppbevilacqua]

Hi, any news about this issue?