hotwire_combobox 0.1.33 → 0.1.35

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 415f50ba9630121312ea65c8f04435ff57ba386ffb9851dc9e09da8a6dc68352
-  data.tar.gz: de3d2d2bfb9d9f9e21292acf49152484ad05317b16daade967ea695afbf3bc87
+  metadata.gz: 4b9f936869948e6767d3cdf4f02f226bfe4c3954d57172b37388239884b69ae6
+  data.tar.gz: b5495f56d66183c5ebb6c54a6a8e5278391df921f304b36b9da9ffb3bf752576
 SHA512:
-  metadata.gz: aab8d6575ec896e26035b5040afa0765b3dacd92d101589b20f305840a5831174cad852325bc64971e83f182260454d2d836be665f19a33cf845d972d90b8134
-  data.tar.gz: 5f4393d0d3dbf29c9bf194210cf7d845c35062a7fd4d952e6acafae2c407ce158d63735f703419311c15ab3996002fa573617cbff26b98406d7e98bdf0e85e9f
+  metadata.gz: 7bb2f124171055bc2b46c7584f31b3ae6426979dd9485645e8364bef559aa86cfa905f62f0db47e79d48db98f42d422b9c8fd9f342729e7da4704385d8544e3b
+  data.tar.gz: 27e49fa1cfd828d23f7dcf82b75a2ba7d7edc4adc8fcff88d35cab8cc41e666f39dffb82209c68740e8b4d9ec9236b1db3513e7c2952cf80cf6f96dc7608a39e

data/README.md

@@ -22,10 +22,6 @@ Only apps that use importmaps are currently supported. Suport for other JS solut
 
 ## Docs
 
