hotwire_combobox 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb0eaf3c6593f518473d24ffdb931dc2519adc97c74eb4539055920c3ffd5ef9
-  data.tar.gz: 888c826e85dc6e77b601c89fc4a573a3f45706e51203aadc7edc14b431a50245
+  metadata.gz: 01df7da888bb6651172b141161fcf58610b9c1e1e28e8f20a3bee7d880a9f6cb
+  data.tar.gz: 3ae59ccce1a2782b49759d2797244d8b8084996a8f115b46ac32f10fc22eab39
 SHA512:
-  metadata.gz: 5c2725f7a89aff33a4fa649e37f03f363c28fab51ca930337593897068c5c60732568f8fb6b43e8c7f9cdc9309fdea9dd55298baed2774c50dc0e6041c59b989
-  data.tar.gz: b63c3b6031f3d74190115f5f01152085491125bc5ee0a721c3c1cb0be493993f3dec83b8132424bd471b93ff36f6b248f7f27d0abb34a3821959b6b9a2900fe7
+  metadata.gz: 11e979427daf0c338006be0ab69732fcd4ca7f4860319b54e003730341419b1845069638acab2adaae1c45ecc961cc5216c30791e567cb0abb1dd6fc326ad794
+  data.tar.gz: 9f05dafd9e46f000641a86f11d9d223df4264d4f53b131f6f9be347bdb8356e4800eae22719d99c4b20bb665ce437efac27941ada324e725087801cd6fa5414e

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright 2024 Jose Farias
+Copyright 2025 Jose Farias
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -24,7 +24,7 @@ Finally, configure your assets:
 
 ### Configuring JS
 
-Before continuing, you should know whether your app is using importmaps or JS bundling in your asset pipeline.
+Before continuing, you should know whether your app is using importmaps or JS bundling.
 
 #### Importmaps
 
@@ -35,28 +35,30 @@ In `app/javascript/controllers/index.js` you should have one of the following:
 Either,
 
 ```js
-import { application } from "controllers/application" // or equivalent
+import { application } from "controllers/application"
 import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-
 eagerLoadControllersFrom("controllers", application)
 ```
 
 Or,
 
 ```js
-import { application } from "controllers/application" // or equivalent
+import { application } from "controllers/application"
 import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
-
 lazyLoadControllersFrom("controllers", application)
 ```
 
-Or,
+Alternatively, modify `app/javascript/controllers/application.js` as follows:
 
 ```js
-import { application } from "controllers/application" // or equivalent
+import { Application } from "@hotwired/stimulus"
+const application = Application.start()
 
+// Add the following two lines:
 import HwComboboxController from "controllers/hw_combobox_controller"
 application.register("hw-combobox", HwComboboxController)
+
+export { application }
 ```
 
 #### JS bundling (esbuild, rollup, etc)
@@ -71,13 +73,17 @@ yarn add @josefarias/hotwire_combobox
 npm install @josefarias/hotwire_combobox
 ```
 
-Then, register the library's stimulus controller in `app/javascript/controllers/index.js` as follows:
+Then, register the library's stimulus controller in `app/javascript/controllers/application.js` as follows:
 
 ```js
-import { application } from "./application" // or equivalent
+import { Application } from "@hotwired/stimulus"
+const application = Application.start()
 
+// Add the following two lines:
 import HwComboboxController from "@josefarias/hotwire_combobox"
 application.register("hw-combobox", HwComboboxController)
