hotwire_combobox 0.1.35 → 0.1.37

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4b9f936869948e6767d3cdf4f02f226bfe4c3954d57172b37388239884b69ae6
-  data.tar.gz: b5495f56d66183c5ebb6c54a6a8e5278391df921f304b36b9da9ffb3bf752576
+  metadata.gz: 85fbe2e5c1b8d503be62eceae58650266582ac3428be6558c0af8bb76ec5f03c
+  data.tar.gz: f13eb27444b1e530391a8058dc6f00a6d46d9df4af75eb2de2cd28a568851f0b
 SHA512:
-  metadata.gz: 7bb2f124171055bc2b46c7584f31b3ae6426979dd9485645e8364bef559aa86cfa905f62f0db47e79d48db98f42d422b9c8fd9f342729e7da4704385d8544e3b
-  data.tar.gz: 27e49fa1cfd828d23f7dcf82b75a2ba7d7edc4adc8fcff88d35cab8cc41e666f39dffb82209c68740e8b4d9ec9236b1db3513e7c2952cf80cf6f96dc7608a39e
+  metadata.gz: 207509d422415ad6684e08b09690b2244f6fde41e3a9f92a6e90ddf7808f1d0a43d1966f48847c52e133e48e8d81d8139dd2883053dd7b44ed5739d7ab2d62fc
+  data.tar.gz: 184048c9ec147b4d28abf8a3c0d189fa6b73e72a9ef47c6db4c9cf3a595b880287d4e0ddc985d785a38fbce1b9a58279825c46099f800492368ae2cafe349a30

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

@@ -1,7 +1,9 @@
 import Combobox from "hw_combobox/models/combobox"
-import { Concerns } from "hw_combobox/helpers"
+import { Concerns, sleep } from "hw_combobox/helpers"
 import { Controller } from "@hotwired/stimulus"
 
+window.HOTWIRE_COMBOBOX_STREAM_DELAY = 0 // ms, for testing purposes
+
 const concerns = [
   Controller,
   Combobox.Actors,
@@ -70,10 +72,12 @@ export default class HwComboboxController extends Concerns(...concerns) {
     }
   }
 