-<p align="center">
-  <img src="docs/assets/images/docs-preview.png" height=500>
-</p>
-
 Visit [the docs site](https://hotwirecombobox.com/) for a demo and detailed documentation.
 If the site is down, you can run the docs locally by cloning [the docs repo](https://github.com/josefarias/hotwire_combobox_docs).
 

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

@@ -29,10 +29,10 @@ export default class HwComboboxController extends Concerns(...concerns) {
     "dialogCombobox",
     "dialogFocusTrap",
     "dialogListbox",
+    "endOfOptionsStream",
     "handle",
     "hiddenField",
-    "listbox",
-    "paginationFrame"
+    "listbox"
   ]
 
   static values = {
@@ -70,7 +70,13 @@ export default class HwComboboxController extends Concerns(...concerns) {
     }
   }
 
-  paginationFrameTargetConnected() {
-    this._preselectOption()
+  endOfOptionsStreamTargetConnected(element) {
+    const inputType = element.dataset.inputType
+
+    if (inputType && inputType !== "hw:ensureSelection") {
+      this._commitFilter({ inputType })
+    } else {
+      this._preselectOption()
+    }
   }
 }

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

@@ -1,5 +1,3 @@
-export const nullEvent = new Event("NULL")
-
 export function Concerns(Base, ...mixins) {
   return mixins.reduce((accumulator, current) => current(accumulator), Base)
 }
@@ -39,11 +37,7 @@ export function startsWith(string, substring) {
   return string.toLowerCase().startsWith(substring.toLowerCase())
 }
 
-export function nextFrame() {
-  return new Promise(requestAnimationFrame)
-}
-
-export function debounce(fn, delay = 150) {
+export function debounce(fn, delay = 300) {
   let timeoutId = null
 
   return (...args) => {

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

@@ -8,17 +8,17 @@ Combobox.Autocomplete = Base => class extends Base {
     }
   }
 
-  _maybeAutocompleteWith(option, { force }) {
+  _autocompleteWith(option, { force }) {
     if (!this._autocompletesInline && !force) return
 
-    const typedValue = this._actingCombobox.value
+    const typedValue = this._query
     const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue)
 
     if (force) {
-      this._actingCombobox.value = autocompletedValue
+      this._query = autocompletedValue
       this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
     } else if (startsWith(autocompletedValue, typedValue)) {
-      this._actingCombobox.value = autocompletedValue
+      this._query = autocompletedValue
       this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length)
     }
   }
@@ -30,14 +30,14 @@ Combobox.Autocomplete = Base => class extends Base {
   }
 
   get _isExactAutocompleteMatch() {
-    return this._immediatelyAutocompletableValue === this._actingCombobox.value
+    return this._immediatelyAutocompletableValue === this._query
   }
 
   // All `_isExactAutocompleteMatch` matches are `_isPartialAutocompleteMatch` matches
   // but not all `_isPartialAutocompleteMatch` matches are `_isExactAutocompleteMatch` matches.
   get _isPartialAutocompleteMatch() {
     return !!this._immediatelyAutocompletableValue &&
-      startsWith(this._immediatelyAutocompletableValue, this._actingCombobox.value)
+      startsWith(this._immediatelyAutocompletableValue, this._query)
   }
 
   get _autocompletesList() {

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._actingCombobox.value
+    this.dialogComboboxTarget.value = this._query
 
     this._actingCombobox = this.dialogComboboxTarget
     this._actingListbox = this.dialogListboxTarget
@@ -23,7 +23,7 @@ Combobox.Dialog = Base => class extends Base {
   }
 
   _moveArtifactsInline() {
-    this.comboboxTarget.value = this._actingCombobox.value
+    this.comboboxTarget.value = this._query
 
     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, nextFrame, debounce, isDeleteEvent } from "hw_combobox/helpers"
+import { applyFilter, debounce, isDeleteEvent } from "hw_combobox/helpers"
 import { get } from "hw_combobox/vendor/requestjs"
 
 Combobox.Filtering = Base => class extends Base {
@@ -21,20 +21,13 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   async _filterAsync(event) {
-    const q = this._actingCombobox.value.trim()
-
-    await get(this.asyncSrcValue, { responseKind: "turbo-stream", query: { q } })
-
-    this._afterTurboStreamRender(() => this._commitFilter(event))
+    const query = { q: this._query, input_type: event.inputType }
+    await get(this.asyncSrcValue, { responseKind: "turbo-stream", query })
   }
 
   _filterSync(event) {
-    const query = this._actingCombobox.value.trim()
-
     this.open()
-
-    this._allOptionElements.forEach(applyFilter(query, { matching: this.filterableAttributeValue }))
-
+    this._allOptionElements.forEach(applyFilter(this._query, { matching: this.filterableAttributeValue }))
     this._commitFilter(event)
   }
 
@@ -48,12 +41,17 @@ Combobox.Filtering = Base => class extends Base {
     }
   }
 
-  async _afterTurboStreamRender(callback) {
-    await nextFrame()
-    callback()
+  get _isQueried() {
+    return this._query.length > 0
   }
 
-  get _isQueried() {
-    return this._actingCombobox.value.length > 0
+  // Consider +_query+ will contain the full autocompleted value
+  // after a certain point in the call chain.
+  get _query() {
+    return this._actingCombobox.value
+  }
+
+  set _query(value) {
+    this._actingCombobox.value = value
   }
 }

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

@@ -1,5 +1,5 @@
 import Combobox from "hw_combobox/models/combobox/base"
-import { wrapAroundAccess, nullEvent } from "hw_combobox/helpers"
+import { wrapAroundAccess } from "hw_combobox/helpers"
 
 Combobox.Selection = Base => class extends Base {
   selectOption(event) {
@@ -10,7 +10,7 @@ Combobox.Selection = Base => class extends Base {
 
   _connectSelection() {
     if (this.hasPrefilledDisplayValue) {
-      this._actingCombobox.value = this.prefilledDisplayValue
+      this._query = this.prefilledDisplayValue
     }
   }
 
@@ -19,7 +19,7 @@ Combobox.Selection = Base => class extends Base {
 
     if (option) {
       this._markValid()
-      this._maybeAutocompleteWith(option, { force })
+      this._autocompleteWith(option, { force })
       this._commitSelection(option, { selected: true })
     } else {
       this._markInvalid()
@@ -32,8 +32,6 @@ Combobox.Selection = Base => class extends Base {
     if (selected) {
       this.hiddenFieldTarget.value = option.dataset.value
       option.scrollIntoView({ block: "nearest" })
-    } else {
-      this.hiddenFieldTarget.value = null
     }
   }
 
@@ -48,11 +46,12 @@ Combobox.Selection = Base => class extends Base {
   _deselect() {
     const option = this._selectedOptionElement
     if (option) this._commitSelection(option, { selected: false })
+    this.hiddenFieldTarget.value = null
   }
 
   _selectNew() {
     this._resetOptions()
-    this.hiddenFieldTarget.value = this._actingCombobox.value
+    this.hiddenFieldTarget.value = this._query
     this.hiddenFieldTarget.name = this.nameWhenNewValue
   }
 
@@ -71,10 +70,10 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _selectFuzzyMatch() {
-    if (this._isFuzzyMatch) {
-      this._select(this._visibleOptionElements[0], { force: true })
-      this.filter(nullEvent)
+  _ensureSelection() {
+    if (this._shouldEnsureSelection) {
+      this._select(this._ensurableOption, { force: true })
+      this.filter({ inputType: "hw:ensureSelection" })
     }
   }
 
@@ -82,7 +81,11 @@ Combobox.Selection = Base => class extends Base {
     return this.hiddenFieldTarget.value && !this._selectedOptionElement
   }
 
-  get _isFuzzyMatch() {
-    return this._isQueried && !!this._visibleOptionElements[0] && !this._isNewOptionWithPotentialMatches
+  get _shouldEnsureSelection() {
+    return this._isQueried && !!this._ensurableOption && !this._isNewOptionWithPotentialMatches
+  }
+
+  get _ensurableOption() {
+    return this._selectedOptionElement || this._visibleOptionElements[0]
   }
 }

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

@@ -50,10 +50,6 @@ Combobox.Toggle = Base => class extends Base {
     return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom
   }
 
-  _ensureSelection() {
-    this._selectFuzzyMatch()
-  }
-
   _openByFocusing() {
     this._actingCombobox.focus()
   }

data/app/presenters/hotwire_combobox/component.rb

@@ -171,7 +171,7 @@ class HotwireCombobox::Component
       if async_src && associated_object
         associated_object.to_combobox_display
       elsif hidden_field_value
-        options.find { |option| option.value == hidden_field_value }&.content
+        options.find { |option| option.value == hidden_field_value }&.autocompletable_as
       end
     end
 

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

@@ -11,8 +11,8 @@ class HotwireCombobox::Listbox::Option
     option.try(:value) || option.id
   end
 
-  def content
-    option.try(:content) || option.try(:display)
+  def autocompletable_as
+    option.try(:autocompletable_as) || option.try(:display)
   end
 
   private
@@ -42,11 +42,11 @@ class HotwireCombobox::Listbox::Option
       }
     end
 
-    def filterable_as
-      option.try(:filterable_as) || option.try(:display)
+    def content
+      option.try(:content) || option.try(:display)
     end
 
-    def autocompletable_as
-      option.try(:autocompletable_as) || option.try(:display)
+    def filterable_as
+      option.try(:filterable_as) || option.try(:display)
     end
 end

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

@@ -1,4 +1,4 @@
 <%# locals: (for_id:, src:) -%>
 
 <%= turbo_frame_tag hw_pagination_frame_id(for_id), src: src, loading: :lazy,
-      data: { hw_combobox_target: "paginationFrame" } %>
+      data: { hw_combobox_target: "endOfOptionsStream", input_type: params[:input_type] } %>

data/lib/hotwire_combobox/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.33
+  version: 0.1.35
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-27 00:00:00.000000000 Z
+date: 2024-02-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails