slim-select 3.0.6 → 3.1.1

package/src/slim-select/select.test.ts

@@ -439,4 +439,238 @@ describe('select module', () => {
       expect(dataOption[0].options[0].text).toBe('New One')
     })
   })
+
+  describe('label handling', () => {
+    test('setupLabelHandlers finds label with for attribute and adds click handler', async () => {
+      document.body.innerHTML = `
+        <label for="test-select">Select Label</label>
+        <select id="test-select">
+          <option value="1">One</option>
+          <option value="2">Two</option>
+        </select>
+      `
+
+      const selectElement = document.getElementById('test-select') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const onLabelClickMock = vi.fn()
+      select.onLabelClick = onLabelClickMock
+
+      select.setupLabelHandlers()
+
+      const label = document.querySelector('label[for="test-select"]') as HTMLLabelElement
+      expect(label).toBeTruthy()
+
+      // Click the label
+      label.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+
+      // Wait for setTimeout in the label handler
+      await new Promise((r) => setTimeout(r, 10))
+
+      // Should have prevented default and called the callback
+      expect(onLabelClickMock).toHaveBeenCalled()
+    })
+
+    test('setupLabelHandlers finds wrapped label and adds click handler', async () => {
+      document.body.innerHTML = `
+        <label>
+          Select Label
+          <select id="test-select">
+            <option value="1">One</option>
+            <option value="2">Two</option>
+          </select>
+        </label>
+      `
+
+      const selectElement = document.getElementById('test-select') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const onLabelClickMock = vi.fn()
+      select.onLabelClick = onLabelClickMock
+
+      select.setupLabelHandlers()
+
+      const label = selectElement.parentElement as HTMLLabelElement
+      expect(label.tagName).toBe('LABEL')
+
+      // Click the label
+      label.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+
+      // Wait for setTimeout in the label handler
+      await new Promise((r) => setTimeout(r, 10))
+
+      // Should have called the callback
+      expect(onLabelClickMock).toHaveBeenCalled()
+    })
+
+    test('setupLabelHandlers handles multiple labels', async () => {
+      document.body.innerHTML = `
+        <label for="test-select">Label 1</label>
+        <label for="test-select">Label 2</label>
+        <select id="test-select">
+          <option value="1">One</option>
+        </select>
+      `
+
+      const selectElement = document.getElementById('test-select') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const onLabelClickMock = vi.fn()
+      select.onLabelClick = onLabelClickMock
+
+      select.setupLabelHandlers()
+
+      const labels = document.querySelectorAll('label[for="test-select"]')
+      expect(labels).toHaveLength(2)
+
+      // Click first label
+      labels[0].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await new Promise((r) => setTimeout(r, 10))
+      expect(onLabelClickMock).toHaveBeenCalledTimes(1)
+
+      // Click second label
+      labels[1].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await new Promise((r) => setTimeout(r, 10))
+      expect(onLabelClickMock).toHaveBeenCalledTimes(2)
+    })
+
+    test('removeLabelHandlers removes click handlers from labels', () => {
+      document.body.innerHTML = `
+        <label for="test-select">Select Label</label>
+        <select id="test-select">
+          <option value="1">One</option>
+        </select>
+      `
+
+      const selectElement = document.getElementById('test-select') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const onLabelClickMock = vi.fn()
+      select.onLabelClick = onLabelClickMock
+
+      select.setupLabelHandlers()
+      select.removeLabelHandlers()
+
+      const label = document.querySelector('label[for="test-select"]') as HTMLLabelElement
+      label.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+      // Should not have been called after removal
+      expect(onLabelClickMock).not.toHaveBeenCalled()
+    })
+
+    test('hideUI prevents native select from opening on click', () => {
+      document.body.innerHTML = '<select id="test"><option value="1">One</option></select>'
+
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true })
+      const prevented = !selectElement.dispatchEvent(clickEvent)
+
+      // The event should be prevented by our handler
+      expect(clickEvent.defaultPrevented).toBe(true)
+    })
+
+    test('hideUI prevents native select from opening on focus', () => {
+      document.body.innerHTML = '<select id="test"><option value="1">One</option></select>'
+
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const focusEvent = new FocusEvent('focus', { bubbles: true, cancelable: true })
+      selectElement.dispatchEvent(focusEvent)
+
+      // The event should be prevented by our handler
+      expect(focusEvent.defaultPrevented).toBe(true)
+    })
+
+    test('hideUI prevents native select from opening on mousedown', () => {
+      document.body.innerHTML = '<select id="test"><option value="1">One</option></select>'
+
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const mousedownEvent = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+      selectElement.dispatchEvent(mousedownEvent)
+
+      // The event should be prevented by our handler
+      expect(mousedownEvent.defaultPrevented).toBe(true)
+    })
+
+    test('showUI removes event handlers that prevent native select', () => {
+      document.body.innerHTML = '<select id="test"><option value="1">One</option></select>'
+
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+      select.showUI()
+
+      // After showUI, events should not be prevented
+      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true })
+      selectElement.dispatchEvent(clickEvent)
+
+      // Note: The event may still propagate normally, but defaultPrevented should be false
+      // We test this by ensuring the select doesn't have our prevent handlers attached
+      // The actual behavior depends on browser implementation
+    })
+
+    test('destroy removes label handlers', async () => {
+      document.body.innerHTML = `
+        <label for="test-select">Select Label</label>
+        <select id="test-select">
+          <option value="1">One</option>
+        </select>
+      `
+
+      const selectElement = document.getElementById('test-select') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const onLabelClickMock = vi.fn()
+      select.onLabelClick = onLabelClickMock
+
+      select.setupLabelHandlers()
+
+      // Verify handler works
+      const label = document.querySelector('label[for="test-select"]') as HTMLLabelElement
+      label.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await new Promise((r) => setTimeout(r, 10))
+      expect(onLabelClickMock).toHaveBeenCalledTimes(1)
+
+      // Destroy and verify handler removed
+      select.destroy()
+      onLabelClickMock.mockClear()
+
+      label.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await new Promise((r) => setTimeout(r, 10))
+      expect(onLabelClickMock).not.toHaveBeenCalled()
+    })
+
+    test('setupLabelHandlers does nothing if select has no id and no wrapping label', () => {
+      document.body.innerHTML = `
+        <div>
+          <select>
+            <option value="1">One</option>
+          </select>
+        </div>
+      `
+
+      const selectElement = document.querySelector('select') as HTMLSelectElement
+      const select = new Select(selectElement)
+      select.hideUI()
+
+      const onLabelClickMock = vi.fn()
+      select.onLabelClick = onLabelClickMock
+
+      // Should not throw or error
+      expect(() => select.setupLabelHandlers()).not.toThrow()
+    })
+  })
 })

