slim-select 3.1.4 → 3.3.0

package/src/slim-select/select.ts

@@ -1,4 +1,4 @@
-import { kebabCase } from './helpers'
+import { kebabCase, hasClassInTree } from './helpers'
 import { Optgroup, Option } from './store'
 
 export default class Select {
@@ -167,6 +167,7 @@ export default class Select {
     let classChanged = false
     let disabledChanged = false
     let optgroupOptionChanged = false
+    let selectionChanged = false
 
     // Loop through mutations and check various things
     for (const m of mutations) {
@@ -186,7 +187,7 @@ export default class Select {
           for (const n of Array.from(m.addedNodes)) {
             if (n.nodeName === 'OPTION' && (<HTMLOptionElement>n).value === this.select.value) {
               // we added a new option that's now the select value
-              this.select.dispatchEvent(new Event('change'))
+              selectionChanged = true
               break
             }
           }
@@ -227,6 +228,9 @@ export default class Select {
             this.pendingOptionsChange = currentData
           }
         }
+        if (selectionChanged) {
+          this.select.dispatchEvent(new Event('change'))
+        }
         return
       }
 
@@ -234,6 +238,10 @@ export default class Select {
       this.onOptionsChange(this.getData())
       this.changeListen(true)
     }
+
+    if (selectionChanged) {
+      this.select.dispatchEvent(new Event('change'))
+    }
   }
 
   // From the select element pull optgroup and options into data
@@ -558,20 +566,19 @@ export default class Select {
       const labelClickHandler = (e: MouseEvent) => {
         const target = e.target as HTMLElement
 
-        // Only continue if the target is the label
-        if (target !== label) {
-          return
-        }
+        // Check if click is on SlimSelect UI elements (main div or content)
+        const isSlimSelectElement = hasClassInTree(target, this.select.dataset.id!)
 
-        // At this point, we know the click is directly on the label element
         // Prevent default label behavior (focusing the select)
-        // Don't stop propagation to allow other handlers (like closing other SlimSelect instances)
+        // This needs to happen for all clicks on the label or its children
+        // to prevent the browser from focusing the hidden select
         e.preventDefault()
         // e.stopPropagation() // dont stop propagation
 
-        // Trigger the callback to toggle SlimSelect
-        if (this.onLabelClick) {
-          this.onLabelClick!()
+        // Only trigger the toggle if the click is NOT on SlimSelect elements
+        // This allows clicking label text/children to toggle, while wrapped SlimSelect handles its own clicks
+        if (!isSlimSelectElement && this.onLabelClick) {
+          this.onLabelClick()
         }
       }
 

package/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',

package/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'

package/src/slim-select/slimselect.scss

@@ -362,6 +362,11 @@
     }
   }
 
+  &.ss-dir-above .ss-search {
+    border-bottom: none;
+    border-top: 1px solid var(--ss-border-color);
+  }
+
   .ss-list {
     flex: 1 1 auto;
     height: auto;