hotwire_combobox 0.1.41 → 0.1.43

data/app/assets/javascripts/hotwire_combobox.umd.js

@@ -41,6 +41,10 @@
     get _isAsync() {
       return this.hasAsyncSrcValue
     }
+
+    get _isSync() {
+      return !this._isAsync
+    }
   };
 
   function Concerns(Base, ...mixins) {
@@ -132,16 +136,18 @@
       }
     }
 
-    _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);
       }
@@ -240,17 +246,27 @@
   };
 
   Combobox.Events = Base => class extends Base {
-    _dispatchSelectionEvent({ isNew }) {
-      const detail = {
-        value: this.hiddenFieldTarget.value,
+    _dispatchSelectionEvent({ isNewAndAllowed, previousValue }) {
+      if (previousValue !== this._value) {
+        dispatch("hw-combobox:selection", {
+          target: this.element,
+          detail: { ...this._eventableDetails, isNewAndAllowed, previousValue }
+        });
+      }
+    }
+
+    _dispatchClosedEvent() {
+      dispatch("hw-combobox:closed", { target: this.element, detail: this._eventableDetails });
+    }
+
+    get _eventableDetails() {
+      return {
+        value: this._value,
         display: this._fullQuery,
         query: this._typedQuery,
         fieldName: this.hiddenFieldTarget.name,
-        isValid: this._valueIsValid,
-        isNew: isNew
-      };
-
-      dispatch("hw-combobox:selection", { target: this.element, detail });
+        isValid: this._valueIsValid
+      }
     }
   };
 
@@ -532,20 +548,28 @@
   // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
   Combobox.Filtering = Base => class extends Base {
-    filter(event) {
+    filterAndSelect(event) {
+      this._filter(event);
+
+      if (this._isSync) {
+        this._selectBasedOnQuery(event);
+      }
+    }
+
+    _initializeFiltering() {
+      this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this));
+    }
+
+    _filter(event) {
       if (this._isAsync) {
         this._debouncedFilterAsync(event);
       } else {
-        this._filterSync(event);
+        this._filterSync();
       }
 
       this._actingCombobox.toggleAttribute("data-queried", this._isQueried);
     }
 
-    _initializeFiltering() {
-      this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this));
-    }
-
     _debouncedFilterAsync(event) {
       this._filterAsync(event);
     }
@@ -560,27 +584,14 @@
       await get(this.asyncSrcValue, { responseKind: "turbo-stream", query });
     }
 
-    _filterSync(event) {
+    _filterSync() {
       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]);
-      }
     }
 
     _clearQuery() {
       this._fullQuery = "";
-      this.filter({ inputType: "deleteContentBackward" });
+      this.filterAndSelect({ inputType: "deleteContentBackward" });
     }
 
     get _isQueried() {
@@ -674,9 +685,17 @@
   };
 
   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._setName(this.originalNameValue);
+      deselectionStrategy();
     }
 
     get _allowNew() {
@@ -704,7 +723,7 @@
     }
 
     get _isUnjustifiablyBlank() {
-      const valueIsMissing = !this.hiddenFieldTarget.value;
+      const valueIsMissing = !this._value;
       const noBlankOptionSelected = !this._selectedOptionElement;
 
       return valueIsMissing && noBlankOptionSelected
@@ -713,8 +732,7 @@
 
   Combobox.Selection = Base => class extends Base {
     selectOptionOnClick(event) {
-      this.filter(event);
-      this._select(event.currentTarget, { forceAutocomplete: true });
+      this._forceSelectionAndFilter(event.currentTarget, event);
       this.close();
     }
 
@@ -724,91 +742,136 @@
       }
     }
 
