hotwire_combobox 0.1.38 → 0.1.39

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8218e50f0e61c4bda1ea76e874cb44b2dd003a49c52965ead080d0ddd6fdb1ba
-  data.tar.gz: 0dfad8d8e83525305406bc4afa0f7c687fa82fe5277e9768f22f9e1638b9b677
+  metadata.gz: 49f81dc7ada4155b100cf7043fbb8b02a10f0e29c636bc1ba4b1f97bb0f3427f
+  data.tar.gz: 785782d46ca4d70fc2b8463d0c9812a0d1ea2009c21274469457cf313a4d59b2
 SHA512:
-  metadata.gz: 1f38007adfe6dd93118590f8207d37c98ff3069bc29846f674e4e4dd18b97a5a60d5f21c0c80f7bc86ff34837ef3cf7eb81683d05cd179f192a3c63182574c9c
-  data.tar.gz: 67d63843c03f7e304cdd11d0646dd245cc07f590af7d4b2593b18a599f4184a64ee483237b369c86697c18a0c7e823a2e424d516fdf26f8c383acdac8aa3a2ae
+  metadata.gz: 0dac85e0c02124f5e1c6aee86fa3f06bda5b9434b2df5953e6992bc7df70ddaec4e4e252ce16ac7140a9d09edb9d1cb257c364f26cf21b41bf500a544614cb27
+  data.tar.gz: 8e63361787fac58a9a624bccd4a14e6939d26b95d18d87a5852016ff13d8e3afa7c217bc9d4b1e8ada89a3b0aa0935f8b006f845c54ce82531b069563db28353

data/README.md

@@ -2,7 +2,7 @@
   <img src="docs/assets/images/logo.png" height=150>
 </p>
 
