[Autocomplete] TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function

I am integrating autocomplete component in my website

it is crashing when we type anything in the autocomplete field

it is giving following error

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function in autocomplete

My code:

<Autocomplete
            multiple
            id="checkboxes-tags-demo"
            options={users}
            disableCloseOnSelect
            size="small"
            value={values.userIds}
            getOptionSelected={(option, value) => option.id == value.id}
            getOptionLabel={(option) => option.firstName + ' ' + option.lastName}
            renderOption={(option, { selected }) => (
              <React.Fragment>
                <Checkbox
                  icon={icon}
                  checkedIcon={checkedIcon}
                  style={{ marginRight: 8 }}
                  checked={selected}
                  // onChange={(e) => console.log('called12', e.target.value)}
                />
                {option.firstName + ' ' + option.lastName}
              </React.Fragment>
            )}
            style={{ width: '100%%' }}
            renderInput={(params) => (
              <Field {...params} label="All Users" fullWidth name="userIds" component={TextField} />
            )}
            onChange={(event, val) => {
              if (val !== null) {
                const items = [];
                val.map((v) => items.push(v));
                setFieldValue('userIds', items);
              }
            }}
          />

my values:

values.userIds = [1,2];
users = [
{id:1,firstName:’A’, lastName:’B’},
{id:2,firstName:’P’, lastName:’Q’},
{id:3,firstName:’X’, lastName:’Y’},];

it is working fine on every other case like clicking on dropdown icon and then choosing the option or removing it by clicking on close icon

but crashing when we start to type anything in the field
Capture222

Thanks

1 possible answer(s) on “[Autocomplete] TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function

  1. I fixed the issue
    actually formik textfield was assigning a value string to the variable.
    I am now using material ui textfield and it is working fine
    For people who might get this issue in future

    in renderInput function of autocomplete just change

        <Field
                     {...params}
                     label="All Users"
                     fullWidth
                     name="userIds"
                    component={TextField}
                   />

    to

    <MuiTextField {...params} label="All Users" fullWidth />

    Note: MuiTextfield is material ui textfield and Textfield is formik Textfield

    import {
      TextField as MuiTextField,
    } from '@material-ui/core';
    
    import { TextField } from 'formik-material-ui';

    Thanks