stackworx / formik-mui

Bindings for using Formik with Material-UI
https://stackworx.github.io/formik-mui
MIT License
970 stars 143 forks source link

Following syntax for Autocomplete in docs yields onBlur error, while using the <MuiTextField /> instead "works" #366

Open ryanfroese opened 1 year ago

ryanfroese commented 1 year ago

Hi, this could be a bug but I want to make sure I'm not missing something. Whenever I use this code:

<Field name="name" component={Autocomplete} options={["client", "vendor", "employee", "other"]} getOptionLabel={(option) => option} style={{ width: 300 }} renderInput={(params) => ( <FormikMuiTextField {...params} // We have to manually set the corresponding fields on the input component name="name" error={touched["name"] && !!errors["name"]} helperText={errors["name"]} label="Autocomplete" variant="outlined" /> )} />

  I get this error log:

 "Cannot read properties of undefined (reading 'onBlur')

TypeError: Cannot read properties of undefined (reading 'onBlur') at fieldToTextField (http://localhost:3000/static/js/bundle.js:112758:22) at TextField (http://localhost:3000/static/js/bundle.js:112781:188) at renderWithHooks (http://localhost:3000/static/js/bundle.js:138991:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:142277:17) at beginWork (http://localhost:3000/static/js/bundle.js:143573:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:128583:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:128627:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:128684:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:148558:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:147805:16)"

But if I change the <FormikMuiTextField /> (import { TextField as MuiTextField } from "@mui/material")out for just a vanilla TextField from @mui/material, it "works". But this didn't seem like it was correct according to the documentation.

I also had to use: `const { touched, errors } = useFormikContext();` to give this autocomplete access to touched and errors from the formik context, which I didn't see in the docs. I hope I'm not missing something simple here, but is this expected behavior/syntax?
ryanfroese commented 1 year ago

I'm sorry about the lack of line breaks, I guess I need to learn how to force GitHub to keep my line breaks 🤷‍♂️

justinkahrs commented 5 months ago

did you figure this out @ryanfroese? I'm seeing the same thing following the docs

ryanfroese commented 5 months ago

Sadly I didn't. I I'm not using Formik on any forms that use autocomplete, due to this issue. I'm doing most validation manually. If you ever get it working or find a way around this, let me know!