-# Easy Autocomplete for Ruby on Rails
+# Easy and Accessible Autocomplete for Ruby on Rails
 
 [![CI Tests](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci_tests.yml/badge.svg)](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci_tests.yml) [![Gem Version](https://badge.fury.io/rb/hotwire_combobox.svg)](https://badge.fury.io/rb/hotwire_combobox)
 

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

@@ -10,6 +10,7 @@ const concerns = [
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
   Combobox.Dialog,
+  Combobox.Events,
   Combobox.Filtering,
   Combobox.Navigation,
   Combobox.NewOptions,

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

@@ -104,6 +104,23 @@ function unselectedPortion(element) {
   }
 }
 
+function dispatch(eventName, { target, cancelable, detail } = {}) {
+  const event = new CustomEvent(eventName, {
+    cancelable,
+    bubbles: true,
+    composed: true,
+    detail
+  });
+
+  if (target && target.isConnected) {
+    target.dispatchEvent(event);
+  } else {
+    document.documentElement.dispatchEvent(event);
+  }
+
+  return event
+}
+
 Combobox.Autocomplete = Base => class extends Base {
   _connectListAutocomplete() {
     if (!this._autocompletesList) {
@@ -157,6 +174,12 @@ Combobox.Autocomplete = Base => class extends Base {
 };
 
 Combobox.Dialog = Base => class extends Base {
+  rerouteListboxStreamToDialog({ detail: { newStream } }) {
+    if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
+      newStream.setAttribute("target", this.dialogListboxTarget.id);
+    }
+  }
+
   _connectDialog() {
     if (window.visualViewport) {
       window.visualViewport.addEventListener("resize", this._resizeDialog);
@@ -206,6 +229,25 @@ Combobox.Dialog = Base => class extends Base {
   get _smallViewport() {
     return window.matchMedia(`(max-width: ${this.smallViewportMaxWidthValue})`).matches
   }
+
+  get _dialogIsOpen() {
+    return this.dialogTarget.open
+  }
+};
+
+Combobox.Events = Base => class extends Base {
+  _dispatchSelectionEvent({ isNew }) {
+    const detail = {
+      value: this.hiddenFieldTarget.value,
+      display: this._fullQuery,
+      query: this._typedQuery,
+      fieldName: this.hiddenFieldTarget.name,
+      isValid: this._valueIsValid,
+      isNew: isNew
+    };
+
+    dispatch("hw-combobox:selection", { target: this.element, detail });
+  }
 };
 
 class FetchResponse {
@@ -523,11 +565,16 @@ Combobox.Filtering = Base => class extends Base {
       this._selectNew();
     } else if (isDeleteEvent(event)) {
       this._deselect();
-    } else {
+    } else if (this._isOpen) {
       this._select(this._visibleOptionElements[0]);
     }
   }
 
+  _clearQuery() {
+    this._fullQuery = "";
+    this.filter({ inputType: "deleteContentBackward" });
+  }
+
   get _isQueried() {
     return this._fullQuery.length > 0
   }
@@ -647,6 +694,13 @@ Combobox.Options = Base => class extends Base {
   get _selectedOptionIndex() {
     return [ ...this._visibleOptionElements ].indexOf(this._selectedOptionElement)
   }
+
+  get _isUnjustifiablyBlank() {
+    const valueIsMissing = !this.hiddenFieldTarget.value;
+    const noBlankOptionSelected = !this._selectedOptionElement;
+
+    return valueIsMissing && noBlankOptionSelected
+  }
 };
 
 Combobox.Selection = Base => class extends Base {
@@ -666,9 +720,9 @@ Combobox.Selection = Base => class extends Base {
     this._resetOptions();
 
     if (option) {
-      this._markValid();
       this._autocompleteWith(option, { force: forceAutocomplete });
       this._commitSelection(option, { selected: true });
+      this._markValid();
     } else {
       this._markInvalid();
     }
@@ -681,6 +735,8 @@ Combobox.Selection = Base => class extends Base {
       this.hiddenFieldTarget.value = option.dataset.value;
       option.scrollIntoView({ block: "nearest" });
     }
+
+    this._dispatchSelectionEvent({ isNew: false });
   }
 
   _markSelected(option, { selected }) {
@@ -694,15 +750,22 @@ Combobox.Selection = Base => class extends Base {
 
   _deselect() {
     const option = this._selectedOptionElement;
+
     if (option) this._commitSelection(option, { selected: false });
+
     this.hiddenFieldTarget.value = null;
     this._setActiveDescendant("");
+
+    if (!option) this._dispatchSelectionEvent({ isNew: false });
   }
 
   _selectNew() {
     this._resetOptions();
     this.hiddenFieldTarget.value = this._fullQuery;
     this.hiddenFieldTarget.name = this.nameWhenNewValue;
+    this._markValid();
+
+    this._dispatchSelectionEvent({ isNew: true });
   }
 
   _selectIndex(index) {
@@ -725,6 +788,11 @@ Combobox.Selection = Base => class extends Base {
       this._select(this._ensurableOption, { forceAutocomplete: true });
       this.filter({ inputType: "hw:lockInSelection" });
     }
+
+    if (this._isUnjustifiablyBlank) {
+      this._deselect();
+      this._clearQuery();
+    }
   }
 
   _setActiveDescendant(id) {
@@ -1089,7 +1157,7 @@ Combobox.Toggle = Base => class extends Base {
   _collapse() {
     this._actingCombobox.setAttribute("aria-expanded", false); // needs to happen before resetting acting combobox
 
-    if (this.dialogTarget.open) {
+    if (this._dialogIsOpen) {
       this._closeInDialog();
     } else {
       this._closeInline();
@@ -1139,29 +1207,35 @@ Combobox.Validity = Base => class extends Base {
   _markValid() {
     if (this._valueIsInvalid) return
 
-    if (this.hasInvalidClass) {
-      this.comboboxTarget.classList.remove(this.invalidClass);
-    }
+    this._forAllComboboxes(combobox => {
+      if (this.hasInvalidClass) {
+        combobox.classList.remove(this.invalidClass);
+      }
 
-    this.comboboxTarget.removeAttribute("aria-invalid");
-    this.comboboxTarget.removeAttribute("aria-errormessage");
+      combobox.removeAttribute("aria-invalid");
+      combobox.removeAttribute("aria-errormessage");
+    });
   }
 
   _markInvalid() {
     if (this._valueIsValid) return
 
-    if (this.hasInvalidClass) {
-      this.comboboxTarget.classList.add(this.invalidClass);
-    }
+    this._forAllComboboxes(combobox => {
+      if (this.hasInvalidClass) {
+        combobox.classList.add(this.invalidClass);
+      }
 
-    this.comboboxTarget.setAttribute("aria-invalid", true);
-    this.comboboxTarget.setAttribute("aria-errormessage", `Please select a valid option for ${this.comboboxTarget.name}`);
+      combobox.setAttribute("aria-invalid", true);
+      combobox.setAttribute("aria-errormessage", `Please select a valid option for ${combobox.name}`);
+    });
   }
 
   get _valueIsValid() {
     return !this._valueIsInvalid
   }
 
+  // +_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;
     return isRequiredAndEmpty
@@ -1176,6 +1250,7 @@ const concerns = [
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
   Combobox.Dialog,
+  Combobox.Events,
   Combobox.Filtering,
   Combobox.Navigation,
   Combobox.NewOptions,

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

@@ -108,6 +108,23 @@
     }
   }
 
+  function dispatch(eventName, { target, cancelable, detail } = {}) {
+    const event = new CustomEvent(eventName, {
+      cancelable,
+      bubbles: true,
+      composed: true,
+      detail
+    });
+
+    if (target && target.isConnected) {
+      target.dispatchEvent(event);
+    } else {
+      document.documentElement.dispatchEvent(event);
+    }
+
+    return event
+  }
+
   Combobox.Autocomplete = Base => class extends Base {
     _connectListAutocomplete() {
       if (!this._autocompletesList) {
@@ -161,6 +178,12 @@
   };
 
   Combobox.Dialog = Base => class extends Base {
+    rerouteListboxStreamToDialog({ detail: { newStream } }) {
+      if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
+        newStream.setAttribute("target", this.dialogListboxTarget.id);
+      }
+    }
+
     _connectDialog() {
       if (window.visualViewport) {
         window.visualViewport.addEventListener("resize", this._resizeDialog);
@@ -210,6 +233,25 @@
     get _smallViewport() {
       return window.matchMedia(`(max-width: ${this.smallViewportMaxWidthValue})`).matches
     }
+
+    get _dialogIsOpen() {
+      return this.dialogTarget.open
+    }
+  };
+
+  Combobox.Events = Base => class extends Base {
+    _dispatchSelectionEvent({ isNew }) {
+      const detail = {
+        value: this.hiddenFieldTarget.value,
+        display: this._fullQuery,
+        query: this._typedQuery,
+        fieldName: this.hiddenFieldTarget.name,
+        isValid: this._valueIsValid,
+        isNew: isNew
+      };
+
+      dispatch("hw-combobox:selection", { target: this.element, detail });
+    }
   };
 
   class FetchResponse {
@@ -527,11 +569,16 @@
         this._selectNew();
       } else if (isDeleteEvent(event)) {
         this._deselect();
-      } else {
+      } else if (this._isOpen) {
         this._select(this._visibleOptionElements[0]);
       }
     }
 
+    _clearQuery() {
+      this._fullQuery = "";
+      this.filter({ inputType: "deleteContentBackward" });
+    }
+
     get _isQueried() {
       return this._fullQuery.length > 0
     }
@@ -651,6 +698,13 @@
     get _selectedOptionIndex() {
       return [ ...this._visibleOptionElements ].indexOf(this._selectedOptionElement)
     }
+
+    get _isUnjustifiablyBlank() {
+      const valueIsMissing = !this.hiddenFieldTarget.value;
+      const noBlankOptionSelected = !this._selectedOptionElement;
+
+      return valueIsMissing && noBlankOptionSelected
+    }
   };
 
   Combobox.Selection = Base => class extends Base {
@@ -670,9 +724,9 @@
       this._resetOptions();
 
       if (option) {
-        this._markValid();
         this._autocompleteWith(option, { force: forceAutocomplete });
         this._commitSelection(option, { selected: true });
+        this._markValid();
       } else {
         this._markInvalid();
       }
@@ -685,6 +739,8 @@
         this.hiddenFieldTarget.value = option.dataset.value;
         option.scrollIntoView({ block: "nearest" });
       }
+
+      this._dispatchSelectionEvent({ isNew: false });
     }
 
     _markSelected(option, { selected }) {
@@ -698,15 +754,22 @@
 
     _deselect() {
       const option = this._selectedOptionElement;
+
       if (option) this._commitSelection(option, { selected: false });
+
       this.hiddenFieldTarget.value = null;
       this._setActiveDescendant("");
+
+      if (!option) this._dispatchSelectionEvent({ isNew: false });
     }
 
     _selectNew() {
       this._resetOptions();
       this.hiddenFieldTarget.value = this._fullQuery;
       this.hiddenFieldTarget.name = this.nameWhenNewValue;
+      this._markValid();
+
+      this._dispatchSelectionEvent({ isNew: true });
     }
 
     _selectIndex(index) {
@@ -729,6 +792,11 @@
         this._select(this._ensurableOption, { forceAutocomplete: true });
         this.filter({ inputType: "hw:lockInSelection" });
       }
+
+      if (this._isUnjustifiablyBlank) {
+        this._deselect();
+        this._clearQuery();
+      }
     }
 
     _setActiveDescendant(id) {
@@ -1093,7 +1161,7 @@
     _collapse() {
       this._actingCombobox.setAttribute("aria-expanded", false); // needs to happen before resetting acting combobox
 
-      if (this.dialogTarget.open) {
+      if (this._dialogIsOpen) {
         this._closeInDialog();
       } else {
         this._closeInline();
@@ -1143,29 +1211,35 @@
     _markValid() {
       if (this._valueIsInvalid) return
 
-      if (this.hasInvalidClass) {
-        this.comboboxTarget.classList.remove(this.invalidClass);
-      }
+      this._forAllComboboxes(combobox => {
+        if (this.hasInvalidClass) {
+          combobox.classList.remove(this.invalidClass);
+        }
 
-      this.comboboxTarget.removeAttribute("aria-invalid");
-      this.comboboxTarget.removeAttribute("aria-errormessage");
+        combobox.removeAttribute("aria-invalid");
+        combobox.removeAttribute("aria-errormessage");
+      });
     }
 
     _markInvalid() {
       if (this._valueIsValid) return
 
-      if (this.hasInvalidClass) {
-        this.comboboxTarget.classList.add(this.invalidClass);
-      }
+      this._forAllComboboxes(combobox => {
+        if (this.hasInvalidClass) {
+          combobox.classList.add(this.invalidClass);
+        }
 
-      this.comboboxTarget.setAttribute("aria-invalid", true);
-      this.comboboxTarget.setAttribute("aria-errormessage", `Please select a valid option for ${this.comboboxTarget.name}`);
+        combobox.setAttribute("aria-invalid", true);
+        combobox.setAttribute("aria-errormessage", `Please select a valid option for ${combobox.name}`);
+      });
     }
 
     get _valueIsValid() {
       return !this._valueIsInvalid
     }
 
+    // +_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;
       return isRequiredAndEmpty
@@ -1180,6 +1254,7 @@
     Combobox.AsyncLoading,
     Combobox.Autocomplete,
     Combobox.Dialog,
+    Combobox.Events,
     Combobox.Filtering,
     Combobox.Navigation,
     Combobox.NewOptions,

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

@@ -62,3 +62,20 @@ export function unselectedPortion(element) {
     return element.value.substring(0, element.selectionStart)
   }
 }
+
+export function dispatch(eventName, { target, cancelable, detail } = {}) {
+  const event = new CustomEvent(eventName, {
+    cancelable,
+    bubbles: true,
+    composed: true,
+    detail
+  })
+
+  if (target && target.isConnected) {
+    target.dispatchEvent(event)
+  } else {
+    document.documentElement.dispatchEvent(event)
+  }
+
+  return event
+}

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

@@ -1,6 +1,12 @@
 import Combobox from "hw_combobox/models/combobox/base"
 
 Combobox.Dialog = Base => class extends Base {
+  rerouteListboxStreamToDialog({ detail: { newStream } }) {
+    if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
+      newStream.setAttribute("target", this.dialogListboxTarget.id)
+    }
+  }
+
   _connectDialog() {
     if (window.visualViewport) {
       window.visualViewport.addEventListener("resize", this._resizeDialog)
@@ -50,4 +56,8 @@ Combobox.Dialog = Base => class extends Base {
   get _smallViewport() {
     return window.matchMedia(`(max-width: ${this.smallViewportMaxWidthValue})`).matches
   }
+
+  get _dialogIsOpen() {
+    return this.dialogTarget.open
+  }
 }

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

@@ -0,0 +1,17 @@
+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,
+      display: this._fullQuery,
+      query: this._typedQuery,
+      fieldName: this.hiddenFieldTarget.name,
+      isValid: this._valueIsValid,
+      isNew: isNew
+    }
+
+    dispatch("hw-combobox:selection", { target: this.element, detail })
+  }
+}

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

@@ -41,11 +41,16 @@ Combobox.Filtering = Base => class extends Base {
       this._selectNew()
     } else if (isDeleteEvent(event)) {
       this._deselect()
-    } else {
+    } else if (this._isOpen) {
       this._select(this._visibleOptionElements[0])
     }
   }
 
+  _clearQuery() {
+    this._fullQuery = ""
+    this.filter({ inputType: "deleteContentBackward" })
+  }
+
   get _isQueried() {
     return this._fullQuery.length > 0
   }

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

@@ -30,4 +30,11 @@ Combobox.Options = Base => class extends Base {
   get _selectedOptionIndex() {
     return [ ...this._visibleOptionElements ].indexOf(this._selectedOptionElement)
   }
+
+  get _isUnjustifiablyBlank() {
+    const valueIsMissing = !this.hiddenFieldTarget.value
+    const noBlankOptionSelected = !this._selectedOptionElement
+
+    return valueIsMissing && noBlankOptionSelected
+  }
 }

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

@@ -18,9 +18,9 @@ Combobox.Selection = Base => class extends Base {
     this._resetOptions()
 
     if (option) {
-      this._markValid()
       this._autocompleteWith(option, { force: forceAutocomplete })
       this._commitSelection(option, { selected: true })
+      this._markValid()
     } else {
       this._markInvalid()
     }
@@ -33,6 +33,8 @@ Combobox.Selection = Base => class extends Base {
       this.hiddenFieldTarget.value = option.dataset.value
       option.scrollIntoView({ block: "nearest" })
     }
+
+    this._dispatchSelectionEvent({ isNew: false })
   }
 
   _markSelected(option, { selected }) {
@@ -46,15 +48,22 @@ Combobox.Selection = Base => class extends Base {
 
   _deselect() {
     const option = this._selectedOptionElement
+
     if (option) this._commitSelection(option, { selected: false })
+
     this.hiddenFieldTarget.value = null
     this._setActiveDescendant("")
+
+    if (!option) this._dispatchSelectionEvent({ isNew: false })
   }
 
   _selectNew() {
     this._resetOptions()
     this.hiddenFieldTarget.value = this._fullQuery
     this.hiddenFieldTarget.name = this.nameWhenNewValue
+    this._markValid()
+
+    this._dispatchSelectionEvent({ isNew: true })
   }
 
   _selectIndex(index) {
@@ -77,6 +86,11 @@ Combobox.Selection = Base => class extends Base {
       this._select(this._ensurableOption, { forceAutocomplete: true })
       this.filter({ inputType: "hw:lockInSelection" })
     }
+
+    if (this._isUnjustifiablyBlank) {
+      this._deselect()
+      this._clearQuery()
+    }
   }
 
   _setActiveDescendant(id) {

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

@@ -72,7 +72,7 @@ Combobox.Toggle = Base => class extends Base {
   _collapse() {
     this._actingCombobox.setAttribute("aria-expanded", false) // needs to happen before resetting acting combobox
 
-    if (this.dialogTarget.open) {
+    if (this._dialogIsOpen) {
       this._closeInDialog()
     } else {
       this._closeInline()

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

@@ -4,29 +4,35 @@ Combobox.Validity = Base => class extends Base {
   _markValid() {
     if (this._valueIsInvalid) return
 
-    if (this.hasInvalidClass) {
-      this.comboboxTarget.classList.remove(this.invalidClass)
-    }
-
-    this.comboboxTarget.removeAttribute("aria-invalid")
-    this.comboboxTarget.removeAttribute("aria-errormessage")
+    this._forAllComboboxes(combobox => {
+      if (this.hasInvalidClass) {
+        combobox.classList.remove(this.invalidClass)
+      }
+
+      combobox.removeAttribute("aria-invalid")
+      combobox.removeAttribute("aria-errormessage")
+    })
   }
 
   _markInvalid() {
     if (this._valueIsValid) return
 
-    if (this.hasInvalidClass) {
-      this.comboboxTarget.classList.add(this.invalidClass)
-    }
+    this._forAllComboboxes(combobox => {
+      if (this.hasInvalidClass) {
+        combobox.classList.add(this.invalidClass)
+      }
 
-    this.comboboxTarget.setAttribute("aria-invalid", true)
-    this.comboboxTarget.setAttribute("aria-errormessage", `Please select a valid option for ${this.comboboxTarget.name}`)
+      combobox.setAttribute("aria-invalid", true)
+      combobox.setAttribute("aria-errormessage", `Please select a valid option for ${combobox.name}`)
+    })
   }
 
   get _valueIsValid() {
     return !this._valueIsInvalid
   }
 
+  // +_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
     return isRequiredAndEmpty

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

@@ -4,6 +4,7 @@ import "hw_combobox/models/combobox/actors"
 import "hw_combobox/models/combobox/async_loading"
 import "hw_combobox/models/combobox/autocomplete"
 import "hw_combobox/models/combobox/dialog"
+import "hw_combobox/models/combobox/events"
 import "hw_combobox/models/combobox/filtering"
 import "hw_combobox/models/combobox/navigation"
 import "hw_combobox/models/combobox/new_options"

data/app/presenters/hotwire_combobox/component.rb

@@ -150,7 +150,7 @@ class HotwireCombobox::Component
     end
 
     def fieldset_data
-      data.reverse_merge \
+      data.merge \
         async_id: canonical_id,
         controller: view.token_list("hw-combobox", data[:controller]),
         hw_combobox_expanded_value: open,
@@ -162,7 +162,8 @@ class HotwireCombobox::Component
         hw_combobox_prefilled_display_value: prefilled_display,
         hw_combobox_filterable_attribute_value: "data-filterable-as",
         hw_combobox_autocompletable_attribute_value: "data-autocompletable-as",
-        hw_combobox_selected_class: "hw-combobox__option--selected"
+        hw_combobox_selected_class: "hw-combobox__option--selected",
+        hw_combobox_invalid_class: "hw-combobox__input--invalid"
     end
 
     def prefilled_display
@@ -189,7 +190,7 @@ class HotwireCombobox::Component
 
 
     def canonical_id
-      id || form&.field_id(name) || SecureRandom.uuid
+      @canonical_id ||= id || form&.field_id(name) || SecureRandom.uuid
     end
 
 
@@ -225,19 +226,20 @@ class HotwireCombobox::Component
     end
 
     def input_data
-      combobox_attrs.fetch(:data, {}).reverse_merge! \
+      combobox_attrs.fetch(:data, {}).merge \
         action: "
           focus->hw-combobox#open
           input->hw-combobox#filter
           keydown->hw-combobox#navigate
           click@window->hw-combobox#closeOnClickOutside
-          focusin@window->hw-combobox#closeOnFocusOutside".squish,
+          focusin@window->hw-combobox#closeOnFocusOutside
+          turbo:before-stream-render@document->hw-combobox#rerouteListboxStreamToDialog".squish,
         hw_combobox_target: "combobox",
         async_id: canonical_id
     end
 
     def input_aria
-      combobox_attrs.fetch(:aria, {}).reverse_merge! \
+      combobox_attrs.fetch(:aria, {}).merge \
         controls: listbox_id,
         owns: listbox_id,
         haspopup: "listbox",

data/app/presenters/hotwire_combobox/listbox/option.rb

@@ -32,7 +32,7 @@ class HotwireCombobox::Listbox::Option
     end
 
     def id
-      option.try(:id) || SecureRandom.uuid
+      @id ||= option.try(:id) || SecureRandom.uuid
     end
 
     def data

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.38"
+  VERSION = "0.1.39"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.38
+  version: 0.1.39
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-06 00:00:00.000000000 Z
+date: 2024-03-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,8 +52,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '1.2'
-description: An autocomplete combobox implementation for Ruby on Rails apps using
-  Hotwire.
+description: An accessible autocomplete for Ruby on Rails apps using Hotwire.
 email:
 - jose@farias.mx
 executables: []
@@ -74,6 +73,7 @@ files:
 - app/assets/javascripts/hw_combobox/models/combobox/autocomplete.js
 - app/assets/javascripts/hw_combobox/models/combobox/base.js
 - app/assets/javascripts/hw_combobox/models/combobox/dialog.js
+- app/assets/javascripts/hw_combobox/models/combobox/events.js
 - app/assets/javascripts/hw_combobox/models/combobox/filtering.js
 - app/assets/javascripts/hw_combobox/models/combobox/navigation.js
 - app/assets/javascripts/hw_combobox/models/combobox/new_options.js
@@ -99,13 +99,13 @@ files:
 - lib/hotwire_combobox/engine.rb
 - lib/hotwire_combobox/helper.rb
 - lib/hotwire_combobox/version.rb
-homepage: https://github.com/josefarias/hotwire_combobox
+homepage: https://hotwirecombobox.com/
 licenses:
 - MIT
 metadata:
-  homepage_uri: https://github.com/josefarias/hotwire_combobox
+  homepage_uri: https://hotwirecombobox.com/
   source_code_uri: https://github.com/josefarias/hotwire_combobox
-  changelog_uri: https://github.com/josefarias/hotwire_combobox
+  changelog_uri: https://github.com/josefarias/hotwire_combobox/releases
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -114,7 +114,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
@@ -124,5 +124,5 @@ requirements: []
 rubygems_version: 3.5.6
 signing_key:
 specification_version: 4
-summary: Autocomplete for Rails apps using Hotwire
+summary: Accessible Autocomplete for Rails apps
 test_files: []