package/src/slim-select/select.ts

@@ -9,10 +9,18 @@ export default class Select {
   public onClassChange?: (classes: string[]) => void
   public onDisabledChange?: (disabled: boolean) => void
   public onOptionsChange?: (data: (Option | Optgroup)[]) => void
+  public onLabelClick?: () => void
 
   // Change observers
   private listen: boolean = false
   private observer: MutationObserver | null = null
+  private isUpdating: boolean = false
+  private pendingOptionsChange: (Option | Optgroup)[] | null = null
+
+  // Event handlers for preventing native select behavior (especially on iOS Safari)
+  private preventNativeSelect: ((e: Event) => void) | null = null
+  private preventNativeSelectMousedown: ((e: Event) => void) | null = null
+  private preventNativeSelectFocus: ((e: Event) => void) | null = null
 
   constructor(select: HTMLSelectElement) {
     this.select = select
@@ -56,6 +64,35 @@ export default class Select {
     // Clip to completely hide the 1px
     this.select.style.clip = 'rect(0 0 0 0)'
     this.select.setAttribute('aria-hidden', 'true')
+
+    // Prevent native select from opening when label is clicked (especially on iOS Safari)
+    // iOS Safari programmatically focuses/clicks the select when label is clicked,
+    // bypassing pointer-events: none, so we need to prevent these events
+    // Only add listeners if they haven't been added yet
+    if (!this.preventNativeSelect) {
+      this.preventNativeSelect = (e: Event) => {
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+      }
+
+      this.preventNativeSelectMousedown = (e: Event) => {
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+      }
+
+      this.preventNativeSelectFocus = (e: Event) => {
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+      }
+
+      // Add event listeners with capture phase to catch events before they reach the select
+      this.select.addEventListener('click', this.preventNativeSelect, { capture: true, passive: false })
+      this.select.addEventListener('mousedown', this.preventNativeSelectMousedown, { capture: true, passive: false })
+      this.select.addEventListener('focus', this.preventNativeSelectFocus, { capture: true, passive: false })
+    }
   }
 
   public showUI(): void {
@@ -72,6 +109,20 @@ export default class Select {
     this.select.style.borderWidth = ''
     this.select.style.clip = ''
     this.select.removeAttribute('aria-hidden')
+
+    // Remove event listeners that prevent native select behavior
+    if (this.preventNativeSelect) {
+      this.select.removeEventListener('click', this.preventNativeSelect, { capture: true })
+      this.preventNativeSelect = null
+    }
+    if (this.preventNativeSelectMousedown) {
+      this.select.removeEventListener('mousedown', this.preventNativeSelectMousedown, { capture: true })
+      this.preventNativeSelectMousedown = null
+    }
+    if (this.preventNativeSelectFocus) {
+      this.select.removeEventListener('focus', this.preventNativeSelectFocus, { capture: true })
+      this.preventNativeSelectFocus = null
+    }
   }
 
   public changeListen(listen: boolean) {
@@ -165,6 +216,20 @@ export default class Select {
 
     // If optgroup or option has changed then call the select change function
     if (optgroupOptionChanged && this.onOptionsChange) {
+      // If we're currently updating, queue this change to process after update completes
+      if (this.isUpdating) {
+        // Only queue if the select element actually has options (not empty from updateOptions clearing)
+        // Check the select element directly, not getData() which might return stale data
+        if (this.select.options.length > 0) {
+          const currentData = this.getData()
+          // Only queue if we have actual data
+          if (currentData.length > 0) {
+            this.pendingOptionsChange = currentData
+          }
+        }
+        return
+      }
+
       this.changeListen(false)
       this.onOptionsChange(this.getData())
       this.changeListen(true)
@@ -353,6 +418,16 @@ export default class Select {
   }
 
   public updateOptions(data: (Option | Optgroup)[]): void {
+    // Don't update if data is empty (prevents clearing select when no data)
+    if (!data || data.length === 0) {
+      return
+    }
+
+    // Set updating flag FIRST to prevent mutation observer from processing during update
+    // This must be set before stopping listening so any queued mutations see the flag
+    this.isUpdating = true
+    this.pendingOptionsChange = null
+
     // Stop listening to changes
     this.changeListen(false)
 
@@ -374,6 +449,25 @@ export default class Select {
 
     // Start listening to changes
     this.changeListen(true)
+
+    // Clear updating flag
+    this.isUpdating = false
+
+    // Process any pending options change that was queued during the update
+    // Only process if it has data (don't process empty data from innerHTML clearing)
+    if (this.pendingOptionsChange !== null) {
+      const pending: (Option | Optgroup)[] = this.pendingOptionsChange
+      if (pending.length > 0 && this.onOptionsChange) {
+        this.pendingOptionsChange = null
+        // Process the queued change
+        this.changeListen(false)
+        this.onOptionsChange(pending)
+        this.changeListen(true)
+      } else {
+        // Clear pending if it was empty
+        this.pendingOptionsChange = null
+      }
+    }
   }
 
   public createOptgroup(optgroup: Optgroup): HTMLOptGroupElement {
@@ -430,18 +524,120 @@ export default class Select {
     return optionEl
   }
 
+  // Find and handle labels associated with this select
+  public setupLabelHandlers(): void {
+    const labels: HTMLLabelElement[] = []
+
+    // Find labels that point to this select via 'for' attribute
+    const selectId = this.select.id
+    if (selectId) {
+      const labelsByFor = document.querySelectorAll<HTMLLabelElement>(`label[for="${selectId}"]`)
+      labelsByFor.forEach((label) => labels.push(label))
+    }
+
+    // Find labels that wrap this select (label contains select)
+    let parent = this.select.parentElement
+    while (parent && parent !== document.body) {
+      if (parent.tagName === 'LABEL') {
+        labels.push(parent as HTMLLabelElement)
+        break
+      }
+      parent = parent.parentElement
+    }
+
+    // Remove duplicates
+    const uniqueLabels = Array.from(new Set(labels))
+
+    uniqueLabels.forEach((label) => {
+      // Skip if already handled
+      if ((label as any).__slimSelectLabelHandler) {
+        return
+      }
+
+      // Add click handler to label
+      const labelClickHandler = (e: MouseEvent) => {
+        // Prevent default label behavior (focusing the select)
+        e.preventDefault()
+        e.stopPropagation()
+
+        // 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)
+        }
+      }
+
+      // Store the handler on the label for cleanup later
+      ;(label as any).__slimSelectLabelHandler = labelClickHandler
+      label.addEventListener('click', labelClickHandler, { capture: true, passive: false })
+    })
+  }
+
+  // Remove label handlers
+  public removeLabelHandlers(): void {
+    const labels: HTMLLabelElement[] = []
+
+    // Find labels that point to this select via 'for' attribute
+    const selectId = this.select.id
+    if (selectId) {
+      const labelsByFor = document.querySelectorAll<HTMLLabelElement>(`label[for="${selectId}"]`)
+      labelsByFor.forEach((label) => labels.push(label))
+    }
+
+    // Find labels that wrap this select
+    let parent = this.select.parentElement
+    while (parent && parent !== document.body) {
+      if (parent.tagName === 'LABEL') {
+        labels.push(parent as HTMLLabelElement)
+        break
+      }
+      parent = parent.parentElement
+    }
+
+    // Remove duplicates
+    const uniqueLabels = Array.from(new Set(labels))
+
+    uniqueLabels.forEach((label) => {
+      const handler = (label as any).__slimSelectLabelHandler
+      if (handler) {
+        label.removeEventListener('click', handler, { capture: true })
+        delete (label as any).__slimSelectLabelHandler
+      }
+    })
+  }
+
   public destroy() {
     this.changeListen(false)
 
     // Remove event change listener
     this.select.removeEventListener('change', this.valueChange)
 
+    // Remove event listeners that prevent native select behavior
+    if (this.preventNativeSelect) {
+      this.select.removeEventListener('click', this.preventNativeSelect, { capture: true })
+      this.preventNativeSelect = null
+    }
+    if (this.preventNativeSelectMousedown) {
+      this.select.removeEventListener('mousedown', this.preventNativeSelectMousedown, { capture: true })
+      this.preventNativeSelectMousedown = null
+    }
+    if (this.preventNativeSelectFocus) {
+      this.select.removeEventListener('focus', this.preventNativeSelectFocus, { capture: true })
+      this.preventNativeSelectFocus = null
+    }
+
     // Disconnect observer and null
     if (this.observer) {
       this.observer.disconnect()
       this.observer = null
     }
 
+    // Remove label handlers
+    this.removeLabelHandlers()
+
     // Remove dataset id from original select
     delete this.select.dataset.id