slim-select 3.1.3 → 3.2.0

package/src/slim-select/render.ts

@@ -157,10 +157,28 @@ export default class Render {
     this.main.main.removeAttribute('aria-activedescendant')
 
     // Remove direction class from main and content after animation is complete
+    const animationTiming = this.getAnimationTiming()
     setTimeout(() => {
       this.main.main.classList.remove(this.classes.dirAbove, this.classes.dirBelow)
       this.content.main.classList.remove(this.classes.dirAbove, this.classes.dirBelow)
-    }, 100)
+    }, animationTiming)
+  }
+
+  private getAnimationTiming(): number {
+    const computedStyle = getComputedStyle(this.content.main)
+    const cssValue = computedStyle.getPropertyValue('--ss-animation-timing').trim()
+
+    if (cssValue) {
+      // Parse CSS time value (e.g., "0.2s" or "200ms")
+      if (cssValue.endsWith('ms')) {
+        return parseFloat(cssValue)
+      } else if (cssValue.endsWith('s')) {
+        return parseFloat(cssValue) * 1000
+      }
+    }
+
+    // Fall back to default 200ms
+    return 200
   }
 
   public updateClassStyles(): void {
@@ -881,7 +899,7 @@ export default class Render {
   }
 
   public searchFocus(): void {
-    this.content.search.input.focus()
+    this.content.search.input.focus({ preventScroll: true })
   }
 
   public getOptions(notPlaceholder = false, notDisabled = false, notHidden = false): HTMLDivElement[] {

package/src/slim-select/select.ts

@@ -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
@@ -556,17 +564,17 @@ export default class Select {
 
       // Add click handler to label
       const labelClickHandler = (e: MouseEvent) => {
+        const target = e.target as HTMLElement
+
         // Prevent default label behavior (focusing the select)
+        // 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()
+        // e.stopPropagation() // dont stop propagation
 
-        // Trigger the callback to open SlimSelect
-        if (this.onLabelClick) {
-          // Use setTimeout to ensure this happens after any browser-initiated events
-          // are prevented by our prevent handlers
-          setTimeout(() => {
-            this.onLabelClick!()
-          }, 0)
+        // Only handle the click if it's directly on the label
+        if (target === label && 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'