hotwire_combobox 0.1.42 → 0.2.0

data/app/assets/javascripts/hw_combobox/helpers.js

@@ -79,3 +79,19 @@ export function dispatch(eventName, { target, cancelable, detail } = {}) {
 
   return event
 }
+
+export function nextRepaint() {
+  if (document.visibilityState === "hidden") {
+    return nextEventLoopTick()
+  } else {
+    return nextAnimationFrame()
+  }
+}
+
+export function nextAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()))
+}
+
+export function nextEventLoopTick() {
+  return new Promise((resolve) => setTimeout(() => resolve(), 0))
+}

data/app/assets/javascripts/hw_combobox/models/combobox/announcements.js

@@ -0,0 +1,7 @@
+import Combobox from "hw_combobox/models/combobox/base"
+
+Combobox.Announcements = Base => class extends Base {
+  _announceToScreenReader(display, action) {
+    this.announcerTarget.innerText = `${display} ${action}`
+  }
+}

data/app/assets/javascripts/hw_combobox/models/combobox/async_loading.js

@@ -4,4 +4,8 @@ Combobox.AsyncLoading = Base => class extends Base {
   get _isAsync() {
     return this.hasAsyncSrcValue
   }
+
+  get _isSync() {
+    return !this._isAsync
+  }
 }

data/app/assets/javascripts/hw_combobox/models/combobox/autocomplete.js

@@ -8,16 +8,18 @@ Combobox.Autocomplete = Base => class extends Base {
     }
   }
 
-  _autocompleteWith(option, { force }) {
-    if (!this._autocompletesInline && !force) return
+  _replaceFullQueryWithAutocompletedValue(option) {
+    const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue)
+
+    this._fullQuery = autocompletedValue
+    this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
+  }
 
+  _autocompleteMissingPortion(option) {
     const typedValue = this._typedQuery
     const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue)
 
-    if (force) {
-      this._fullQuery = autocompletedValue
-      this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
-    } else if (startsWith(autocompletedValue, typedValue)) {
+    if (this._autocompletesInline && startsWith(autocompletedValue, typedValue)) {
       this._fullQuery = autocompletedValue
       this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length)
     }

data/app/assets/javascripts/hw_combobox/models/combobox/dialog.js

@@ -53,7 +53,7 @@ Combobox.Dialog = Base => class extends Base {
     this.dialogFocusTrapTarget.focus()
   }
 