-    _select(option, { forceAutocomplete = false } = {}) {
-      this._resetOptions();
-
-      if (option) {
-        this._autocompleteWith(option, { force: forceAutocomplete });
-        this._commitSelection(option, { selected: true });
-        this._markValid();
-      } else {
+    _selectBasedOnQuery(event) {
+      if (this._shouldTreatAsNewOptionForFiltering(!isDeleteEvent(event))) {
+        this._selectNew();
+      } else if (isDeleteEvent(event)) {
+        this._deselect();
+      } else if (event.inputType === "hw:lockInSelection" && this._ensurableOption) {
+        this._selectAndAutocompleteMissingPortion(this._ensurableOption);
+      } else if (this._isOpen && this._visibleOptionElements[0]) {
+        this._selectAndAutocompleteMissingPortion(this._visibleOptionElements[0]);
+      } else if (this._isOpen) {
+        this._resetOptionsAndNotify();
         this._markInvalid();
-      }
+      } else ;
     }
 
-    _commitSelection(option, { selected }) {
-      this._markSelected(option, { selected });
+    _select(option, autocompleteStrategy) {
+      const previousValue = this._value;
 
-      if (selected) {
-        this.hiddenFieldTarget.value = option.dataset.value;
-        option.scrollIntoView({ block: "nearest" });
-      }
+      this._resetOptionsSilently();
+
+      autocompleteStrategy(option);
 
-      this._dispatchSelectionEvent({ isNew: false });
+      this._setValue(option.dataset.value);
+      this._markSelected(option);
+      this._markValid();
+      this._dispatchSelectionEvent({ isNewAndAllowed: false, previousValue: previousValue });
+
+      option.scrollIntoView({ block: "nearest" });
     }
 
-    _markSelected(option, { selected }) {
-      if (this.hasSelectedClass) {
-        option.classList.toggle(this.selectedClass, selected);
-      }
+    _selectNew() {
+      const previousValue = this._value;
 
-      option.setAttribute("aria-selected", selected);
-      this._setActiveDescendant(selected ? option.id : "");
+      this._resetOptionsSilently();
+      this._setValue(this._fullQuery);
+      this._setName(this.nameWhenNewValue);
+      this._markValid();
+      this._dispatchSelectionEvent({ isNewAndAllowed: true, previousValue: previousValue });
     }
 
     _deselect() {
-      const option = this._selectedOptionElement;
+      const previousValue = this._value;
 
-      if (option) this._commitSelection(option, { selected: false });
+      if (this._selectedOptionElement) {
+        this._markNotSelected(this._selectedOptionElement);
+      }
 
-      this.hiddenFieldTarget.value = null;
+      this._setValue(null);
       this._setActiveDescendant("");
 
-      if (!option) this._dispatchSelectionEvent({ isNew: false });
+      return previousValue
     }
 
-    _selectNew() {
-      this._resetOptions();
-      this.hiddenFieldTarget.value = this._fullQuery;
-      this.hiddenFieldTarget.name = this.nameWhenNewValue;
-      this._markValid();
+    _deselectAndNotify() {
+      const previousValue = this._deselect();
+      this._dispatchSelectionEvent({ isNewAndAllowed: false, previousValue: previousValue });
+    }
 
-      this._dispatchSelectionEvent({ isNew: true });
+    _forceSelectionAndFilter(option, event) {
+      this._forceSelectionWithoutFiltering(option);
+      this._filter(event);
+    }
+
+    _forceSelectionWithoutFiltering(option) {
+      this._selectAndReplaceFullQuery(option);
     }
 
     _selectIndex(index) {
       const option = wrapAroundAccess(this._visibleOptionElements, index);
-      this._select(option, { forceAutocomplete: true });
+      this._forceSelectionWithoutFiltering(option);
     }
 
     _preselectOption() {
       if (this._hasValueButNoSelection && this._allOptions.length < 100) {
         const option = this._allOptions.find(option => {
-          return option.dataset.value === this.hiddenFieldTarget.value
+          return option.dataset.value === this._value
         });
 
-        if (option) this._markSelected(option, { selected: true });
+        if (option) this._markSelected(option);
       }
     }
 
+    _selectAndReplaceFullQuery(option) {
+      this._select(option, this._replaceFullQueryWithAutocompletedValue.bind(this));
+    }
+
+    _selectAndAutocompleteMissingPortion(option) {
+      this._select(option, this._autocompleteMissingPortion.bind(this));
+    }
+
     _lockInSelection() {
       if (this._shouldLockInSelection) {
-        this._select(this._ensurableOption, { forceAutocomplete: true });
-        this.filter({ inputType: "hw:lockInSelection" });
+        this._forceSelectionAndFilter(this._ensurableOption, { inputType: "hw:lockInSelection" });
       }
+    }
 
-      if (this._isUnjustifiablyBlank) {
-        this._deselect();
-        this._clearQuery();
-      }
+    _markSelected(option) {
+      if (this.hasSelectedClass) option.classList.add(this.selectedClass);
+      option.setAttribute("aria-selected", true);
+      this._setActiveDescendant(option.id);
+    }
+
+    _markNotSelected(option) {
+      if (this.hasSelectedClass) option.classList.remove(this.selectedClass);
+      option.removeAttribute("aria-selected");
+      this._removeActiveDescendant();
     }
 
     _setActiveDescendant(id) {
       this._forAllComboboxes(el => el.setAttribute("aria-activedescendant", id));
     }
 
+    _removeActiveDescendant() {
+      this._setActiveDescendant("");
+    }
+
+    _setValue(value) {
+      this.hiddenFieldTarget.value = value;
+    }
+
+    _setName(value) {
+      this.hiddenFieldTarget.name = value;
+    }
+
+    get _value() {
+      return this.hiddenFieldTarget.value
+    }
+
     get _hasValueButNoSelection() {
-      return this.hiddenFieldTarget.value && !this._selectedOptionElement
+      return this._value && !this._selectedOptionElement
     }
 
     get _shouldLockInSelection() {
@@ -1102,7 +1165,11 @@
     close() {
       if (this._isOpen) {
         this._lockInSelection();
+        this._clearInvalidQuery();
+
         this.expandedValue = false;
+
+        this._dispatchClosedEvent();
       }
     }
 
@@ -1171,6 +1238,8 @@
       this._actingCombobox.setAttribute("aria-expanded", true); // needs to happen after setting acting combobox
     }
 
+    // +._collapse()+ differs from `.close()` in that it might be called by stimulus on connect because
+    // it interprets a change in `expandedValue` — whereas `.close()` is only called internally by us.
     _collapse() {
       this._actingCombobox.setAttribute("aria-expanded", false); // needs to happen before resetting acting combobox
 
@@ -1211,6 +1280,13 @@
       enableBodyScroll(this.dialogListboxTarget);
     }
 
+    _clearInvalidQuery() {
+      if (this._isUnjustifiablyBlank) {
+        this._deselect();
+        this._clearQuery();
+      }
+    }
+
     get _isOpen() {
       return this.expandedValue
     }
@@ -1254,7 +1330,7 @@
     // +_valueIsInvalid+ only checks if `comboboxTarget` (and not `_actingCombobox`) is required
     // because the `required` attribute is only forwarded to the `comboboxTarget` element
     get _valueIsInvalid() {
-      const isRequiredAndEmpty = this.comboboxTarget.required && !this.hiddenFieldTarget.value;
+      const isRequiredAndEmpty = this.comboboxTarget.required && !this._value;
       return isRequiredAndEmpty
     }
   };
@@ -1337,7 +1413,7 @@
 
       if (inputType && inputType !== "hw:lockInSelection") {
         if (delay) await sleep(delay);
-        this._commitFilter({ inputType });
+        this._selectBasedOnQuery({ inputType });
       } else {
         this._preselectOption();
       }

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/events.js

@@ -2,16 +2,26 @@ import Combobox from "hw_combobox/models/combobox/base"
 import { dispatch } from "hw_combobox/helpers"
 
 Combobox.Events = Base => class extends Base {
-  _dispatchSelectionEvent({ isNew }) {
-    const detail = {
-      value: this.hiddenFieldTarget.value,
+  _dispatchSelectionEvent({ isNewAndAllowed, previousValue }) {
+    if (previousValue !== this._value) {
+      dispatch("hw-combobox:selection", {
+        target: this.element,
+        detail: { ...this._eventableDetails, isNewAndAllowed, previousValue }
+      })
+    }
+  }
+
+  _dispatchClosedEvent() {
+    dispatch("hw-combobox:closed", { target: this.element, detail: this._eventableDetails })
+  }
+
+  get _eventableDetails() {
+    return {
+      value: this._value,
       display: this._fullQuery,
       query: this._typedQuery,
       fieldName: this.hiddenFieldTarget.name,
-      isValid: this._valueIsValid,
-      isNew: isNew
+      isValid: this._valueIsValid
     }
-
-    dispatch("hw-combobox:selection", { target: this.element, detail })
   }
 }

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

@@ -1,23 +1,33 @@
 
 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(event) {
+    this._filter(event)
+
+    if (this._isSync) {
+      this._selectBasedOnQuery(event)
     } 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))
   }
 
+  _filter(event) {
+    if (this._isAsync) {
+      this._debouncedFilterAsync(event)
+    } else {
+      this._filterSync()
+    }
+
+    this._actingCombobox.toggleAttribute("data-queried", this._isQueried)
+  }
+
   _debouncedFilterAsync(event) {
     this._filterAsync(event)
   }
@@ -32,27 +42,14 @@ Combobox.Filtering = Base => class extends Base {
     await get(this.asyncSrcValue, { responseKind: "turbo-stream", query })
   }
 
-  _filterSync(event) {
+  _filterSync() {
     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])
-    }
   }
 
   _clearQuery() {
     this._fullQuery = ""
-    this.filter({ inputType: "deleteContentBackward" })
+    this.filterAndSelect({ inputType: "deleteContentBackward" })
   }
 
   get _isQueried() {

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

@@ -2,9 +2,17 @@ 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._setName(this.originalNameValue)
+    deselectionStrategy()
   }
 
   get _allowNew() {
@@ -32,7 +40,7 @@ Combobox.Options = Base => class extends Base {
   }
 
   get _isUnjustifiablyBlank() {
-    const valueIsMissing = !this.hiddenFieldTarget.value
+    const valueIsMissing = !this._value
     const noBlankOptionSelected = !this._selectedOptionElement
 
     return valueIsMissing && noBlankOptionSelected