Autocomplete crashes when using `multiple`

[jgabriele]

Describe the bug Copy/pasting the Autocomplete example from the docs, I get the following error:

value.forEach is not a function

To Reproduce CodeSandbox link

Expected behavior It should be working as explained in the MUI Autocomplete doc

Desktop (please complete the following information):

• OS: MacOS 10.13.6
• Browser: Chrome v83.0.4103.61

Additional context Dependencies:

[radicand]

You can work around this by passing in initialValues to the Form component. Agreed it seems like a bug to me though that it doesn't handle the case of no initialValues.

E.g.,: initialValues={{planets: []}}

[lookfirst]

@radicand Hmm... I think I fixed this for another component already. =) But yes...

Also, really sorry I've kind of dropped my involvement... I've been overwhelmed recently with work. I will come back and work on things again soon, I promise! =)

[LavaToaster]

To add to this, if the options aren't loaded yet, then it also crashes because the defaultValue is only switched to an array when iterating through the options.

[lookfirst]

Can you try with the latest version please?

[redimongo]

Having the same issue.

import React from 'react';

import { Form } from 'react-final-form'
import { Checkbox as MuiCheckbox } from '@material-ui/core';
import { Autocomplete } from 'mui-rff';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles((theme) => ({
  root: {
    width: 500,
    '& > * + *': {
      marginTop: theme.spacing(3),
    },
  },
}));

