Merge pull request #657 from AnthonyANI/keep-search-setting

Added keepSearch setting to avoid clearing search input upon close

Author: brianvoe

README.md

@@ -140,6 +140,7 @@ new SlimSelect({
     alwaysOpen: false, // Keep dropdown always open
     showSearch: true, // Show search input
     focusSearch: true, // Auto focus search on open
+    keepSearch: false, // Keep search input value when dropdown closes
     ariaLabel: 'Combobox', // ARIA label for accessibility
     searchPlaceholder: 'Search', // Search input placeholder
     searchText: 'No Results', // Text when no results found

src/docs/app.vue

@@ -102,6 +102,7 @@ export default defineComponent({
             { text: 'keepOrder', value: 'settings#keepOrder' },
             { text: 'showSearch', value: 'settings#showSearch' },
             { text: 'focusSearch', value: 'settings#focusSearch' },
+            { text: 'keepSearch', value: 'settings#keepSearch' },
             { text: 'searchText', value: 'settings#searchText' },
             { text: 'searchPlaceholder', value: 'settings#searchPlaceholder' },
             { text: 'searchHighlight', value: 'settings#searchHighlight' },

src/docs/pages/settings/index.vue

@@ -25,6 +25,7 @@ import OpenPosition from './open_position.vue'
 import Placeholder from './placeholder.vue'
 import ShowSearch from './show_search.vue'
 import FocusSearch from './focus_search.vue'
+import KeepSearch from './keep_search.vue'
 import SearchText from './search_text.vue'
 import SearchPlaceholder from './search_placeholder.vue'
 import SearchHighlight from './search_highlight.vue'
@@ -55,6 +56,7 @@ export default defineComponent({
     KeepOrder,
     ShowSearch,
     FocusSearch,
+    KeepSearch,
     SearchText,
     SearchPlaceholder,
     SearchHighlight,
@@ -106,21 +108,22 @@ export default defineComponent({
     <AdSlot ad-slot="1270131515" />
 
     <FocusSearch />
-    <SearchText />
+    <KeepSearch />
     <AdSlot ad-slot="1270131515" />
 
+    <SearchText />
     <SearchPlaceholder />
-    <SearchHighlight />
     <AdSlot ad-slot="1270131515" />
 
+    <SearchHighlight />
     <CloseOnSelect />
-    <ShowTooltip />
     <AdSlot ad-slot="1270131515" />
 
+    <ShowTooltip />
     <Closable />
-    <HideSelected />
     <AdSlot ad-slot="1270131515" />
 
+    <HideSelected />
     <MaxValuesShown />
   </div>
 </template>

src/docs/pages/settings/keep_search.vue

@@ -0,0 +1,77 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import ShikiStyle from '../../components/shiki_style.vue'
+
+import SlimSelect from '@/slim-select'
+
+export default defineComponent({
+  name: 'KeepSearch',
+  mounted() {
+    // Single
+    new SlimSelect({
+      select: this.$refs.keepSearchSingle as HTMLSelectElement,
+      settings: {
+        keepSearch: true
+      }
+    })
+
+    // Multiple
+    new SlimSelect({
+      select: this.$refs.keepSearchMulti as HTMLSelectElement,
+      settings: {
+        keepSearch: true
+      }
+    })
+  },
+  components: {
+    ShikiStyle
+  }
+})
+</script>
+
+<template>
+  <div id="keepSearch" class="content">
+    <h2 class="header">keepSearch</h2>
+    <p>
+      The keepSearch setting controls whether the search input text is preserved when the dropdown closes. When enabled,
+      any text entered in the search field will remain when you reopen the dropdown, allowing you to continue your
+      previous search.
+    </p>
+    <p>
+      By default, the search field is cleared each time the dropdown closes. Enabling this setting is useful when users
+      need to maintain their last search and results, such as when picking multiple selections in a multi-select
+      dropdown.
+    </p>
+
+    <div class="row" style="padding: 0 0 var(--spacing-half) 0">
+      <select ref="keepSearchSingle">
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+        <option value="fish">Fish</option>
+        <option value="hamster">Hamster</option>
+        <option value="rabbit">Rabbit</option>
+      </select>
+
+      <select ref="keepSearchMulti" multiple>
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+        <option value="fish">Fish</option>
+        <option value="hamster">Hamster</option>
+        <option value="rabbit">Rabbit</option>
+      </select>
+    </div>
+
+    <ShikiStyle language="javascript">
+      <pre>
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            keepSearch: true
+          }
+        })
+      </pre>
+    </ShikiStyle>
+  </div>
+</template>

src/slim-select/index.test.ts

@@ -503,6 +503,41 @@ describe('SlimSelect Module', () => {
       expect(slim.render.content.search.input.value).toBe('')
     })
 
+    test('should keep search input when keepSearch is true', async () => {
+      // Create new instance with keepSearch enabled
+      const select = document.createElement('select')
+      select.innerHTML = `
+        <option value="a">A</option>
+        <option value="b">B</option>
+        <option value="c">C</option>
+      `
+      document.body.appendChild(select)
+
+      const slimWithKeepSearch = new SlimSelect({
+        select: select,
+        settings: {
+          keepSearch: true
+        }
+      })
+
+      // Open dropdown
+      slimWithKeepSearch.open()
+
+      // Search for something
+      slimWithKeepSearch.search('test')
+      expect(slimWithKeepSearch.render.content.search.input.value).toBe('test')
+
+      // Close dropdown
+      slimWithKeepSearch.close()
+
+      // Search input should NOT be cleared when keepSearch is true
+      expect(slimWithKeepSearch.render.content.search.input.value).toBe('test')
+
+      // Cleanup
+      slimWithKeepSearch.destroy()
+      document.body.removeChild(select)
+    })
+
     test('should persist search results in store across close/open cycles', () => {
       // Search for something
       slim.search('te')

src/slim-select/index.ts

@@ -419,8 +419,8 @@ export default class SlimSelect {
     // Tell render to close
     this.render.close()
 
-    // Clear search only if not empty
-    if (this.render.content.search.input.value !== '') {
+    // Clear search only if not empty and keepSearch is false
+    if (!this.settings.keepSearch && this.render.content.search.input.value !== '') {
       this.search('') // Clear search
     }
 

src/slim-select/settings.test.ts

@@ -17,6 +17,7 @@ const defaultSettings: { [key: string]: any } = {
   alwaysOpen: false,
   showSearch: true,
   focusSearch: true,
+  keepSearch: false,
   ariaLabel: 'Combobox',
   searchPlaceholder: 'Search...',
   searchText: 'No Results',

src/slim-select/settings.ts

@@ -16,6 +16,7 @@ export default class Settings {
   public alwaysOpen: boolean
   public showSearch: boolean
   public focusSearch: boolean
+  public keepSearch: boolean
   public ariaLabel: string
   public searchPlaceholder: string
   public searchText: string
@@ -50,6 +51,7 @@ export default class Settings {
     this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false
     this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true
     this.focusSearch = settings.focusSearch !== undefined ? settings.focusSearch : true
+    this.keepSearch = settings.keepSearch !== undefined ? settings.keepSearch : false
     this.ariaLabel = settings.ariaLabel || 'Combobox'
     this.searchPlaceholder = settings.searchPlaceholder || 'Search...'
     this.searchText = settings.searchText || 'No Results'