Merge pull request #658 from AnthonyANI/improve-label-click-handler

Improve label click handler to handle clicks on other label child elements

Author: brianvoe

src/docs/pages/frameworks/complex.vue

@@ -11,7 +11,9 @@ export interface FieldOption {
 export default defineComponent({
   name: 'ComplexFieldExample',
   components: {
-    ShikiStyle, SlimSelect },
+    ShikiStyle,
+    SlimSelect
+  },
   props: {
     modelValue: {
       type: Array as PropType<string[]>,

src/slim-select/index.test.ts

@@ -1278,15 +1278,15 @@ describe('SlimSelect Module', () => {
       document.getElementById('test-select')!.innerHTML = `
         <option value="opt1">Option 1 updated</option>
         <option value="opt2" selected>Option 2 updated</option>
-      `;
+      `
 
       // Wait for all mutations to process
       await new Promise((r) => setTimeout(r, 200))
 
       // Verify options are still there
       expect(selectElement.options.length).toBe(2)
-      expect(selectElement.options[0].textContent).toBe("Option 1 updated")
-      expect(selectElement.options[1].textContent).toBe("Option 2 updated")
+      expect(selectElement.options[0].textContent).toBe('Option 1 updated')
+      expect(selectElement.options[1].textContent).toBe('Option 2 updated')
       expect(selectElement.value).toBe('opt2')
 
       // Verify SlimSelect also has the options
@@ -1295,7 +1295,7 @@ describe('SlimSelect Module', () => {
 
       // Verify selected value is empty
       const selected = slim.getSelected()
-      expect(selected).toEqual(["opt2"])
+      expect(selected).toEqual(['opt2'])
 
       slim.destroy()
     })

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