when using the UCommandPalette I click on one item and all get selected

[jbiddulph]

Description

Please help, I would like to add an item to my array when I click on one, at the moment, when I click on an item, all get selected, here is my code:
`

<UModal v-model="isOpen">
  <!-- Display the command palette -->
  <UCommandPalette
    @select="onSelectKeyword"
    v-model="selected"
    multiple
    nullable
    :groups="[{ key: 'items', commands: items }]"
  />

  <!-- Input and button to add a new keyword -->
  <div class="mt-4">
    <UInput
      v-model="newKeyword"
      placeholder="Enter a new keyword"
      class="w-full"
    />
    <UButton
      @click="addKeyword"
      label="Add Keyword"
      color="green"
      class="mt-2"
    />
  </div>

  <!-- Display the selected keyword -->
  <div v-if="selectedKeyword" class="mt-4 text-lg">
    Selected Keyword: <span class="font-bold">{{ selectedKeyword }}</span>
  </div>
</UModal>

<script setup> const props = defineProps({ items: { type: Array, required: true, }, }); const isOpen = ref(false) const selected = ref([]) // Log to check if items are being passed correctly console.log('Command Items in Child Component:', props.items); const emit = defineEmits(['add-new-keyword']); const selectedKeyword = ref([]); const newKeyword = ref(''); // Function to handle keyword selection const onSelectKeyword = (item) => { const index = selectedKeyword.value.findIndex(i => i === item.value); if (index === -1) { // Add item if not already selected selectedKeyword.value.push(item.value); } else { // Remove item if already selected (deselect) selectedKeyword.value.splice(index, 1); } }; // Function to add a new keyword const addKeyword = () => { const trimmedKeyword = newKeyword.value.trim().toLowerCase(); // Emit the new keyword to the parent component if it's valid if (trimmedKeyword && !props.items.includes(trimmedKeyword)) { emit('add-new-keyword', trimmedKeyword); // Emit the event to the parent newKeyword.value = ''; // Reset the input field } else { alert('Keyword is either empty or already exists.'); } }; </script> <style scoped> .UCommandPalette { border: 1px solid red; background-color: lightyellow; } /* Optional styling for better UI */ .mt-4 { margin-top: 1rem; } .mt-2 { margin-top: 0.5rem; } .w-full { width: 100%; } </style>

`

[benjamincanac]

Did you specify an id in each of your items like on https://ui.nuxt.com/components/command-palette#usage? You can change this field through the by prop.