How to prevent reseting search-term in Command?

[romanslonov]

Hello,

I am trying to create a multi-select with remote search using tanstack, but faced a problem that on select item even if I prevent select event like so @select.prevent Command component still reset my search-term.

Here is the code:

<div class="bg-card rounded-lg p-4 shadow lg:p-8">
      <ul class="mb-2 flex flex-wrap gap-1">
        <li v-for="item in selected" :key="item">
          <Badge variant="outline">{{ item }}</Badge>
        </li>
      </ul>
      <Popover>
        <PopoverTrigger as-child>
          <Button variant="outline" class="w-full" size="lg">Select resources...</Button>
        </PopoverTrigger>
        <PopoverContent align="start" class="p-0">
          <Command v-model:model-value="selected" v-model:search-term="query">
            <CommandInput placeholder="Search resources..." />
            <CommandList>
              <CommandEmpty />
              <CommandGroup v-for="group in data?.results" :key="group.type" :heading="group.type">
                <CommandItem
                  v-for="resource in group.resources"
                  :key="resource.name"
                  :value="resource.name"
                  @select.prevent="
                    (ev) => {
                      if (typeof ev.detail.value === 'string') {
                        if (selected.includes(ev.detail.value)) return;
                        selected.push(ev.detail.value);
                      }
                    }
                  "
                >
                  {{ resource.name }}
                </CommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>

Probably it's a bug?

Is there is any workaround to prevent it? A few weeks ago did same in shadcn react version without any problem.