export default function Tags() {
  const classes = useStyles();

  return (
    <Form
    //initialValues={values}
    validate={this.validate}
    onSubmit={this.handleSubmit}
  >
    <div className={classes.root}>
     <Autocomplete
        label="Pick at least one planet"
        name="planet"
        required={true}
        options={top100Films}
        initialValues={{top100Films: []}}
        getOptionValue={option => option.value}
        getOptionLabel={option => option.label}
        disableCloseOnSelect={true}
        renderOption={(option, { selected }) => (
            <>
            <MuiCheckbox style={{ marginRight: 8 }} checked={selected} />
            {option.label}
            </>
        )}
        multiple
        />

    </div>
    </Form>
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
  { title: 'Forrest Gump', year: 1994 },
  { title: 'Inception', year: 2010 },
  { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
  { title: 'Goodfellas', year: 1990 },
  { title: 'The Matrix', year: 1999 },
  { title: 'Seven Samurai', year: 1954 },
  { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
  { title: 'City of God', year: 2002 },
  { title: 'Se7en', year: 1995 },
  { title: 'The Silence of the Lambs', year: 1991 },
  { title: "It's a Wonderful Life", year: 1946 },
  { title: 'Life Is Beautiful', year: 1997 },
  { title: 'The Usual Suspects', year: 1995 },
  { title: 'Léon: The Professional', year: 1994 },
  { title: 'Spirited Away', year: 2001 },
  { title: 'Saving Private Ryan', year: 1998 },
  { title: 'Once Upon a Time in the West', year: 1968 },
  { title: 'American History X', year: 1998 },
  { title: 'Interstellar', year: 2014 },
  { title: 'Casablanca', year: 1942 },
  { title: 'City Lights', year: 1931 },
  { title: 'Psycho', year: 1960 },
  { title: 'The Green Mile', year: 1999 },
  { title: 'The Intouchables', year: 2011 },
  { title: 'Modern Times', year: 1936 },
  { title: 'Raiders of the Lost Ark', year: 1981 },
  { title: 'Rear Window', year: 1954 },
  { title: 'The Pianist', year: 2002 },
  { title: 'The Departed', year: 2006 },
  { title: 'Terminator 2: Judgment Day', year: 1991 },
  { title: 'Back to the Future', year: 1985 },
  { title: 'Whiplash', year: 2014 },
  { title: 'Gladiator', year: 2000 },
  { title: 'Memento', year: 2000 },
  { title: 'The Prestige', year: 2006 },
  { title: 'The Lion King', year: 1994 },
  { title: 'Apocalypse Now', year: 1979 },
  { title: 'Alien', year: 1979 },
  { title: 'Sunset Boulevard', year: 1950 },
  { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
  { title: 'The Great Dictator', year: 1940 },
  { title: 'Cinema Paradiso', year: 1988 },
  { title: 'The Lives of Others', year: 2006 },
  { title: 'Grave of the Fireflies', year: 1988 },
  { title: 'Paths of Glory', year: 1957 },
  { title: 'Django Unchained', year: 2012 },
  { title: 'The Shining', year: 1980 },
  { title: 'WALL·E', year: 2008 },
  { title: 'American Beauty', year: 1999 },
  { title: 'The Dark Knight Rises', year: 2012 },
  { title: 'Princess Mononoke', year: 1997 },
  { title: 'Aliens', year: 1986 },
  { title: 'Oldboy', year: 2003 },
  { title: 'Once Upon a Time in America', year: 1984 },
  { title: 'Witness for the Prosecution', year: 1957 },
  { title: 'Das Boot', year: 1981 },
  { title: 'Citizen Kane', year: 1941 },
  { title: 'North by Northwest', year: 1959 },
  { title: 'Vertigo', year: 1958 },
  { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
  { title: 'Reservoir Dogs', year: 1992 },
  { title: 'Braveheart', year: 1995 },
  { title: 'M', year: 1931 },
  { title: 'Requiem for a Dream', year: 2000 },
  { title: 'Amélie', year: 2001 },
  { title: 'A Clockwork Orange', year: 1971 },
  { title: 'Like Stars on Earth', year: 2007 },
  { title: 'Taxi Driver', year: 1976 },
  { title: 'Lawrence of Arabia', year: 1962 },
  { title: 'Double Indemnity', year: 1944 },
  { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
  { title: 'Amadeus', year: 1984 },
  { title: 'To Kill a Mockingbird', year: 1962 },
  { title: 'Toy Story 3', year: 2010 },
  { title: 'Logan', year: 2017 },
  { title: 'Full Metal Jacket', year: 1987 },
  { title: 'Dangal', year: 2016 },
  { title: 'The Sting', year: 1973 },
  { title: '2001: A Space Odyssey', year: 1968 },
  { title: "Singin' in the Rain", year: 1952 },
  { title: 'Toy Story', year: 1995 },
  { title: 'Bicycle Thieves', year: 1948 },
  { title: 'The Kid', year: 1921 },
  { title: 'Inglourious Basterds', year: 2009 },
  { title: 'Snatch', year: 2000 },
  { title: '3 Idiots', year: 2009 },
  { title: 'Monty Python and the Holy Grail', year: 1975 },
];

[gtavantzopoulos]

I'm experiencing, some kind of the same issue,

The issue occurs when trying to type or open the menu.

(intermediate value)(intermediate value)(intermediate value).filter is not a function
TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function
    at useAutocomplete (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:68380:55)
    at Autocomplete (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:61447:91)
    at renderWithHooks (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:288519:18)
    at updateForwardRef (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:290532:20)
    at beginWork (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:292361:16)
    at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:273904:14)
    at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:273953:16)
    at invokeGuardedCallback (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:274008:31)
    at beginWork$1 (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:296919:7)
    at performUnitOfWork (http://localhost:6006/vendors~main.f0f6fd7b84a685f68b20.bundle.js:295870:12)

In the above screenshot, becomes obvious that it would be nice a type-guard to check whether the value is an array or not when the Autocomplete allows multiple values. The real case here is that the Mui-Rff doesn't pass the correct default value. It should be an empty array rather than an empty string.

[lookfirst]

Hey! Thanks for the report. I'd love to see a code sandbox that reproduces this. One thing to note is that the crash you're seeing is a result of non-production code getting executed... I'm wondering if maybe you're just supplying the data in a way that the component doesn't understand?

[jgabriele]

Can you try with the latest version please?

Just to answer your question, yes with the latest version the problem is gone.

But I also had the same issue as @gtavantzopoulos which I fixed with an initialValues props passed to the form (with [] as default value for my autocomplete). I've tried to update my above sandbox to match the use case but could not reproduce 😞...

[lookfirst]

@jgabriele Thanks for the update. I just released https://github.com/lookfirst/mui-rff/pull/466 which may have fixed things?

[jgabriele]

@lookfirst unfortunately not. But luckily I could reproduce with this sandbox. Seems to be the case (at least for me) when options are not object but simple strings.

[kybarg]

Seting initial value to be an Array solves the issue. Or try playing around with settign default value to be an Array

[lookfirst]

auto complete has changed so much over the years... and nobody is really talking about this and it seems like there is a workaround, closing unless someone speaks up, we can reopen.