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

@@ -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.

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()

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,