Skip to content

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

@ryanfroese

Description

@ryanfroese

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions