hotwire_combobox 0.1.43 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d76e27ecc585f8ad3d4d596d2a6f8fe9916909734027d251cb35264604f192e
-  data.tar.gz: eda85b2dd3c21c407c806a5144c4d9b39c40a36c827c7d3b1986a5e27d432cf9
+  metadata.gz: 9649cc031cc63f665e78c4f72857f72698d42af893d8204cab739a5817be27b8
+  data.tar.gz: f9e791cc61927caebd9db3c32cf3e71382f6d77e4f54c8275348b02600fce8d4
 SHA512:
-  metadata.gz: 2cab9b83d4bf4caf3e741f5c12f336241e77f6eec0c97041f25162ecb4aade0d0c58b3ce59e5772b1e5edb89a2a6ad92051c8237f0d40bcee30e550e692add1b
-  data.tar.gz: 1d40dfa00ae3884e8c44693abfa542859ed27fb4fb124a90264c03a57ade1dcb31865f7d89078ea4304968f3adcaba51905d940c336a29ed860857fc5b6e5f40
+  metadata.gz: 5f6c132e19554295758e13763663a6e0d3b0e7a0a413088a25aed723370dd5967133af3e2660e9ef4ecb16d661f39232bb36ac9c08c37531b36677f2a8c0d961
+  data.tar.gz: 6461c5650345338c17dd33dd378575d5376e2b31ed9466aa4b527096ae831db8feac8b73f357dc8da7908dd7e41aeed1a6750bd9bc1cd570c6e5634562aca0f9

data/README.md

@@ -4,7 +4,7 @@
 
 # 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)
+[![CI](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci.yml/badge.svg)](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci.yml) [![Gem Version](https://badge.fury.io/rb/hotwire_combobox.svg)](https://badge.fury.io/rb/hotwire_combobox)
 
 
 > [!IMPORTANT]
@@ -122,6 +122,7 @@ These are the exceptions:
 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.
 
 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/javascripts/controllers/hw_combobox_controller.js

@@ -7,11 +7,14 @@ window.HOTWIRE_COMBOBOX_STREAM_DELAY = 0 // ms, for testing purposes
 const concerns = [
   Controller,
   Combobox.Actors,
+  Combobox.Announcements,
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
   Combobox.Dialog,
   Combobox.Events,
   Combobox.Filtering,
+  Combobox.FormField,
+  Combobox.Multiselect,
   Combobox.Navigation,
   Combobox.NewOptions,
   Combobox.Options,
@@ -27,7 +30,10 @@ export default class HwComboboxController extends Concerns(...concerns) {
   ]
 
   static targets = [
+    "announcer",
     "combobox",
+    "chipDismisser",
+    "closer",
     "dialog",
     "dialogCombobox",
     "dialogFocusTrap",
@@ -48,15 +54,21 @@ export default class HwComboboxController extends Concerns(...concerns) {
     nameWhenNew: String,
     originalName: String,
     prefilledDisplay: String,
+    selectionChipSrc: String,
     smallViewportMaxWidth: String
   }
 
   initialize() {
     this._initializeActors()
     this._initializeFiltering()
+    this._initializeMultiselect()
   }
 
   connect() {
+    this.idempotentConnect()
+  }
+
+  idempotentConnect() {
     this._connectSelection()
     this._connectListAutocomplete()
     this._connectDialog()
@@ -78,11 +90,25 @@ export default class HwComboboxController extends Concerns(...concerns) {
     const inputType = element.dataset.inputType
     const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY
 
-    if (inputType && inputType !== "hw:lockInSelection") {
+    this._resetMultiselectionMarks()
+
+    if (inputType === "hw:multiselectSync") {
+      this.openByFocusing()
+    } else if (inputType && inputType !== "hw:lockInSelection") {
       if (delay) await sleep(delay)
-      this._selectBasedOnQuery({ inputType })
+      this._selectOnQuery(inputType)
     } else {
-      this._preselectOption()
+      this._preselectSingle()
     }
   }
+
+  closerTargetConnected() {
+    this._closeAndBlur("hw:asyncCloser")
+  }
+
+  // Use +_printStack+ for debugging purposes
+  _printStack() {
+    const err = new Error()
+    console.log(err.stack || err.stacktrace)
+  }
 }