[material-ui][Autocomplete] Typescript errors and warnings

[edx-jagadeesh-kumar]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

https://codesandbox.io/s/nktnvy?file=/Demo.tsx
Code to reproduce

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
interface IFilims {
  label: string;
  year: number;
}
const top100Films: IFilims[] = [
  { label: "The Shawshank Redemption", year: 1994 },
  { label: "The Godfather", year: 1972 },
  { label: "The Godfather: Part II", year: 1974 },
  { label: "The Dark Knight", year: 2008 },
  { label: "12 Angry Men", year: 1957 },

];
export default function ComboBox() {
  const [selectedFilims, setSelectedFilims] = React.useState<IFilims[]>([]);

  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Films}
      value={selectedFilims}
      multiple
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
      onChange={(e, v) => setSelectedFilims(v)}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top

Current behavior 😯

(parameter) v: readonly IFilims[]
Argument of type 'readonly IFilims[]' is not assignable to parameter of type 'SetStateAction<IFilims[]>'.
  The type 'readonly IFilims[]' is 'readonly' and cannot be assigned to the mutable type 'IFilims[]'.ts(2345)

Throwing warnings and erros in Autocomplete

Expected behavior 🤔

Autocomplete should work fine as before

[edx-jagadeesh-kumar]

@brijeshb42 if i use "@mui/material": "5.14.2" it is working fine

[SergioEric]

EDITED!
@brijeshb42
just add a typo in the onChange,

onChange={(_, value) => {
  setState([...value]);
}} 

[kotacode]

Same issue. Latest release broke typing for me. Feel like #38253 should have been held for a major release.

[mnajdova]

Let's revert the pull request. @michaldudak we discussed that we should likely create a copy of the useAutocomplete in Material UI, to allow us to iterate on the one that is currently in Base UI. This is another example of why this may be necessary.

[edx-jagadeesh-kumar]

Let's revert the pull request. @michaldudak we discussed that we should likely create a copy of the useAutocomplete in Material UI, to allow us to iterate on the one that is currently in Base UI. This is another example of why this may be necessary.

Will this be fixed anytime soon or should i pin my "@mui/material": "5.14.2" version ? Bcz this is working fine .

[brijeshb42]

It's working till 5.14.7. So you can pin that for now. We have a PR in place to revert this.

[stamahto]

I have the same issue

[pcorpet]

For your initial code, I would recommend updating the useState to

const [selectedFilims, setSelectedFilims] = React.useState<readonly IFilims[]>([]);

[ZeeshanTamboli]

The reverted PR was released in v5.14.9. Closing this issue.