-  endOfOptionsStreamTargetConnected(element) {
+  async endOfOptionsStreamTargetConnected(element) {
     const inputType = element.dataset.inputType
+    const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY
 
-    if (inputType && inputType !== "hw:ensureSelection") {
+    if (inputType && inputType !== "hw:lockInSelection") {
+      if (delay) await sleep(delay)
       this._commitFilter({ inputType })
     } else {
       this._preselectOption()

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

@@ -37,7 +37,7 @@ export function startsWith(string, substring) {
   return string.toLowerCase().startsWith(substring.toLowerCase())
 }
 
-export function debounce(fn, delay = 300) {
+export function debounce(fn, delay = 150) {
   let timeoutId = null
 
   return (...args) => {
@@ -50,3 +50,15 @@ export function debounce(fn, delay = 300) {
 export function isDeleteEvent(event) {
   return event.inputType === "deleteContentBackward" || event.inputType === "deleteWordBackward"
 }
+
+export function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+export function unselectedPortion(element) {
+  if (element.selectionStart === element.selectionEnd) {
+    return element.value
+  } else {
+    return element.value.substring(0, element.selectionStart)
+  }
+}

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

@@ -6,6 +6,10 @@ Combobox.Actors = Base => class extends Base {
     this._actingCombobox = this.comboboxTarget
   }
 
+  _forAllComboboxes(callback) {
+    this._allComboboxes.forEach(callback)
+  }
+
   get _actingListbox() {
     return this.actingListbox
   }
@@ -21,4 +25,8 @@ Combobox.Actors = Base => class extends Base {
   set _actingCombobox(combobox) {
     this.actingCombobox = combobox
   }
+
+  get _allComboboxes() {
+    return [ this.comboboxTarget, this.dialogComboboxTarget ]
+  }
 }

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

@@ -11,14 +11,14 @@ Combobox.Autocomplete = Base => class extends Base {
   _autocompleteWith(option, { force }) {
     if (!this._autocompletesInline && !force) return
 
-    const typedValue = this._query
+    const typedValue = this._typedQuery
     const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue)
 
     if (force) {
-      this._query = autocompletedValue
+      this._fullQuery = autocompletedValue
       this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
     } else if (startsWith(autocompletedValue, typedValue)) {
-      this._query = autocompletedValue
+      this._fullQuery = autocompletedValue
       this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length)
     }
   }
@@ -30,14 +30,14 @@ Combobox.Autocomplete = Base => class extends Base {
   }
 
   get _isExactAutocompleteMatch() {
-    return this._immediatelyAutocompletableValue === this._query
+    return this._immediatelyAutocompletableValue === this._fullQuery
   }
 
   // All `_isExactAutocompleteMatch` matches are `_isPartialAutocompleteMatch` matches
   // but not all `_isPartialAutocompleteMatch` matches are `_isExactAutocompleteMatch` matches.
   get _isPartialAutocompleteMatch() {
     return !!this._immediatelyAutocompletableValue &&
-      startsWith(this._immediatelyAutocompletableValue, this._query)
+      startsWith(this._immediatelyAutocompletableValue, this._fullQuery)
   }
 
   get _autocompletesList() {
@@ -49,6 +49,6 @@ Combobox.Autocomplete = Base => class extends Base {
   }
 
   get _immediatelyAutocompletableValue() {
-    return this._visibleOptionElements[0]?.getAttribute(this.autocompletableAttributeValue)
+    return this._ensurableOption?.getAttribute(this.autocompletableAttributeValue)
   }
 }

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

@@ -14,7 +14,7 @@ Combobox.Dialog = Base => class extends Base {
   }
 
   _moveArtifactsToDialog() {
-    this.dialogComboboxTarget.value = this._query
+    this.dialogComboboxTarget.value = this._fullQuery
 
     this._actingCombobox = this.dialogComboboxTarget
     this._actingListbox = this.dialogListboxTarget
@@ -23,7 +23,7 @@ Combobox.Dialog = Base => class extends Base {
   }
 
   _moveArtifactsInline() {
-    this.comboboxTarget.value = this._query
+    this.comboboxTarget.value = this._fullQuery
 
     this._actingCombobox = this.comboboxTarget
     this._actingListbox = this.listboxTarget

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

@@ -1,6 +1,6 @@
 
 import Combobox from "hw_combobox/models/combobox/base"
-import { applyFilter, debounce, isDeleteEvent } from "hw_combobox/helpers"
+import { applyFilter, debounce, isDeleteEvent, unselectedPortion } from "hw_combobox/helpers"
 import { get } from "hw_combobox/vendor/requestjs"
 
 Combobox.Filtering = Base => class extends Base {
@@ -21,13 +21,13 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   async _filterAsync(event) {
-    const query = { q: this._query, input_type: event.inputType }
+    const query = { q: this._fullQuery, input_type: event.inputType }
     await get(this.asyncSrcValue, { responseKind: "turbo-stream", query })
   }
 
   _filterSync(event) {
     this.open()
-    this._allOptionElements.forEach(applyFilter(this._query, { matching: this.filterableAttributeValue }))
+    this._allOptionElements.forEach(applyFilter(this._fullQuery, { matching: this.filterableAttributeValue }))
     this._commitFilter(event)
   }
 
@@ -42,16 +42,18 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   get _isQueried() {
-    return this._query.length > 0
+    return this._fullQuery.length > 0
   }
 
-  // Consider +_query+ will contain the full autocompleted value
-  // after a certain point in the call chain.
-  get _query() {
+  get _fullQuery() {
     return this._actingCombobox.value
   }
 
-  set _query(value) {
+  set _fullQuery(value) {
     this._actingCombobox.value = value
   }
+
+  get _typedQuery() {
+    return unselectedPortion(this._actingCombobox)
+  }
 }

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

@@ -10,16 +10,16 @@ Combobox.Selection = Base => class extends Base {
 
   _connectSelection() {
     if (this.hasPrefilledDisplayValue) {
-      this._query = this.prefilledDisplayValue
+      this._fullQuery = this.prefilledDisplayValue
     }
   }
 
-  _select(option, { force = false } = {}) {
+  _select(option, { forceAutocomplete = false } = {}) {
     this._resetOptions()
 
     if (option) {
       this._markValid()
-      this._autocompleteWith(option, { force })
+      this._autocompleteWith(option, { force: forceAutocomplete })
       this._commitSelection(option, { selected: true })
     } else {
       this._markInvalid()
@@ -41,23 +41,25 @@ Combobox.Selection = Base => class extends Base {
     }
 
     option.setAttribute("aria-selected", selected)
+    this._setActiveDescendant(selected ? option.id : "")
   }
 
   _deselect() {
     const option = this._selectedOptionElement
     if (option) this._commitSelection(option, { selected: false })
     this.hiddenFieldTarget.value = null
+    this._setActiveDescendant("")
   }
 
   _selectNew() {
     this._resetOptions()
-    this.hiddenFieldTarget.value = this._query
+    this.hiddenFieldTarget.value = this._fullQuery
     this.hiddenFieldTarget.name = this.nameWhenNewValue
   }
 
   _selectIndex(index) {
     const option = wrapAroundAccess(this._visibleOptionElements, index)
-    this._select(option, { force: true })
+    this._select(option, { forceAutocomplete: true })
   }
 
   _preselectOption() {
@@ -70,18 +72,22 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _ensureSelection() {
-    if (this._shouldEnsureSelection) {
-      this._select(this._ensurableOption, { force: true })
-      this.filter({ inputType: "hw:ensureSelection" })
+  _lockInSelection() {
+    if (this._shouldLockInSelection) {
+      this._select(this._ensurableOption, { forceAutocomplete: true })
+      this.filter({ inputType: "hw:lockInSelection" })
     }
   }
 
+  _setActiveDescendant(id) {
+    this._forAllComboboxes(el => el.setAttribute("aria-activedescendant", id))
+  }
+
   get _hasValueButNoSelection() {
     return this.hiddenFieldTarget.value && !this._selectedOptionElement
   }
 
-  get _shouldEnsureSelection() {
+  get _shouldLockInSelection() {
     return this._isQueried && !!this._ensurableOption && !this._isNewOptionWithPotentialMatches
   }
 

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

@@ -8,7 +8,7 @@ Combobox.Toggle = Base => class extends Base {
 
   close() {
     if (this._isOpen) {
-      this._ensureSelection()
+      this._lockInSelection()
       this.expandedValue = false
     }
   }
@@ -34,7 +34,6 @@ Combobox.Toggle = Base => class extends Base {
   closeOnFocusOutside({ target }) {
     if (!this._isOpen) return
     if (this.element.contains(target)) return
-    if (target.matches("main")) return
 
     this.close()
   }

data/app/presenters/hotwire_combobox/component.rb

@@ -53,8 +53,9 @@ class HotwireCombobox::Component
       class: "hw-combobox__input",
       type: input_type,
       data: input_data,
-      aria: input_aria
-    }.merge combobox_attrs.except(*nested_attrs)
+      aria: input_aria,
+      autocomplete: :off
+    }.with_indifferent_access.merge combobox_attrs.except(*nested_attrs)
   end
 
 
@@ -77,11 +78,6 @@ class HotwireCombobox::Component
   end
 
 
-  def listbox_options_attrs
-    { id: listbox_options_id }
-  end
-
-
   def dialog_wrapper_attrs
     {
       class: "hw-combobox__dialog__wrapper"
@@ -239,7 +235,8 @@ class HotwireCombobox::Component
         controls: listbox_id,
         owns: listbox_id,
         haspopup: "listbox",
-        autocomplete: autocomplete
+        autocomplete: autocomplete,
+        activedescendant: ""
     end
 
 
@@ -260,11 +257,6 @@ class HotwireCombobox::Component
     end
 
 
-    def listbox_options_id
-      "#{listbox_id}__options"
-    end
-
-
     def dialog_data
       {
         action: "keydown->hw-combobox#navigate",
@@ -290,7 +282,8 @@ class HotwireCombobox::Component
       {
         controls: dialog_listbox_id,
         owns: dialog_listbox_id,
-        autocomplete: autocomplete
+        autocomplete: autocomplete,
+        activedescendant: ""
       }
     end
 

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

@@ -1,3 +1,5 @@
+require "securerandom"
+
 class HotwireCombobox::Listbox::Option
   def initialize(option)
     @option = option.is_a?(Hash) ? Data.new(**option) : option
@@ -30,7 +32,7 @@ class HotwireCombobox::Listbox::Option
     end
 
     def id
-      option.try(:id)
+      option.try(:id) || SecureRandom.uuid
     end
 
     def data

data/app/views/hotwire_combobox/_next_page.turbo_stream.erb

@@ -1,5 +1,6 @@
 <%# locals: (for_id:, next_page:, src:) -%>
 
-<%= turbo_stream.replace hw_pagination_frame_id(for_id) do %>
+<%= turbo_stream.remove hw_pagination_frame_wrapper_id(for_id) %>
+<%= turbo_stream.append hw_listbox_id(for_id) do %>
   <%= render "hotwire_combobox/pagination", for_id: for_id, src: hw_combobox_next_page_uri(src, next_page) %>
 <% end %>

data/app/views/hotwire_combobox/_paginated_options.turbo_stream.erb

@@ -1,6 +1,6 @@
 <%# locals: (for_id:, options:) -%>
 
-<%= turbo_stream.public_send(hw_combobox_page_stream_action, hw_listbox_options_id(for_id)) do %>
+<%= turbo_stream.public_send(hw_combobox_page_stream_action, hw_listbox_id(for_id)) do %>
   <% options.each do |option| %>
     <%= render option %>
   <% end %>

data/app/views/hotwire_combobox/_pagination.html.erb

@@ -1,4 +1,7 @@
 <%# locals: (for_id:, src:) -%>
 
-<%= turbo_frame_tag hw_pagination_frame_id(for_id), src: src, loading: :lazy,
-      data: { hw_combobox_target: "endOfOptionsStream", input_type: params[:input_type] } %>
+<%= tag.li id: hw_pagination_frame_wrapper_id(for_id), data: {
+      hw_combobox_target: "endOfOptionsStream", input_type: params[:input_type] },
+      aria: { hidden: true } do %>
+  <%= turbo_frame_tag hw_pagination_frame_id(for_id), src: src, loading: :lazy %>
+<% end %>

data/app/views/hotwire_combobox/combobox/_paginated_listbox.html.erb

@@ -1,8 +1,6 @@
 <%= tag.ul **component.listbox_attrs do |ul| %>
-  <%= tag.div **component.listbox_options_attrs do %>
-    <% component.options.each do |option| %>
-      <%= render option %>
-    <% end %>
+  <% component.options.each do |option| %>
+    <%= render option %>
   <% end %>
 
   <% if component.paginated? %>

data/lib/hotwire_combobox/helper.rb

@@ -45,8 +45,12 @@ module HotwireCombobox
     hw_alias :hw_async_combobox_options
 
     protected # library use only
-      def hw_listbox_options_id(id)
-        "#{id}-hw-listbox__options"
+      def hw_listbox_id(id)
+        "#{id}-hw-listbox"
+      end
+
+      def hw_pagination_frame_wrapper_id(id)
+        "#{id}__hw_combobox_pagination__wrapper"
       end
 
       def hw_pagination_frame_id(id)

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.35"
+  VERSION = "0.1.37"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.35
+  version: 0.1.37
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-29 00:00:00.000000000 Z
+date: 2024-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,7 +52,8 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '1.2'
-description: A combobox implementation for Ruby on Rails apps using Hotwire.
+description: An autocomplete combobox implementation for Ruby on Rails apps using
+  Hotwire.
 email:
 - jose@farias.mx
 executables: []