[Bug]: Why ComboBox is not seraching with labels?

[meghraj-suthar]

Reproduction

It can be easily produced on the main site as well by changing the value field from available combox options: https://www.shadcn-vue.com/docs/components/combobox.html Just change value to 1,2,3,4,5,6 and then search for a label

Describe the bug

As a user, they'll always search for the visible item name in the combobox. Where value could be anything like a list of users and their ids as value. How will a user search for labels here?

System Info

System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 785.78 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.volta/tools/image/node/20.12.2/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/4.2.1/bin/yarn
    npm: 10.5.0 - ~/.volta/tools/image/node/20.12.2/bin/npm
    Watchman: HEAD-a373c76 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 128.0.6613.120
    Safari: 17.6
  npmPackages:
    @vueuse/core: ^11.0.3 => 11.0.3 
    radix-vue: ^1.9.5 => 1.9.5 
    vue: ^3.4.29 => 3.5.3

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[Dam998]

You can do something like this:

<script>

...

function filterFunction(list: string[], searchTerm: string) {
  return list.filter((langLabel) => {
    if (langLabel.toLowerCase().includes(searchTerm.toLowerCase())) {
      return true;
    }

    const lang = languages.find((lang) => lang.label === langLabel);
    return lang?.value.toLowerCase().includes(searchTerm.toLowerCase());
  });
}
</script>

<template>

...
<PopoverContent class="w-[200px] p-0">
            <Command :filter-function="filterFunction">
...

</template>