1 reply

shadcn/ui combobox with objects

I am creating a Combobox based on shadcn/ui (https://ui.shadcn.com/docs/components/combobox) which uses

cmdk

cmdk

(https://github.com/pacocoursey/cmdk),

Popover

Popover

and

Dialog

Dialog

from Radix under the hood. The implementation in the docs uses the

value

value

of each

<CommandItem>

<CommandItem>

to filter. However, all my use cases are with objects with id and name keys where name is not unique. How should I be handling the filtering and

onSelect

onSelect

?

My solution was to give

id

id

as the

value

value

and then add my own

filter

filter

for

<Command>

<Command>

as follows -

<Command
  filter={(value, search) => {
  const obj = myArrayOfObjects.find(
    (stageTemplate) => stageTemplate._id.toString() === value
  );
  if (obj) {
    if (
      stageTemplate.name.toLowerCase().includes(search.toLowerCase())
      )
      return 1;
    }
    return 0;
  }}
>

<Command
  filter={(value, search) => {
  const obj = myArrayOfObjects.find(
    (stageTemplate) => stageTemplate._id.toString() === value
  );
  if (obj) {
    if (
      stageTemplate.name.toLowerCase().includes(search.toLowerCase())
      )
      return 1;
    }
    return 0;
  }}
>

For the

onSelect

onSelect

I have the following -

onSelect={(currentValue: string) => {
  const obj = myArrayOfObjects.find((objs) => obj.id === currentValue);
  if (obj) {
    // handle on select 
  }
  setOpen(false);
}}

onSelect={(currentValue: string) => {
  const obj = myArrayOfObjects.find((objs) => obj.id === currentValue);
  if (obj) {
    // handle on select 
  }
  setOpen(false);
}}

Does this make sense? Don't love that I am using Array.find() for each element to decide if it should be filtered out or not.

shadcn/ui combobox with objects

I am creating a Combobox based on shadcn/ui (https://ui.shadcn.com/docs/components/combobox) which uses

cmdk

cmdk

(https://github.com/pacocoursey/cmdk),

Popover

Popover

and

Dialog

Dialog

from Radix under the hood. The implementation in the docs uses the

value

value

of each

<CommandItem>

<CommandItem>

to filter. However, all my use cases are with objects with id and name keys where name is not unique. How should I be handling the filtering and

onSelect

onSelect

?

My solution was to give

id

id

as the

value

value

and then add my own

filter

filter

for

<Command>

<Command>

as follows -

<Command
  filter={(value, search) => {
  const obj = myArrayOfObjects.find(
    (stageTemplate) => stageTemplate._id.toString() === value
  );
  if (obj) {
    if (
      stageTemplate.name.toLowerCase().includes(search.toLowerCase())
      )
      return 1;
    }
    return 0;
  }}
>

<Command
  filter={(value, search) => {
  const obj = myArrayOfObjects.find(
    (stageTemplate) => stageTemplate._id.toString() === value
  );
  if (obj) {
    if (
      stageTemplate.name.toLowerCase().includes(search.toLowerCase())
      )
      return 1;
    }
    return 0;
  }}
>

For the

onSelect

onSelect

I have the following -

onSelect={(currentValue: string) => {
  const obj = myArrayOfObjects.find((objs) => obj.id === currentValue);
  if (obj) {
    // handle on select 
  }
  setOpen(false);
}}

onSelect={(currentValue: string) => {
  const obj = myArrayOfObjects.find((objs) => obj.id === currentValue);
  if (obj) {
    // handle on select 
  }
  setOpen(false);
}}

Does this make sense? Don't love that I am using Array.find() for each element to decide if it should be filtered out or not.

shadcn/ui combobox with objects

Similar Threads

shadcn/ui combobox with objects

Similar Threads

Similar Threads

Similar Threads