Implementing a Combobox

[FrancescoSaverioZuppichini]

Hi there,

So I am trying to code a combobox but as soon as I populate the items in the Select component, my Input loose focus and if I hit a key again the auto search in the select component is triggered

    <Select onValueChange={(id: string) => onChange({ id })}>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder={selectPlaceholder} />
      </SelectTrigger>
      <SelectContent>
        <Input
          type="search"
          placeholder="Search..."
          className="focus:outline-none focus:ring-0"
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            setValue(e.target.value)
          }
          value={value}
        ></Input>
        <ScrollArea className="h-72 w-48">
          <SelectGroup className="m-w-[300px] pt-2">
            {result &&
              result.map((item: T) => (
                <SelectItem value={item.id}>{item.name}</SelectItem>
              ))}
          </SelectGroup>
        </ScrollArea>
      </SelectContent>
    </Select>
  )

I was wondering if somebody implemented a combobox with this amazing library

Thank you so much

Fra

[JamesSingleton]

There is an example of creating a combobox https://ui.shadcn.com/docs/components/combobox