[Autocomplete] freeSolo prop makes onChange value type become T | string

[MarksCode]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When passing in a custom option type Option to the Autocomplete component and freeSolo={true}, the onChange says the value can be of type Option | string instead of just Option.

type Option = { label: string; value: string };
return (
  <MuiAutocomplete<Option, true, any, true>
    freeSolo={true}
    onChange   // says value can be type Option | string
  />
);

Expected behavior 🤔

Type of value in onChange should just be Option, not Option | string.

Steps to reproduce 🕹

https://codesandbox.io/s/freesolo-demo-material-ui-forked-sn8l5i?file=/demo.tsx

Context 🔦

I want the onChange to only be type Option

Your environment 🌎

Latest mui and typescript. See codesandbox.

[michaldudak]

This is by design. When you type a new value in a text input in the freeSolo mode, it's a string - it can't be anything else.

[tnoetzel]

@michaldudak - Doesn't actually seem to be the case that it's ever a string when you're also using filterOptions as described here.

If you play with that example by simply adding a console.log under if (typeof newValue === 'string') {, you'll note that it's never a string in this case.

Ideally, onChange would be aware of this, or there'd be some shorter way to indicate it, rather than creating a code block that never actually gets triggered.

[michaldudak]

The type system is not aware of the logic you put in filterOptions, so it can't automatically exclude string from onChange's parameter. You can always manually type the parameter (onChange={(event, newValue: FilmOptionType)... and the additional code block won't be necessary.

[bagelbits]

@michaldudak onChange={(event, newValue: FilmOptionType)... is still a type error though. And if you use multiple, you can't use if (typeof newValue === 'string') { as a check anymore because the type becomes (T | string)[]

[michaldudak]

Yeah, sorry, I was wrong. In this case you can resort to TypeScript's as - you know better than the compiler what's the real type of the argument.

We are going to redesign the Autocomplete in Base UI some time this year, and we will consider this when designing the API.