[Autocomplete] Fix inferred value type when multiple prop is true

[fenghan34]

Fixes: #35099

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35275--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 8b92c94

[ZeeshanTamboli]

Thanks. Please add a TypeScript test case in Autocomplete.spec.tsx.

[fenghan34]

Added, please let me know if need any changes.

[ZeeshanTamboli]

It's a great first pull request on Material UI 👌 Thank you for working on it!

[LeoniakM]

I have to set multiple explicitly to false otherwise I get TS2322: Type 'string' is not assignable to type 'string[]'.

Am I doing something wrong?

Should i create a Issue for that?

[hortizgarrido]

I see that too. I get Type string is not assignable to string[]. For some reason i have to now include the type in my autocomplete as follows so that it works:

<Autocomple ....

[fenghan34]

Hi @LeoniakM, would you mind providing the code example so I can debug it?

[sucy6330133]

Same issue here, complaint that number / string is not assigned to (number | string)[]. I can walk-around this by adding multiple={false}.

[LeoniakM]

export const BuggyAutocomplete: VoidFunctionComponent = () => {
  const [options, setOptions] = useState<string[]>(['asd', 'fgh'])
  return (
    <Autocomplete options={options} renderInput={() => <TextField />} value={options[0]} />
  )
}

gives me "TS2322: Type 'string' is not assignable to type 'string[]'."

[fenghan34]

Hi @LeoniakM, thank you for the code example. I just tested it locally and on StackBlitz, but I haven't found any issue. Seems like we are in different environments, so can you provide the environment of your codebase by executing npx @mui/envinfo?

[LeoniakM]

Hi @LeoniakM, thank you for the code example. I just tested it locally and on StackBlitz, but I haven't found any issue. Seems like we are in different environments, so can you provide the environment of your codebase by executing npx @mui/envinfo?

  System:                                                    
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.13.1 - C:\Software\Node16\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Software\Node16\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.62)
  npmPackages:
    @emotion/react: ^11.8.2 => 11.10.0 
    @emotion/styled: ^11.8.1 => 11.10.0 
    @mui/base:  5.0.0-alpha.93 
    @mui/core-downloads-tracker:  5.10.16 
    @mui/icons-material: ^5.5.1 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.90 => 5.0.0-alpha.95 
    @mui/material: 5.10.16 => 5.10.16 
    @mui/private-theming:  5.10.16 
    @mui/styled-engine:  5.10.16 
    @mui/system:  5.10.16 
    @mui/types:  7.2.2 
    @mui/utils:  5.10.16 
    @mui/x-data-grid: ^5.12.0 => 5.15.3 
    @mui/x-date-pickers: ^5.0.0-beta.0 => 5.0.0-beta.6       
    @types/react: 17.0.1 => 17.0.1 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2
    styled-components: ^5.3.5 => 5.3.5
    typescript: 4.9.3 => 4.9.3

Edit: I updated Node to 18, but the issue still appears.

[gnowland]

Example added to issue #35308