[Autocomplete] Uncaught TypeError: Cannot read property 'length' of null

[aaronhayes]

TypeError · Uncaught TypeError: Cannot read property 'length' of null

https://github.com/mui-org/material-ui/blob/701e3ad76b788a50ea83aeb8516ed303c2435bd0/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js#L821

If value is null and multiple is true, we run into this error. Should add a check for value being null.

Version: "@material-ui/lab": "^4.0.0-alpha.45"

[eps1lon]

@aaronhayes Please provide a full 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!

[aaronhayes]

Yep will see what I can put together @eps1lon

[ohlr]

@eps1lon This should be a sufficient test case

        <Autocomplete
            options={options}
            getOptionLabel={option => option.label}
            value={null}
            onChange={(event: any, newValue: any) => {
                handleOptionsIdChange(newValue);
            }}
            multiple={true}
            renderInput={params => (
                <TextField {...params} label="test" variant="standard" fullWidth />
            )}
        />

[dfyz011]

I still have problem here in combination with react-form-hooks: https://github.com/mui-org/material-ui/blob/42954448866f204b0cf7e35127d5d0af9c24d6fb/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js#L896

Version: "@material-ui/lab": "^4.0.0-alpha.56"

[oliviertassinari]

@ohlr This is not valid, https://github.com/mui-org/material-ui/issues/20152#issuecomment-600271717 throw types and prop-types warnings. null is not a valid value

[parksj10]

Why is null not a valid value? the standard autcomplete (I.e. no multiple) accepts null values... Shouldn't we be able to set null (I.e. no values) for a multiple autocomplete?

[oliviertassinari]

@parksj10 you can provide an empty array instead.

[frontendDevResearcher]

if you provide an empty array, the autocomplete multiple selection will stop working.

[frontendDevResearcher]

@oliviertassinari

[frontendDevResearcher]

I was trying to use this hack as I was also getting [Autocomplete] TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function error my this line solved the issue value={undefined} but then I started getting this error for that, I tried this value={item.type === "multiSelect" ? [] : undefined} now , no errors but the values are not coming on the autoComplete selection

<Autocomplete
                        multiple={item.type === "multiSelect"}
                        css={`
                          margin-top: 4px;
                        `}
                        value={item.type === "multiSelect" ? [] : undefined}
                        fullWidth
                        options={item.values || []}
                        getOptionLabel={(option) => option.label || ""}
                        renderInput={(params) => (
                          <TextField {...params} variant="standard" />
                        )}
                      />