slim-select 3.2.0 → 3.4.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,7 +167,7 @@ export default class Select {
     let classChanged = false
     let disabledChanged = false
     let optgroupOptionChanged = false
-    let selectionChanged = false;
+    let selectionChanged = false
 
     // Loop through mutations and check various things
     for (const m of mutations) {
@@ -187,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
-              selectionChanged = true;
+              selectionChanged = true
               break
             }
           }
@@ -228,7 +228,7 @@ export default class Select {
             this.pendingOptionsChange = currentData
           }
         }
-        if(selectionChanged) {
+        if (selectionChanged) {
           this.select.dispatchEvent(new Event('change'))
         }
         return
@@ -239,7 +239,7 @@ export default class Select {
       this.changeListen(true)
     }
 
-    if(selectionChanged) {
+    if (selectionChanged) {
       this.select.dispatchEvent(new Event('change'))
     }
   }
@@ -566,14 +566,18 @@ export default class Select {
       const labelClickHandler = (e: MouseEvent) => {
         const target = e.target as HTMLElement
 
+        // Check if click is on SlimSelect UI elements (main div or content)
+        const isSlimSelectElement = hasClassInTree(target, this.select.dataset.id!)
+
         // 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() // dont stop propagation
 
-        // Only handle the click if it's directly on the label
-        if (target === label && 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

@@ -36,7 +36,8 @@ const defaultSettings: { [key: string]: any } = {
   maxSelected: 1000,
   timeoutDelay: 200,
   maxValuesShown: 20,
-  maxValuesMessage: '{number} selected'
+  maxValuesMessage: '{number} selected',
+  contentWidth: ''
 }
 
 describe('Settings module', () => {

package/src/slim-select/settings.ts

@@ -25,6 +25,7 @@ export default class Settings {
   public closeOnSelect: boolean
   public contentLocation: HTMLElement | null
   public contentPosition: 'relative' | 'absolute' | 'fixed'
+  public contentWidth: string
   public openPosition: 'auto' | 'up' | 'down'
   public placeholderText: string
   public allowDeselect: boolean
@@ -60,6 +61,7 @@ export default class Settings {
     this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true
     this.contentLocation = settings.contentLocation || document.body
     this.contentPosition = settings.contentPosition || 'absolute'
+    this.contentWidth = settings.contentWidth || ''
     this.openPosition = settings.openPosition || 'auto' // options: auto, up, down
     this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value'
     this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false

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;