+
+export { application }
 ```
 
 > [!WARNING]
@@ -85,7 +91,7 @@ application.register("hw-combobox", HwComboboxController)
 
 ### Configuring CSS
 
-This library comes with optional default styles. Follow the instructions below to include them in your app.
+This library comes with customizable default styles. Follow the instructions below to include them in your app.
 
 Read the [docs section](#Docs) for instructions on styling the combobox yourself.
 
@@ -118,11 +124,9 @@ This gem follows the [APG combobox pattern guidelines](https://www.w3.org/WAI/AR
 
 These are the exceptions:
 
-1. Users cannot manipulate the combobox while it's closed. As long as the combobox is focused, the listbox is shown.
-2. The escape key closes the listbox and blurs the combobox. It does not clear the combobox.
-3. The listbox has wrap-around selection. That is, pressing `Up Arrow` when the user is on the first option will select the last option. And pressing `Down Arrow` when on the last option will select the first option. In paginated comboboxes, the first and last options refer to the currently available options. More options may be loaded after navigating to the last currently available option.
-4. It is possible to have an unlabled combobox, as that responsibility is delegated to the implementing user.
-5. There are currently [no APG guidelines](https://github.com/w3c/aria-practices/issues/1512) for a multiselect combobox. We've introduced some mechanisms to make the experience accessible, like announcing multi-selections via a live region. But we'd welcome feedback on how to make it better until official guidelines are available.
+1. The listbox has wrap-around selection. That is, pressing `Up Arrow` when the user is on the first option will select the last option. And pressing `Down Arrow` when on the last option will select the first option. In paginated comboboxes, the first and last options refer to the currently available options. More options may be loaded after navigating to the last currently available option.
+2. It is possible to have an unlabeled combobox, as that responsibility is delegated to the implementing user.
+3. There are currently [no APG guidelines](https://github.com/w3c/aria-practices/issues/1512) for a multiselect combobox. We've introduced some mechanisms to make the experience accessible, like announcing multi-selections via a live region. But we'd welcome feedback on how to make it better until official guidelines are available.
 
 It should be noted none of the maintainers use assistive technologies in their daily lives. If you do, and you feel these exceptions are detrimental to your ability to use the component, or if you find an undocumented exception, please [open a GitHub issue](https://github.com/josefarias/hotwire_combobox/issues). We'll get it sorted.
 

data/app/assets/config/hw_combobox_manifest.js

@@ -1,2 +1,2 @@
 //= link_directory ../stylesheets .css
-//= link_tree ../javascripts .js
+//= link hotwire_combobox.esm.js

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

@@ -1,5 +1,6 @@
 import Combobox from "hw_combobox/models/combobox"
 import { Concerns, sleep } from "hw_combobox/helpers"
+import { nextRepaint } from "hw_combobox/helpers"
 import { Controller } from "@hotwired/stimulus"
 
 window.HOTWIRE_COMBOBOX_STREAM_DELAY = 0 // ms, for testing purposes
@@ -10,6 +11,7 @@ const concerns = [
   Combobox.Announcements,
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
+  Combobox.Callbacks,
   Combobox.Dialog,
   Combobox.Events,
   Combobox.Filtering,
@@ -24,20 +26,13 @@ const concerns = [
 ]
 
 export default class HwComboboxController extends Concerns(...concerns) {
-  static classes = [
-    "invalid",
-    "selected"
-  ]
-
+  static classes = [ "invalid", "selected" ]
   static targets = [
     "announcer",
     "combobox",
     "chipDismisser",
     "closer",
-    "dialog",
-    "dialogCombobox",
-    "dialogFocusTrap",
-    "dialogListbox",
+    "dialog", "dialogCombobox", "dialogFocusTrap", "dialogListbox",
     "endOfOptionsStream",
     "handle",
     "hiddenField",
@@ -61,6 +56,7 @@ export default class HwComboboxController extends Concerns(...concerns) {
   initialize() {
     this._initializeActors()
     this._initializeFiltering()
+    this._initializeCallbacks()
   }
 
   connect() {
@@ -87,23 +83,43 @@ export default class HwComboboxController extends Concerns(...concerns) {
   }
 
   async endOfOptionsStreamTargetConnected(element) {
-    const inputType = element.dataset.inputType
-    const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY
+    if (element.dataset.callbackId) {
+      this._runCallback(element)
+    } else {
+      this._preselectSingle()
+    }
+  }
 
-    this._resetMultiselectionMarks()
+  async _runCallback(element) {
+    const callbackId = element.dataset.callbackId
+
+    if (this._callbackAttemptsExceeded(callbackId)) {
+      return this._dequeueCallback(callbackId)
+    } else {
+      this._recordCallbackAttempt(callbackId)
+    }
+
+    if (this._isNextCallback(callbackId)) {
+      const inputType = element.dataset.inputType
+      const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY
 
-    if (inputType === "hw:multiselectSync") {
-      this.openByFocusing()
-    } else if (inputType && inputType !== "hw:lockInSelection") {
       if (delay) await sleep(delay)
-      this._selectOnQuery(inputType)
+      this._dequeueCallback(callbackId)
+      this._resetMultiselectionMarks()
+
+      if (inputType === "hw:multiselectSync") {
+        this.open()
+      } else if (inputType !== "hw:lockInSelection") {
+        this._selectOnQuery(inputType)
+      }
     } else {
-      this._preselectSingle()
+      await nextRepaint()
+      this._runCallback(element)
     }
   }
 
   closerTargetConnected() {
-    this._closeAndBlur("hw:asyncCloser")
+    this.close("hw:asyncCloser")
   }
 
   // Use +_printStack+ for debugging purposes

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

@@ -1,5 +1,5 @@
 /*!
-HotwireCombobox 0.3.1
+HotwireCombobox 0.4.0
 */
 import { Controller } from '@hotwired/stimulus';
 
@@ -150,6 +150,15 @@ function nextEventLoopTick() {
   return new Promise((resolve) => setTimeout(() => resolve(), 0))
 }
 
+function randomUUID() {
+  const uuidPattern = "10000000-1000-4000-8000-100000000000";
+
+  return uuidPattern.replace(/[018]/g, (match) => {
+    const randomByte = crypto.getRandomValues(new Uint8Array(1))[0];
+    return (match ^ (randomByte & 15) >> (match / 4)).toString(16)
+  })
+}
+
 Combobox.Autocomplete = Base => class extends Base {
   _connectListAutocomplete() {
     if (!this._autocompletesList) {
@@ -157,23 +166,33 @@ Combobox.Autocomplete = Base => class extends Base {
     }
   }
 
-  _replaceFullQueryWithAutocompletedValue(option) {
+  _hardAutocomplete(option) {
+    const typedValue = this._typedQuery;
     const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue);
 
     this._fullQuery = autocompletedValue;
-    this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length);
+
+    if (this._isAutocompletableWith(typedValue, autocompletedValue)) {
+      this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length);
+    } else {
+      this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length);
+    }
   }
 
-  _autocompleteMissingPortion(option) {
+  _softAutocomplete(option) {
     const typedValue = this._typedQuery;
     const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue);
 
-    if (this._autocompletesInline && startsWith(autocompletedValue, typedValue)) {
+    if (this._isAutocompletableWith(typedValue, autocompletedValue)) {
       this._fullQuery = autocompletedValue;
       this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length);
     }
   }
 
+  _isAutocompletableWith(typedValue, autocompletedValue) {
+    return this._autocompletesInline && startsWith(autocompletedValue, typedValue)
+  }
+
   // +visuallyHideListbox+ hides the listbox from the user,
   // but makes it still searchable by JS.
   _visuallyHideListbox() {
@@ -204,6 +223,50 @@ Combobox.Autocomplete = Base => class extends Base {
   }
 };
 
+const MAX_CALLBACK_ATTEMPTS = 3;
+
+Combobox.Callbacks = Base => class extends Base {
+  _initializeCallbacks() {
+    this.callbackQueue = [];
+    this.callbackExecutionAttempts = {};
+  }
+
+  _enqueueCallback() {
+    const callbackId = randomUUID();
+    this.callbackQueue.push(callbackId);
+    return callbackId
+  }
+
+  _isNextCallback(callbackId) {
+    return this._nextCallback === callbackId
+  }
+
+  _callbackAttemptsExceeded(callbackId) {
+    return this._callbackAttempts(callbackId) > MAX_CALLBACK_ATTEMPTS
+  }
+
+  _callbackAttempts(callbackId) {
+    return this.callbackExecutionAttempts[callbackId] || 0
+  }
+
+  _recordCallbackAttempt(callbackId) {
+    this.callbackExecutionAttempts[callbackId] = this._callbackAttempts(callbackId) + 1;
+  }
+
+  _dequeueCallback(callbackId) {
+    this.callbackQueue = this.callbackQueue.filter(id => id !== callbackId);
+    this._forgetCallbackExecutionAttempts(callbackId);
+  }
+
+  _forgetCallbackExecutionAttempts(callbackId) {
+    delete this.callbackExecutionAttempts[callbackId];
+  }
+
+  get _nextCallback() {
+    return this.callbackQueue[0]
+  }
+};
+
 Combobox.Dialog = Base => class extends Base {
   rerouteListboxStreamToDialog({ detail: { newStream } }) {
     if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
@@ -243,10 +306,7 @@ Combobox.Dialog = Base => class extends Base {
 
   _resizeDialog = () => {
     if (window.visualViewport) {
-      this.dialogTarget.style.setProperty(
-        "--hw-visual-viewport-height",
-        `${window.visualViewport.height}px`
-      );
+      this.dialogTarget.style.setProperty("--hw-visual-viewport-height", `${window.visualViewport.height}px`);
     }
   }
 
@@ -584,6 +644,15 @@ async function post(url, options) {
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 Combobox.Filtering = Base => class extends Base {
+  prepareToFilter({ key }) {
+    const intendsToFilter = key.match(/^[a-zA-Z0-9]$|^ArrowDown$/);
+
+    if (this._isClosed && intendsToFilter) {
+      this.open(); // `.open()` sets the appropriate state so the combobox knows it’s open.
+      this._expand(); // `.open()` will call `._expand()` via stimulus callbacks, but we’re calling it inline so it happens immediately.
+    }
+  }
+
   filterAndSelect({ inputType }) {
     this._filter(inputType);
 
@@ -592,6 +661,12 @@ Combobox.Filtering = Base => class extends Base {
     }
   }
 
+  clear(event) {
+    this._clearQuery();
+    this.chipDismisserTargets.forEach(el => el.click());
+    if (event && !event.defaultPrevented) event.target.focus();
+  }
+
   _initializeFiltering() {
     this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this));
   }
@@ -614,19 +689,15 @@ Combobox.Filtering = Base => class extends Base {
     const query = {
       q: this._fullQuery,
       input_type: inputType,
-      for_id: this.element.dataset.asyncId
+      for_id: this.element.dataset.asyncId,
+      callback_id: this._enqueueCallback()
     };
 
     await get(this.asyncSrcValue, { responseKind: "turbo-stream", query });
   }
 
   _filterSync() {
-    this._allFilterableOptionElements.forEach(
-      applyFilter(
-        this._fullQuery,
-        { matching: this.filterableAttributeValue }
-      )
-    );
+    this._allFilterableOptionElements.forEach(applyFilter(this._fullQuery, { matching: this.filterableAttributeValue }));
   }
 
   _clearQuery() {
@@ -635,7 +706,7 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   _markQueried() {
-    this._actingCombobox.toggleAttribute("data-queried", this._isQueried);
+    this._forAllComboboxes(el => el.toggleAttribute("data-queried", this._isQueried));
   }
 
   get _isQueried() {
@@ -708,8 +779,7 @@ Combobox.FormField = Base => class extends Base {
 
   get _hasEmptyFieldValue() {
     if (this._isMultiselect) {
-      return this.hiddenFieldTarget.dataset.valueForMultiselect == "" ||
-        this.hiddenFieldTarget.dataset.valueForMultiselect == "undefined"
+      return this.hiddenFieldTarget.dataset.valueForMultiselect == "" || this.hiddenFieldTarget.dataset.valueForMultiselect == "undefined"
     } else {
       return this.hiddenFieldTarget.value === ""
     }
@@ -751,7 +821,7 @@ Combobox.Multiselect = Base => class extends Base {
     currentTarget.closest("[data-hw-combobox-chip]").remove();
 
     if (!this._isSmallViewport) {
-      this.openByFocusing();
+      this.open();
     }
 
     this._announceToScreenReader(display, "removed");
@@ -776,7 +846,7 @@ Combobox.Multiselect = Base => class extends Base {
       cancel(event);
     },
     Escape: (event) => {
-      this.openByFocusing();
+      this.open();
       cancel(event);
     }
   }
@@ -793,13 +863,16 @@ Combobox.Multiselect = Base => class extends Base {
 
     this._beforeClearingMultiselectQuery(async (display, value) => {
       this._fullQuery = "";
+
       this._filter("hw:multiselectSync");
       this._requestChips(value);
       this._addToFieldValue(value);
+
       if (shouldReopen) {
         await nextRepaint();
-        this.openByFocusing();
+        this.open();
       }
+
       this._announceToScreenReader(display, "multi-selected. Press Shift + Tab, then Enter to remove.");
     });
   }
@@ -915,11 +988,11 @@ Combobox.Navigation = Base => class extends Base {
       cancel(event);
     },
     Enter: (event) => {
-      this._closeAndBlur("hw:keyHandler:enter");
+      this.close("hw:keyHandler:enter");
       cancel(event);
     },
     Escape: (event) => {
-      this._closeAndBlur("hw:keyHandler:escape");
+      this._isOpen ? this.close("hw:keyHandler:escape") : this._clearQuery();
       cancel(event);
     },
     Backspace: (event) => {
@@ -1028,7 +1101,7 @@ Combobox.Options = Base => class extends Base {
 Combobox.Selection = Base => class extends Base {
   selectOnClick({ currentTarget, inputType }) {
     this._forceSelectionAndFilter(currentTarget, inputType);
-    this._closeAndBlur("hw:optionRoleClick");
+    this.close("hw:optionRoleClick");
   }
 
   _connectSelection() {
@@ -1044,9 +1117,9 @@ Combobox.Selection = Base => class extends Base {
     } else if (isDeleteEvent({ inputType: inputType })) {
       this._deselect();
     } else if (inputType === "hw:lockInSelection" && this._ensurableOption) {
-      this._selectAndAutocompleteMissingPortion(this._ensurableOption);
+      this._select(this._ensurableOption, this._softAutocomplete.bind(this));
     } else if (this._isOpen && this._visibleOptionElements[0]) {
-      this._selectAndAutocompleteMissingPortion(this._visibleOptionElements[0]);
+      this._select(this._visibleOptionElements[0], this._softAutocomplete.bind(this));
     } else if (this._isOpen) {
       this._resetOptionsAndNotify();
       this._markInvalid();
@@ -1115,21 +1188,13 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _selectAndAutocompleteMissingPortion(option) {
-    this._select(option, this._autocompleteMissingPortion.bind(this));
-  }
-
-  _selectAndAutocompleteFullQuery(option) {
-    this._select(option, this._replaceFullQueryWithAutocompletedValue.bind(this));
-  }
-
   _forceSelectionAndFilter(option, inputType) {
     this._forceSelectionWithoutFiltering(option);
     this._filter(inputType);
   }
 
   _forceSelectionWithoutFiltering(option) {
-    this._selectAndAutocompleteFullQuery(option);
+    this._select(option, this._hardAutocomplete.bind(this));
   }
 
   _lockInSelection() {
@@ -1458,10 +1523,6 @@ Combobox.Toggle = Base => class extends Base {
     this.expandedValue = true;
   }
 
-  openByFocusing() {
-    this._actingCombobox.focus();
-  }
-
   close(inputType) {
     if (this._isOpen) {
       const shouldReopen = this._isMultiselect &&
@@ -1476,9 +1537,8 @@ Combobox.Toggle = Base => class extends Base {
 
       this.expandedValue = false;
 
-      this._dispatchSelectionEvent();
-
       if (inputType != "hw:keyHandler:escape") {
+        this._dispatchSelectionEvent();
         this._createChip(shouldReopen);
       }
 
@@ -1490,43 +1550,38 @@ Combobox.Toggle = Base => class extends Base {
 
   toggle() {
     if (this.expandedValue) {
-      this._closeAndBlur("hw:toggle");
+      this.close("hw:toggle");
     } else {
-      this.openByFocusing();
+      this.open();
     }
   }
 
   closeOnClickOutside(event) {
     const target = event.target;
 
-    if (!this._isOpen) return
+    if (this._isClosed) return
     if (this.mainWrapperTarget.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
-    this._closeAndBlur("hw:clickOutside");
+    this.close("hw:clickOutside");
   }
 
   closeOnFocusOutside({ target }) {
-    if (!this._isOpen) return
+    if (this._isClosed) return
     if (this.element.contains(target)) return
 
-    this._closeAndBlur("hw:focusOutside");
+    this.close("hw:focusOutside");
   }
 
   clearOrToggleOnHandleClick() {
     if (this._isQueried) {
       this._clearQuery();
-      this._actingCombobox.focus();
+      this.open();
     } else {
       this.toggle();
     }
   }
 
-  _closeAndBlur(inputType) {
-    this.close(inputType);
-    this._actingCombobox.blur();
-  }
-
   // Some browser extensions like 1Password overlay elements on top of the combobox.
   // Hovering over these elements emits a click event for some reason.
   // These events don't contain any telling information, so we use `_withinElementBounds`
@@ -1573,6 +1628,7 @@ Combobox.Toggle = Base => class extends Base {
     this._preventFocusingComboboxAfterClosingDialog();
     this._preventBodyScroll();
     this.dialogTarget.showModal();
+    this._resizeDialog();
   }
 
   _openInline() {
@@ -1608,6 +1664,10 @@ Combobox.Toggle = Base => class extends Base {
   get _isOpen() {
     return this.expandedValue
   }
+
+  get _isClosed() {
+    return !this._isOpen
+  }
 };
 
 Combobox.Validity = Base => class extends Base {
@@ -1657,6 +1717,7 @@ const concerns = [
   Combobox.Announcements,
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
+  Combobox.Callbacks,
   Combobox.Dialog,
   Combobox.Events,
   Combobox.Filtering,
@@ -1671,20 +1732,13 @@ const concerns = [
 ];
 
 class HwComboboxController extends Concerns(...concerns) {
-  static classes = [
-    "invalid",
-    "selected"
-  ]
-
+  static classes = [ "invalid", "selected" ]
   static targets = [
     "announcer",
     "combobox",
     "chipDismisser",
     "closer",
-    "dialog",
-    "dialogCombobox",
-    "dialogFocusTrap",
-    "dialogListbox",
+    "dialog", "dialogCombobox", "dialogFocusTrap", "dialogListbox",
     "endOfOptionsStream",
     "handle",
     "hiddenField",
@@ -1708,6 +1762,7 @@ class HwComboboxController extends Concerns(...concerns) {
   initialize() {
     this._initializeActors();
     this._initializeFiltering();
+    this._initializeCallbacks();
   }
 
   connect() {
@@ -1734,23 +1789,43 @@ class HwComboboxController extends Concerns(...concerns) {
   }
 
   async endOfOptionsStreamTargetConnected(element) {
-    const inputType = element.dataset.inputType;
-    const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY;
+    if (element.dataset.callbackId) {
+      this._runCallback(element);
+    } else {
+      this._preselectSingle();
+    }
+  }
+
+  async _runCallback(element) {
+    const callbackId = element.dataset.callbackId;
 
-    this._resetMultiselectionMarks();
+    if (this._callbackAttemptsExceeded(callbackId)) {
+      return this._dequeueCallback(callbackId)
+    } else {
+      this._recordCallbackAttempt(callbackId);
+    }
+
+    if (this._isNextCallback(callbackId)) {
+      const inputType = element.dataset.inputType;
+      const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY;
 
-    if (inputType === "hw:multiselectSync") {
-      this.openByFocusing();
-    } else if (inputType && inputType !== "hw:lockInSelection") {
       if (delay) await sleep(delay);
-      this._selectOnQuery(inputType);
+      this._dequeueCallback(callbackId);
+      this._resetMultiselectionMarks();
+
+      if (inputType === "hw:multiselectSync") {
+        this.open();
+      } else if (inputType !== "hw:lockInSelection") {
+        this._selectOnQuery(inputType);
+      }
     } else {
-      this._preselectSingle();
+      await nextRepaint();
+      this._runCallback(element);
     }
   }
 
   closerTargetConnected() {
-    this._closeAndBlur("hw:asyncCloser");
+    this.close("hw:asyncCloser");
   }
 
   // Use +_printStack+ for debugging purposes