hotwire_combobox 0.1.42 → 0.1.43

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1fc3750ecb7bd58bd28e13d0cc2d543ae4c614535c927c9483e504b643171a8d
-  data.tar.gz: dc6482de8a4344a6d801797d497f6adec8afcc0357e821e1dff8188ecf4c2f68
+  metadata.gz: 5d76e27ecc585f8ad3d4d596d2a6f8fe9916909734027d251cb35264604f192e
+  data.tar.gz: eda85b2dd3c21c407c806a5144c4d9b39c40a36c827c7d3b1986a5e27d432cf9
 SHA512:
-  metadata.gz: 8884e9e8295b73d37d15762f08c1a69452a7117f99af09dba4369aedea9af2116bc9683127f6f29535813fa5182b21969eb35e4d077edee1f94ce1a6808aadfe
-  data.tar.gz: b58dd5870a0508912c910b387f7970ffc4a08a16e40612b448e7c35ae244d0f8e02f9dd9356e5cdd8ae7f0c45c1bd65513ece94fcbeba38818c39d39c9ecd870
+  metadata.gz: 2cab9b83d4bf4caf3e741f5c12f336241e77f6eec0c97041f25162ecb4aade0d0c58b3ce59e5772b1e5edb89a2a6ad92051c8237f0d40bcee30e550e692add1b
+  data.tar.gz: 1d40dfa00ae3884e8c44693abfa542859ed27fb4fb124a90264c03a57ade1dcb31865f7d89078ea4304968f3adcaba51905d940c336a29ed860857fc5b6e5f40

data/app/assets/javascripts/controllers/hw_combobox_controller.js

@@ -80,7 +80,7 @@ export default class HwComboboxController extends Concerns(...concerns) {
 
     if (inputType && inputType !== "hw:lockInSelection") {
       if (delay) await sleep(delay)
-      this._commitFilter({ inputType })
+      this._selectBasedOnQuery({ inputType })
     } else {
       this._preselectOption()
     }

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

@@ -37,6 +37,10 @@ Combobox.AsyncLoading = Base => class extends Base {
   get _isAsync() {
     return this.hasAsyncSrcValue
   }
+
+  get _isSync() {
+    return !this._isAsync
+  }
 };
 
 function Concerns(Base, ...mixins) {
@@ -128,16 +132,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);
     }
