mui / mui/material-ui

[Autocomplete] TS error on `defaultValue` prop when typing a wrapper component

Open
#48,602 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

docs scope: autocomplete support: question typescript
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:

  1. Clone this repository https://github.com/rose-bouchayer/mui-autocomplete.
  2. Install dependencies (project generated with Node.js 24.15.0 & pnpm 11.3.0).
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.