-  get _smallViewport() {
+  get _isSmallViewport() {
     return window.matchMedia(`(max-width: ${this.smallViewportMaxWidthValue})`).matches
   }
 

data/app/assets/javascripts/hw_combobox/models/combobox/events.js

@@ -2,20 +2,35 @@ import Combobox from "hw_combobox/models/combobox/base"
 import { dispatch } from "hw_combobox/helpers"
 
 Combobox.Events = Base => class extends Base {
-  _dispatchSelectionEvent({ isNew }) {
-    dispatch("hw-combobox:selection", { target: this.element, detail: { ...this._eventableDetails, isNew } })
+  _dispatchPreselectionEvent({ isNewAndAllowed, previousValue }) {
+    if (previousValue === this._incomingFieldValueString) return
+
+    dispatch("hw-combobox:preselection", {
+      target: this.element,
+      detail: { ...this._eventableDetails, isNewAndAllowed, previousValue }
+    })
+  }
+
+  _dispatchSelectionEvent() {
+    dispatch("hw-combobox:selection", {
+      target: this.element,
+      detail: this._eventableDetails
+    })
   }
 
-  _dispatchClosedEvent() {
-    dispatch("hw-combobox:closed", { target: this.element, detail: this._eventableDetails })
+  _dispatchRemovalEvent({ removedDisplay, removedValue }) {
+    dispatch("hw-combobox:removal", {
+      target: this.element,
+      detail: { ...this._eventableDetails, removedDisplay, removedValue }
+    })
   }
 
   get _eventableDetails() {
     return {
-      value: this.hiddenFieldTarget.value,
+      value: this._incomingFieldValueString,
       display: this._fullQuery,
       query: this._typedQuery,
-      fieldName: this.hiddenFieldTarget.name,
+      fieldName: this._fieldName,
       isValid: this._valueIsValid
     }
   }

data/app/assets/javascripts/hw_combobox/models/combobox/filtering.js

@@ -1,58 +1,63 @@
 
 import Combobox from "hw_combobox/models/combobox/base"
-import { applyFilter, debounce, isDeleteEvent, unselectedPortion } from "hw_combobox/helpers"
+import { applyFilter, debounce, unselectedPortion } from "hw_combobox/helpers"
 import { get } from "hw_combobox/vendor/requestjs"
 
 Combobox.Filtering = Base => class extends Base {
-  filter(event) {
-    if (this._isAsync) {
-      this._debouncedFilterAsync(event)
+  filterAndSelect({ inputType }) {
+    this._filter(inputType)
+
+    if (this._isSync) {
+      this._selectOnQuery(inputType)
     } else {
-      this._filterSync(event)
+      // noop, async selection is handled by stimulus callbacks
     }
-
-    this._actingCombobox.toggleAttribute("data-queried", this._isQueried)
   }
 
   _initializeFiltering() {
     this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this))
   }
 
-  _debouncedFilterAsync(event) {
-    this._filterAsync(event)
+  _filter(inputType) {
+    if (this._isAsync) {
+      this._debouncedFilterAsync(inputType)
+    } else {
+      this._filterSync()
+    }
+
+    this._markQueried()
+  }
+
+  _debouncedFilterAsync(inputType) {
+    this._filterAsync(inputType)
   }
 
-  async _filterAsync(event) {
+  async _filterAsync(inputType) {
     const query = {
       q: this._fullQuery,
-      input_type: event.inputType,
+      input_type: inputType,
       for_id: this.element.dataset.asyncId
     }
 
     await get(this.asyncSrcValue, { responseKind: "turbo-stream", query })
   }
 
-  _filterSync(event) {
-    this.open()
-    this._allOptionElements.forEach(applyFilter(this._fullQuery, { matching: this.filterableAttributeValue }))
-    this._commitFilter(event)
-  }
-
-  _commitFilter(event) {
-    if (this._shouldTreatAsNewOptionForFiltering(!isDeleteEvent(event))) {
-      this._selectNew()
-    } else if (isDeleteEvent(event)) {
-      this._deselect()
-    } else if (event.inputType === "hw:lockInSelection") {
-      this._select(this._ensurableOption)
-    } else if (this._isOpen) {
-      this._select(this._visibleOptionElements[0])
-    }
+  _filterSync() {
+    this._allFilterableOptionElements.forEach(
+      applyFilter(
+        this._fullQuery,
+        { matching: this.filterableAttributeValue }
+      )
+    )
   }
 
   _clearQuery() {
     this._fullQuery = ""
-    this.filter({ inputType: "deleteContentBackward" })
+    this.filterAndSelect({ inputType: "deleteContentBackward" })
+  }
+
+  _markQueried() {
+    this._actingCombobox.toggleAttribute("data-queried", this._isQueried)
   }
 
   get _isQueried() {

data/app/assets/javascripts/hw_combobox/models/combobox/form_field.js

@@ -0,0 +1,74 @@
+import Combobox from "hw_combobox/models/combobox/base"
+
+Combobox.FormField = Base => class extends Base {
+  get _fieldValue() {
+    if (this._isMultiselect) {
+      const currentValue = this.hiddenFieldTarget.value
+      const arrayFromValue = currentValue ? currentValue.split(",") : []
+
+      return new Set(arrayFromValue)
+    } else {
+      return this.hiddenFieldTarget.value
+    }
+  }
+
+  get _fieldValueString() {
+    if (this._isMultiselect) {
+      return this._fieldValueArray.join(",")
+    } else {
+      return this.hiddenFieldTarget.value
+    }
+  }
+
+  get _incomingFieldValueString() {
+    if (this._isMultiselect) {
+      const array = this._fieldValueArray
+
+      if (this.hiddenFieldTarget.dataset.valueForMultiselect) {
+        array.push(this.hiddenFieldTarget.dataset.valueForMultiselect)
+      }
+
+      return array.join(",")
+    } else {
+      return this.hiddenFieldTarget.value
+    }
+  }
+
+  get _fieldValueArray() {
+    if (this._isMultiselect) {
+      return Array.from(this._fieldValue)
+    } else {
+      return [ this.hiddenFieldTarget.value ]
+    }
+  }
+
+  set _fieldValue(value) {
+    if (this._isMultiselect) {
+      this.hiddenFieldTarget.dataset.valueForMultiselect = value?.replace(/,/g, "")
+      this.hiddenFieldTarget.dataset.displayForMultiselect = this._fullQuery
+    } else {
+      this.hiddenFieldTarget.value = value
+    }
+  }
+
+  get _hasEmptyFieldValue() {
+    if (this._isMultiselect) {
+      return this.hiddenFieldTarget.dataset.valueForMultiselect == "" ||
+        this.hiddenFieldTarget.dataset.valueForMultiselect == "undefined"
+    } else {
+      return this.hiddenFieldTarget.value === ""
+    }
+  }
+
+  get _hasFieldValue() {
+    return !this._hasEmptyFieldValue
+  }
+
+  get _fieldName() {
+    return this.hiddenFieldTarget.name
+  }
+
+  set _fieldName(value) {
+    this.hiddenFieldTarget.name = value
+  }
+}

data/app/assets/javascripts/hw_combobox/models/combobox/multiselect.js

@@ -0,0 +1,160 @@
+import Combobox from "hw_combobox/models/combobox/base"
+import { cancel, nextRepaint } from "hw_combobox/helpers"
+import { get } from "hw_combobox/vendor/requestjs"
+
+Combobox.Multiselect = Base => class extends Base {
+  navigateChip(event) {
+    this._chipKeyHandlers[event.key]?.call(this, event)
+  }
+
+  removeChip({ currentTarget, params }) {
+    let display
+    const option = this._optionElementWithValue(params.value)
+
+    if (option) {
+      display = option.getAttribute(this.autocompletableAttributeValue)
+      this._markNotSelected(option)
+      this._markNotMultiselected(option)
+    } else {
+      display = params.value // for new options
+    }
+
+    this._removeFromFieldValue(params.value)
+    this._filter("hw:multiselectSync")
+
+    currentTarget.closest("[data-hw-combobox-chip]").remove()
+
+    if (!this._isSmallViewport) {
+      this.openByFocusing()
+    }
+
+    this._announceToScreenReader(display, "removed")
+    this._dispatchRemovalEvent({ removedDisplay: display, removedValue: params.value })
+  }
+
+  hideChipsForCache() {
+    this.element.querySelectorAll("[data-hw-combobox-chip]").forEach(chip => chip.hidden = true)
+  }
+
+  _chipKeyHandlers = {
+    Backspace: (event) => {
+      this.removeChip(event)
+      cancel(event)
+    },
+    Enter: (event) => {
+      this.removeChip(event)
+      cancel(event)
+    },
+    Space: (event) => {
+      this.removeChip(event)
+      cancel(event)
+    },
+    Escape: (event) => {
+      this.openByFocusing()
+      cancel(event)
+    }
+  }
+
+  _initializeMultiselect() {
+    if (!this._isMultiPreselected) {
+      this._preselectMultiple()
+      this._markMultiPreselected()
+    }
+  }
+
+  async _createChip(shouldReopen) {
+    if (!this._isMultiselect) return
+
+    this._beforeClearingMultiselectQuery(async (display, value) => {
+      this._fullQuery = ""
+      this._filter("hw:multiselectSync")
+      this._requestChips(value)
+      this._addToFieldValue(value)
+      if (shouldReopen) {
+        await nextRepaint()
+        this.openByFocusing()
+      }
+      this._announceToScreenReader(display, "multi-selected. Press Shift + Tab, then Enter to remove.")
+    })
+  }
+
+  async _requestChips(values) {
+    await get(this.selectionChipSrcValue, {
+      responseKind: "turbo-stream",
+      query: {
+        for_id: this.element.dataset.asyncId,
+        combobox_values: values
+      }
+    })
+  }
+
+  _beforeClearingMultiselectQuery(callback) {
+    const display = this.hiddenFieldTarget.dataset.displayForMultiselect
+    const value = this.hiddenFieldTarget.dataset.valueForMultiselect
+
+    if (value && !this._fieldValue.has(value)) {
+      callback(display, value)
+    }
+
+    this.hiddenFieldTarget.dataset.displayForMultiselect = ""
+    this.hiddenFieldTarget.dataset.valueForMultiselect = ""
+  }
+
+  _resetMultiselectionMarks() {
+    if (!this._isMultiselect) return
+
+    this._fieldValueArray.forEach(value => {
+      const option = this._optionElementWithValue(value)
+
+      if (option) {
+        option.setAttribute("data-multiselected", "")
+        option.hidden = true
+      }
+    })
+  }
+
+  _markNotMultiselected(option) {
+    if (!this._isMultiselect) return
+
+    option.removeAttribute("data-multiselected")
+    option.hidden = false
+  }
+
+  _addToFieldValue(value) {
+    const newValue = this._fieldValue
+
+    newValue.add(String(value))
+    this.hiddenFieldTarget.value = Array.from(newValue).join(",")
+
+    if (this._isSync) this._resetMultiselectionMarks()
+  }
+
+  _removeFromFieldValue(value) {
+    const newValue = this._fieldValue
+
+    newValue.delete(String(value))
+    this.hiddenFieldTarget.value = Array.from(newValue).join(",")
+
+    if (this._isSync) this._resetMultiselectionMarks()
+  }
+
+  _focusLastChipDismisser() {
+    this.chipDismisserTargets[this.chipDismisserTargets.length - 1]?.focus()
+  }
+
+  _markMultiPreselected() {
+    this.element.dataset.multiPreselected = ""
+  }
+
+  get _isMultiselect() {
+    return this.hasSelectionChipSrcValue
+  }
+
+  get _isSingleSelect() {
+    return !this._isMultiselect
+  }
+
+  get _isMultiPreselected() {
+    return this.element.hasAttribute("data-multi-preselected")
+  }
+}

data/app/assets/javascripts/hw_combobox/models/combobox/navigation.js

@@ -4,17 +4,22 @@ import { cancel } from "hw_combobox/helpers"
 Combobox.Navigation = Base => class extends Base {
   navigate(event) {
     if (this._autocompletesList) {
-      this._keyHandlers[event.key]?.call(this, event)
+      this._navigationKeyHandlers[event.key]?.call(this, event)
     }
   }
 
-  _keyHandlers = {
+  _navigationKeyHandlers = {
     ArrowUp: (event) => {
       this._selectIndex(this._selectedOptionIndex - 1)
       cancel(event)
     },
     ArrowDown: (event) => {
       this._selectIndex(this._selectedOptionIndex + 1)
+
+      if (this._selectedOptionIndex === 0) {
+        this._actingListbox.scrollTop = 0
+      }
+
       cancel(event)
     },
     Home: (event) => {
@@ -26,14 +31,18 @@ Combobox.Navigation = Base => class extends Base {
       cancel(event)
     },
     Enter: (event) => {
-      this.close()
-      this._actingCombobox.blur()
+      this._closeAndBlur("hw:keyHandler:enter")
       cancel(event)
     },
     Escape: (event) => {
-      this.close()
-      this._actingCombobox.blur()
+      this._closeAndBlur("hw:keyHandler:escape")
       cancel(event)
+    },
+    Backspace: (event) => {
+      if (this._isMultiselect && !this._fullQuery) {
+        this._focusLastChipDismisser()
+        cancel(event)
+      }
     }
   }
 }

data/app/assets/javascripts/hw_combobox/models/combobox/options.js

@@ -2,9 +2,25 @@ import Combobox from "hw_combobox/models/combobox/base"
 import { visible } from "hw_combobox/helpers"
 
 Combobox.Options = Base => class extends Base {
-  _resetOptions() {
-    this._deselect()
-    this.hiddenFieldTarget.name = this.originalNameValue
+  _resetOptionsSilently() {
+    this._resetOptions(this._deselect.bind(this))
+  }
+
+  _resetOptionsAndNotify() {
+    this._resetOptions(this._deselectAndNotify.bind(this))
+  }
+
+  _resetOptions(deselectionStrategy) {
+    this._fieldName = this.originalNameValue
+    deselectionStrategy()
+  }
+
+  _optionElementWithValue(value) {
+    return this._actingListbox.querySelector(`[${this.filterableAttributeValue}][data-value='${value}']`)
+  }
+
+  _displayForOptionElement(element) {
+    return element.getAttribute(this.autocompletableAttributeValue)
   }
 
   get _allowNew() {
@@ -12,19 +28,23 @@ Combobox.Options = Base => class extends Base {
   }
 
   get _allOptions() {
-    return Array.from(this._allOptionElements)
+    return Array.from(this._allFilterableOptionElements)
   }
 
-  get _allOptionElements() {
-    return this._actingListbox.querySelectorAll(`[${this.filterableAttributeValue}]`)
+  get _allFilterableOptionElements() {
+    return this._actingListbox.querySelectorAll(`[${this.filterableAttributeValue}]:not([data-multiselected])`)
   }
 
   get _visibleOptionElements() {
-    return [ ...this._allOptionElements ].filter(visible)
+    return [ ...this._allFilterableOptionElements ].filter(visible)
   }
 
   get _selectedOptionElement() {
-    return this._actingListbox.querySelector("[role=option][aria-selected=true]")
+    return this._actingListbox.querySelector("[role=option][aria-selected=true]:not([data-multiselected])")
+  }
+
+  get _multiselectedOptionElements() {
+    return this._actingListbox.querySelectorAll("[role=option][data-multiselected]")
   }
 
   get _selectedOptionIndex() {
@@ -32,7 +52,7 @@ Combobox.Options = Base => class extends Base {
   }
 
   get _isUnjustifiablyBlank() {
-    const valueIsMissing = !this.hiddenFieldTarget.value
+    const valueIsMissing = this._hasEmptyFieldValue
     const noBlankOptionSelected = !this._selectedOptionElement
 
     return valueIsMissing && noBlankOptionSelected