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

[bipindubey-technoark]

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

Thanks

[oliviertassinari]

Please provide a minimal reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[bipindubey-technoark]

@oliviertassinari
Here is the codesandbox eg have a look into it.
https://codesandbox.io/s/material-ui-issue-forked-uzk9l?file=/src/Demo.js

when you search in autocomplete by typing it it will give error inother cases works fine

@oliviertassinari Thanks for help

[oliviertassinari]

@bipindubey-technoark Thanks for providing a reproduction. I have updated to v5: https://codesandbox.io/s/material-ui-issue-forked-s0m4o?file=/src/Demo.js

We now have a proper error message:

[bipindubey-technoark]

I didnt understood the exact issue??
what was the issue and how to solve it

[bipindubey-technoark]

@bipindubey-technoark Thanks for providing a reproduction. I have updated to v5: https://codesandbox.io/s/material-ui-issue-forked-s0m4o?file=/src/Demo.js

We now have a proper error message:

this is giving this error because you have provided ff to the value but i provided an array which should work

[oliviertassinari]

@bipindubey-technoark in your codesandbox, if you upgrade it to v5, too, you will see that the value becomes a string.

[bipindubey-technoark]

@bipindubey-technoark in your codesandbox, if you upgrade it to v5, too, you will see that the value becomes a string.

But in my case value in not string. it is an array.
refre to my codesandbox code ...i have provided an array to value.
but you have provided static string ff .

I am definitely sure that i have not provided a string ..

[bipindubey-technoark]

@oliviertassinari What you have done in v5 and why you put static value ff i dont know..

[bipindubey-technoark]

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

[ImranHaider313]

In my case I was passing string as default value defaultValue={selectedDiagnosis} while using multiple variant. I just changed the selectedDiagnosis as array and all went well.

[oliviertassinari]

@ImranHaider313 Interesting feedback. We could apply the prop-types logic of the value to the defaultValue prop too:

diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
index 0b3f81981c..c7a25a9a4d 100644
--- a/packages/material-ui/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui/src/Autocomplete/Autocomplete.js
@@ -770,7 +770,17 @@ Autocomplete.propTypes /* remove-proptypes */ = {
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
    */
-  defaultValue: PropTypes.any,
+  defaultValue: chainPropTypes(PropTypes.any, (props) => {
+    if (props.multiple && props.defaultValue !== undefined && !Array.isArray(props.defaultValue)) {
+      return new Error(
+        [
+          'Material-UI: The Autocomplete expects the `defaultValue` prop to be an array or undefined.',
+          `However, ${props.defaultValue} was provided.`,
+        ].join('\n'),
+      );
+    }
+    return null;
+  }),
   /**
    * If `true`, the input can't be cleared.
    * @default false

[ImranHaider313]

@oliviertassinari can I work on this (over the weekend) ?

[paultrimor]

I had the same issue and was able to fix by making use useState initialized to an array .i.e useState([])

[jbham]

My error was apparently happening because of missing value prop. I added it as follows and it worked:

value={undefined}

Note: I am using mui-rff ("mui-rff": "^5.0.0")

<Autocomplete
                        multiple
                        value={undefined}
                        disablePortal
                        name="AutoComplete"
                        id="combo-box-demo"
                        options={cats}
                        getOptionLabel={(option) => option.name}
                        // defaultValue={[cats[0]]}
                        renderInput={(params) => (
                          <MuiTextField
                            {...params}
                            label="Credit Category(s)"
                            name="cats"
                            margin="normal"
                            size="small"
                            required
                          />

[cemalokten]

@jbham Setting value={undefined} worked for me, thank you! 🥳

[Shemrock3267]

I'm using react-hook-form with Autocomplete multiple.
Also I had an outer function that just loop over form fields and "clears" them when I press specific button. I have no default form values btw, because fields are dynamic depending on selected Card.
So in order for it to work (the clearing part & not getting that error) I had to do this:

<Controller
        control={control}
        name={name}
        render={({ field }) => (
          <Autocomplete
            {...field}
            multiple
            defaultValue={[]}
            value={field.value ? field.value : []}
            filterSelectedOptions
            getOptionLabel={option => option.label}
            disablePortal
            PaperComponent={AutocompletePaper}
            options={options as Array<Record<string, string>>}
            onChange={(e, val) => {
              field.onChange(val);
              onChange();
            }}
            fullWidth
            renderInput={params => (
              <TextField
                type={type}
                label={label}
                variant="outlined"
                {...params}
                value={params.inputProps.value ?? ''}
              />
            )}
          />
        )}
      />

Clear function

const handleClear = () => {
    removeDynamicParam();
    Object.keys(form.getValues()).forEach(formField => {
      form.setValue(formField, '');
    });
    refetch();
  };

The main attention is on these fields:

defaultValue={[]}
value={field.value ? field.value : []}

This way I'm not getting that error and Autocomplete getting cleared.