[Autocomplete] TS error on `defaultValue` prop when typing a wrapper component
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Hi, please follow these steps:
- Clone this repository https://github.com/rose-bouchayer/mui-autocomplete.
- Install dependencies (project generated with Node.js 24.15.0 & pnpm 11.3.0).
- Run
pnpm build
Current behavior
defaultValue type reports an error.
$ tsc -b && vite build
src/CustomAutocomplete.tsx:43:7 - error TS2322: Type 'string | string[] | undefined' is not assignable to type 'AutocompleteValue<string, TMultiple, false, false> | undefined'.
Type 'string' is not assignable to type 'AutocompleteValue<string, TMultiple, false, false>'.
43 defaultValue={initialValue}
~~~~~~~~~~~~
node_modules/.pnpm/@mui+material@9.0.1_@emotion+react@11.14.0_@types+react@19.2.15_react@19.0.0__@emotion+_91e6e38c6567ae6619c4480b24db19f6/node_modules/@mui/material/useAutocomplete/useAutocomplete.d.mts:89:3
89 defaultValue?: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo> | undefined;
~~~~~~~~~~~~
The expected type comes from property 'defaultValue' which is declared here on type 'IntrinsicAttributes & AutocompleteProps<string, TMultiple, false, false, "div">'
Found 1 error
Expected behavior
The type of the defaultValue props should accept what generic is passed to AutocompleteProps.
Context
In our internal visual library, I'm building wrappers around MUI components. When building one for <Autocomplete />, I can't make the type of defaultValue prop to work. The above error is printed in the wrapper while alternatively, if I directly use the component, I don't have any trouble to specify defaultValue (in combination of multiple).
EDIT: we are using a shared object through a React context to define initial values/default values, here represented by a hardcoded object INITIAL_VALUES inside CustomAutocomplete. It is the computation of the initialValue variable, made inside the component, that creates the error on defaultValue.
Your environment
npx @mui/envinfo
System:
OS: Linux 6.6 Ubuntu 24.04.4 LTS 24.04.4 LTS (Noble Numbat)
Binaries:
Node: 24.15.0 - /home/rose/.proto/tools/node/24.15.0/bin/node
npm: 11.12.1 - /home/rose/.proto/tools/node/24.15.0/bin/npm
pnpm: 11.3.0 - /home/rose/.proto/tools/pnpm/11.3.0/shims/pnpm
npmPackages:
@emotion/react: 11.14.0 => 11.14.0
@emotion/styled: 11.14.0 => 11.14.0
@mui/icons-material: 9.0.1 => 9.0.1
@mui/material: 9.0.1 => 9.0.1
@types/react: 19.2.15 => 19.2.15
react: 19.0.0 => 19.0.0
react-dom: 19.0.0 => 19.0.0
typescript: 6.0.3 => 6.0.3
Search keywords: autocomplete, multiple, typescript, types
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the failure with the linked example: inspect src/CustomAutocomplete.tsx and run pnpm build. Compare the wrapper's initialValue type with the AutocompleteProps and useAutocomplete declaration shown in the error. Done means the wrapper builds without the defaultValue type error while preserving the multiple generic behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100