[combobox] Type safety and type inference

[CRC32EX]

Get help

Ask a question

Why items is defined any type?
I need TypeScript type safety.

base-ui/packages/react/src/combobox/root/AriaCombobox.tsx

Line 1406 in 3881e61

items?: (readonly any[] | readonly Group<any>[]) | undefined;

Related isuses

• [toggle group] any[] value type breaks type safety #3756

[mj12albert]

You can use a generic, then it can for example infer the type of the value in onValueChange:

interface Country {
  code: string;
  value: string;
  continent: string;
  label: string;
}

const countries: Country[] = [/* array of countries */]

<Combobox.Root<Country> items={countries} />

Additionally here's the doc about applying this to a wrapper component: https://base-ui.com/react/components/combobox#typed-wrapper-component

Is this what you're looking for? @CRC32EX

[CRC32EX]

@mj12albert
https://stackblitz.com/edit/l1dajftb-4vyx7zwa?file=src%2FApp.tsx

I'm tried <Combobox.Root<ProgrammingLanguage> but language is any type

[mj12albert]

Actually the root should be able to infer from value or defaultValue without the generic; but with the generic, it can't be passed through React context to Combobox.List so the simplest and recommended way is to define it inline like the demos

[atomiks]

@CRC32EX with compound components, it's not possible to infer the type from the function there. You can make a wrapper around Combobox that has strict typesafety though if the function children is a child of the root Combobox of your wrapper as it'll be part of the same props interface/generic.

items can be anything (arbitrary objects/primitives), but in #3954 I've made changes to items to be stricter regarding what's allowed with value/defaultValue