@@ -236,8 +242,13 @@ Combobox.Dialog = Base => class extends Base {
 };
 
 Combobox.Events = Base => class extends Base {
-  _dispatchSelectionEvent({ isNew }) {
-    dispatch("hw-combobox:selection", { target: this.element, detail: { ...this._eventableDetails, isNew } });
+  _dispatchSelectionEvent({ isNewAndAllowed, previousValue }) {
+    if (previousValue !== this._value) {
+      dispatch("hw-combobox:selection", {
+        target: this.element,
+        detail: { ...this._eventableDetails, isNewAndAllowed, previousValue }
+      });
+    }
   }
 
   _dispatchClosedEvent() {
@@ -246,7 +257,7 @@ Combobox.Events = Base => class extends Base {
 
   get _eventableDetails() {
     return {
-      value: this.hiddenFieldTarget.value,
+      value: this._value,
       display: this._fullQuery,
       query: this._typedQuery,
       fieldName: this.hiddenFieldTarget.name,
@@ -533,20 +544,28 @@ async function get(url, options) {
 // 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);
   }
@@ -561,27 +580,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() {
@@ -675,9 +681,17 @@ Combobox.NewOptions = Base => class extends Base {
 };
 
 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() {
@@ -705,7 +719,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
@@ -714,8 +728,7 @@ Combobox.Options = Base => class extends Base {
 
 Combobox.Selection = Base => class extends Base {
   selectOptionOnClick(event) {
-    this.filter(event);
-    this._select(event.currentTarget, { forceAutocomplete: true });
+    this._forceSelectionAndFilter(event.currentTarget, event);
     this.close();
   }
 
@@ -725,91 +738,136 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _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();
 
-    this._dispatchSelectionEvent({ isNew: false });
+    autocompleteStrategy(option);
+
+    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() {
@@ -1103,7 +1161,10 @@ Combobox.Toggle = Base => class extends Base {
   close() {
     if (this._isOpen) {
       this._lockInSelection();
+      this._clearInvalidQuery();
+
       this.expandedValue = false;
+
       this._dispatchClosedEvent();
     }
   }
@@ -1173,6 +1234,8 @@ Combobox.Toggle = Base => class extends Base {
     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
 
@@ -1213,6 +1276,13 @@ Combobox.Toggle = Base => class extends Base {
     enableBodyScroll(this.dialogListboxTarget);
   }
 
+  _clearInvalidQuery() {
+    if (this._isUnjustifiablyBlank) {
+      this._deselect();
+      this._clearQuery();
+    }
+  }
+
   get _isOpen() {
     return this.expandedValue
   }
@@ -1256,7 +1326,7 @@ Combobox.Validity = Base => class extends Base {
   // +_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
   }
 };
@@ -1339,7 +1409,7 @@ class HwComboboxController extends Concerns(...concerns) {
 
     if (inputType && inputType !== "hw:lockInSelection") {
       if (delay) await sleep(delay);
-      this._commitFilter({ inputType });
+      this._selectBasedOnQuery({ inputType });
     } else {
       this._preselectOption();
     }

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,8 +246,13 @@
   };
 
   Combobox.Events = Base => class extends Base {
-    _dispatchSelectionEvent({ isNew }) {
-      dispatch("hw-combobox:selection", { target: this.element, detail: { ...this._eventableDetails, isNew } });
+    _dispatchSelectionEvent({ isNewAndAllowed, previousValue }) {
+      if (previousValue !== this._value) {
+        dispatch("hw-combobox:selection", {
+          target: this.element,
+          detail: { ...this._eventableDetails, isNewAndAllowed, previousValue }
+        });
+      }
     }
 
     _dispatchClosedEvent() {
@@ -250,7 +261,7 @@
 
     get _eventableDetails() {
       return {
-        value: this.hiddenFieldTarget.value,
+        value: this._value,
         display: this._fullQuery,
         query: this._typedQuery,
         fieldName: this.hiddenFieldTarget.name,
@@ -537,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);
     }
@@ -565,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() {
@@ -679,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() {
@@ -709,7 +723,7 @@
     }
 
     get _isUnjustifiablyBlank() {
-      const valueIsMissing = !this.hiddenFieldTarget.value;
+      const valueIsMissing = !this._value;
       const noBlankOptionSelected = !this._selectedOptionElement;
 
       return valueIsMissing && noBlankOptionSelected
@@ -718,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();
     }
 
@@ -729,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();
 
-      this._dispatchSelectionEvent({ isNew: false });
+      autocompleteStrategy(option);
+
+      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() {
@@ -1107,7 +1165,10 @@
     close() {
       if (this._isOpen) {
         this._lockInSelection();
+        this._clearInvalidQuery();
+
         this.expandedValue = false;
+
         this._dispatchClosedEvent();
       }
     }
@@ -1177,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
 
@@ -1217,6 +1280,13 @@
       enableBodyScroll(this.dialogListboxTarget);
     }
 
+    _clearInvalidQuery() {
+      if (this._isUnjustifiablyBlank) {
+        this._deselect();
+        this._clearQuery();
+      }
+    }
+
     get _isOpen() {
       return this.expandedValue
     }
@@ -1260,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
     }
   };
@@ -1343,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,8 +2,13 @@ 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 } })
+  _dispatchSelectionEvent({ isNewAndAllowed, previousValue }) {
+    if (previousValue !== this._value) {
+      dispatch("hw-combobox:selection", {
+        target: this.element,
+        detail: { ...this._eventableDetails, isNewAndAllowed, previousValue }
+      })
+    }
   }
 
   _dispatchClosedEvent() {
@@ -12,7 +17,7 @@ Combobox.Events = Base => class extends Base {
 
   get _eventableDetails() {
     return {
-      value: this.hiddenFieldTarget.value,
+      value: this._value,
       display: this._fullQuery,
       query: this._typedQuery,
       fieldName: this.hiddenFieldTarget.name,

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

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

@@ -1,10 +1,9 @@
 import Combobox from "hw_combobox/models/combobox/base"
-import { wrapAroundAccess } from "hw_combobox/helpers"
+import { wrapAroundAccess, isDeleteEvent } from "hw_combobox/helpers"
 
 Combobox.Selection = Base => class extends Base {
   selectOptionOnClick(event) {
-    this.filter(event)
-    this._select(event.currentTarget, { forceAutocomplete: true })
+    this._forceSelectionAndFilter(event.currentTarget, event)
     this.close()
   }
 
@@ -14,91 +13,143 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _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 {
+      // When selecting from an async dialog listbox: selection is forced, the listbox is filtered,
+      // and the dialog is closed. Filtering ends with an `endOfOptionsStream` target connected
+      // to the now invisible combobox, which is now closed because Turbo waits for "nextRepaint"
+      // before rendering turbo streams. This ultimately calls +_selectBasedOnQuery+. We do want
+      // to call +_selectBasedOnQuery+ in this case to account for e.g. selection of
+      // new options. But we will noop here if it's none of the cases checked above.
     }
   }
 
-  _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()
 
-    this._dispatchSelectionEvent({ isNew: false })
+    autocompleteStrategy(option)
+
+    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 })
+  }
+
+  _forceSelectionAndFilter(option, event) {
+    this._forceSelectionWithoutFiltering(option)
+    this._filter(event)
+  }
 
-    this._dispatchSelectionEvent({ isNew: true })
+  _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() {

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

@@ -9,7 +9,10 @@ Combobox.Toggle = Base => class extends Base {
   close() {
     if (this._isOpen) {
       this._lockInSelection()
+      this._clearInvalidQuery()
+
       this.expandedValue = false
+
       this._dispatchClosedEvent()
     }
   }
@@ -79,6 +82,8 @@ Combobox.Toggle = Base => class extends Base {
     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
 
@@ -119,6 +124,13 @@ Combobox.Toggle = Base => class extends Base {
     enableBodyScroll(this.dialogListboxTarget)
   }
 
+  _clearInvalidQuery() {
+    if (this._isUnjustifiablyBlank) {
+      this._deselect()
+      this._clearQuery()
+    }
+  }
+
   get _isOpen() {
     return this.expandedValue
   }

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

@@ -34,7 +34,7 @@ Combobox.Validity = Base => class extends Base {
   // +_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
   }
 }

data/app/presenters/hotwire_combobox/component.rb

@@ -266,7 +266,7 @@ class HotwireCombobox::Component
       combobox_attrs.fetch(:data, {}).merge \
         action: "
           focus->hw-combobox#open
-          input->hw-combobox#filter
+          input->hw-combobox#filterAndSelect
           keydown->hw-combobox#navigate
           click@window->hw-combobox#closeOnClickOutside
           focusin@window->hw-combobox#closeOnFocusOutside
@@ -316,7 +316,7 @@ class HotwireCombobox::Component
     def dialog_input_data
       {
         action: "
-          input->hw-combobox#filter
+          input->hw-combobox#filterAndSelect
           keydown->hw-combobox#navigate
           click@window->hw-combobox#closeOnClickOutside".squish,
         hw_combobox_target: "dialogCombobox"

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.42"
+  VERSION = "0.1.43"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.42
+  version: 0.1.43
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-14 00:00:00.000000000 Z
+date: 2024-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails