From 18931acdb316bc72a3e5ed6d20985688ad5c8d99 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 11 Nov 2024 00:28:43 +0100
Subject: [PATCH] fix(InputMenu/SelectMenu): init `filter` with `labelKey`

---
 .../examples/input-menu/InputMenuCountriesExample.vue    | 1 -
 .../examples/input-menu/InputMenuFilterFieldsExample.vue | 2 +-
 .../examples/select-menu/SelectMenuCountriesExample.vue  | 6 +++---
 .../select-menu/SelectMenuFilterFieldsExample.vue        | 2 +-
 docs/content/3.components/input-menu.md                  | 2 +-
 docs/content/3.components/select-menu.md                 | 2 +-
 src/runtime/components/InputMenu.vue                     | 9 +++++----
 src/runtime/components/SelectMenu.vue                    | 7 ++++---
 8 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/docs/app/components/content/examples/input-menu/InputMenuCountriesExample.vue b/docs/app/components/content/examples/input-menu/InputMenuCountriesExample.vue
index 24bb14be..1a6a781a 100644
--- a/docs/app/components/content/examples/input-menu/InputMenuCountriesExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuCountriesExample.vue
@@ -19,7 +19,6 @@ function onOpen() {
     :items="countries || []"
     :loading="status === 'pending'"
     label-key="name"
-    :filter="['name']"
     :search-input="{ icon: 'i-lucide-search' }"
     placeholder="Select country"
     class="w-48"
diff --git a/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue b/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
index aea9439a..9d23f0fb 100644
--- a/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
@@ -16,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
   <UInputMenu
     :items="users || []"
     :loading="status === 'pending'"
-    :filter="['name', 'email']"
+    :filter="['label', 'email']"
     icon="i-lucide-user"
     placeholder="Select user"
     class="w-80"
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuCountriesExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuCountriesExample.vue
index 23f88b06..3b904e85 100644
--- a/docs/app/components/content/examples/select-menu/SelectMenuCountriesExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuCountriesExample.vue
@@ -4,7 +4,8 @@ const { data: countries, status, execute } = await useLazyFetch<{
   code: string
   emoji: string
 }[]>('/api/countries.json', {
-  immediate: false
+  immediate: false,
+  default: () => []
 })
 
 function onOpen() {
@@ -16,10 +17,9 @@ function onOpen() {
 
 <template>
   <USelectMenu
-    :items="countries || []"
+    :items="countries"
     :loading="status === 'pending'"
     label-key="name"
-    :filter="['name']"
     :search-input="{ icon: 'i-lucide-search' }"
     placeholder="Select country"
     class="w-48"
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
index 0ed1ddac..290294d9 100644
--- a/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
@@ -16,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
   <USelectMenu
     :items="users || []"
     :loading="status === 'pending'"
-    :filter="['name', 'email']"
+    :filter="['label', 'email']"
     icon="i-lucide-user"
     placeholder="Select user"
     class="w-80"
diff --git a/docs/content/3.components/input-menu.md b/docs/content/3.components/input-menu.md
index 588ff098..5308dafd 100644
--- a/docs/content/3.components/input-menu.md
+++ b/docs/content/3.components/input-menu.md
@@ -694,7 +694,7 @@ This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebo
 
 ### With custom search
 
-Use the `filter` prop with an array of fields to filter on.
+Use the `filter` prop with an array of fields to filter on. Defaults to `[labelKey]`.
 
 ::component-example
 ---
diff --git a/docs/content/3.components/select-menu.md b/docs/content/3.components/select-menu.md
index d052d229..69085995 100644
--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -731,7 +731,7 @@ This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebo
 
 ### With custom search
 
-Use the `filter` prop with an array of fields to filter on.
+Use the `filter` prop with an array of fields to filter on. Defaults to `[labelKey]`.
 
 ::component-example
 ---
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 467629ce..37a2be75 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -78,9 +78,10 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
    */
   portal?: boolean
   /**
-   * Whether to filter items or not, can be an array of fields to filter.
-   * When `false`, items will not be filtered which is useful for custom filtering.
-   * @defaultValue ['label']
+   * Whether to filter items or not, can be an array of fields to filter. Defaults to `[labelKey]`.
+   * When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+   * `['label']`{lang="ts-type"}
+   * @defaultValue true
    */
   filter?: boolean | string[]
   /**
@@ -149,7 +150,7 @@ const props = withDefaults(defineProps<InputMenuProps<T, I, V, M>>(), {
   type: 'text',
   autofocusDelay: 0,
   portal: true,
-  filter: () => ['label'],
+  filter: true,
   labelKey: 'label' as never
 })
 const emits = defineEmits<InputMenuEmits<T, V, M>>()
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index be0a502a..ec7e2249 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -70,9 +70,10 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
    */
   portal?: boolean
   /**
-   * Whether to filter items or not, can be an array of fields to filter.
+   * Whether to filter items or not, can be an array of fields to filter. Defaults to `[labelKey]`.
    * When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
-   * @defaultValue ['label']
+   * `['label']`{lang="ts-type"}
+   * @defaultValue true
    */
   filter?: boolean | string[]
   /**
@@ -139,7 +140,7 @@ const props = withDefaults(defineProps<SelectMenuProps<T, I, V, M>>(), {
   portal: true,
   autofocusDelay: 0,
   searchInput: true,
-  filter: () => ['label'],
+  filter: true,
   labelKey: 'label' as never
 })