[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: https://github.com/stackworx/formik-mui/blob/1efc87b13e234f78c9f40f4c166dfbe8d8487c03/packages/formik-mui/src/Select.tsx#L49

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.. https://github.com/stackworx/formik-mui/issues/351

they're converted to a string

[ppbevilacqua]

Hi, any news about this issue?