From b43394ddc3ee795b56679f7076e0c80a1c496b2e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 22 Jul 2022 15:47:32 +0200
Subject: [PATCH] fix(CommandPalette): hack for reactivity

---
 src/runtime/components/navigation/CommandPalette.vue | 3 ++-
 src/runtime/types/command-palette.d.ts               | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index cd75193091..f6f8684d46 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -115,6 +115,7 @@ const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => de
 }))
 
 const fuse = props.groups.reduce((acc, group) => {
+  // FIXME: useFuse is not watching data correctly, so we need to add an id
   const fuse = useFuse(group.customQuery ? group.customQuery(query) : query, group.commands, defu({}, group.options || {}, options.value))
   acc[group.key] = fuse
   return acc
@@ -123,7 +124,7 @@ const fuse = props.groups.reduce((acc, group) => {
 const groups = computed(() => props.groups.map((group) => {
   return {
     ...group,
-    commands: fuse[group.key].results.value.map(result => result.item).slice(0, group.options?.resultLimit || options.value.resultLimit)
+    commands: fuse[group.key].results.value.map(result => group.commands.find(command => command.id === result.item.id)).slice(0, group.options?.resultLimit || options.value.resultLimit)
   }
 }).filter(group => group.commands.length))
 
diff --git a/src/runtime/types/command-palette.d.ts b/src/runtime/types/command-palette.d.ts
index 8ea9e06c18..fe309a163d 100644
--- a/src/runtime/types/command-palette.d.ts
+++ b/src/runtime/types/command-palette.d.ts
@@ -3,9 +3,9 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Avatar } from './avatar'
 
 export interface Command {
+  id: string | number
   prefix?: string
   suffix?: string
-  label: string
   icon?: string
   iconClass?: string
   avatar?: Partial<Avatar>
@@ -16,7 +16,6 @@ export interface Command {
 
 export interface Group {
   key: string
-  label: string
   active?: string
   inactive?: string
   commands: Command[]