From 11ccbbb24ef61e6bd3bb703f950955dd21d6a3eb Mon Sep 17 00:00:00 2001
From: Italo <DarkGhostHunter@Gmail.com>
Date: Tue, 21 Nov 2023 14:59:42 -0300
Subject: [PATCH] feat(SelectMenu): allows to clear search query on close
 (#968)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/3.forms/4.select-menu.md       | 17 +++++++++++++++++
 src/runtime/components/forms/SelectMenu.vue | 12 ++++++++++++
 src/runtime/ui.config.ts                    |  3 ++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index 0324006816..d7bfe95151 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/docs/content/3.forms/4.select-menu.md
@@ -99,6 +99,23 @@ props:
 ---
 ::
 
+#### Clear on close :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+By default, the search query will be kept after the menu is closed. To clear it on close, set the `clear-search-on-close` prop.
+
+::component-card
+---
+baseProps:
+  class: 'w-full lg:w-40'
+  placeholder: 'Select a person'
+  searchable: true
+  searchablePlaceholder: 'Search a person...'
+  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+props:
+  clearSearchOnClose: true
+---
+::
+
 ### Async search
 
 Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array.
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index f927fa2eee..424dfdb9b3 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -239,6 +239,10 @@ export default defineComponent({
       type: String,
       default: 'Search...'
     },
+    clearSearchOnClose: {
+      type: Boolean,
+      default: () => configMenu.default.clearOnClose
+    },
     debounce: {
       type: Number,
       default: 200
@@ -427,10 +431,17 @@ export default defineComponent({
       return query.value === '' ? null : { [props.optionAttribute]: query.value }
     })
 
+    function clearOnClose () {
+      if (props.clearSearchOnClose) {
+        query.value = ''
+      }
+    }
+
     watch(container, (value) => {
       if (value) {
         emit('open')
       } else {
+        clearOnClose()
         emit('close')
         emitFormBlur()
       }
@@ -442,6 +453,7 @@ export default defineComponent({
         // explicitly set input text because `ComboboxInput` `displayValue` is not reactive
         searchInput.value.$el.value = ''
       }
+
       emit('update:modelValue', event)
       emit('change', event)
       emitFormChange()
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 449b89f7ec..3aadd3b6ae 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -790,7 +790,8 @@ export const selectMenu = {
     placement: 'bottom-end'
   },
   default: {
-    selectedIcon: 'i-heroicons-check-20-solid'
+    selectedIcon: 'i-heroicons-check-20-solid',
+    clearOnClose: false
   },
   arrow: {
     ..._popperArrow,