hotwire_combobox 0.1.41 → 0.1.43

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

@@ -1,10 +1,9 @@
 import Combobox from "hw_combobox/models/combobox/base"
-import { wrapAroundAccess } from "hw_combobox/helpers"
+import { wrapAroundAccess, isDeleteEvent } from "hw_combobox/helpers"
 
 Combobox.Selection = Base => class extends Base {
   selectOptionOnClick(event) {
-    this.filter(event)
-    this._select(event.currentTarget, { forceAutocomplete: true })
+    this._forceSelectionAndFilter(event.currentTarget, event)
     this.close()
   }
 
@@ -14,91 +13,143 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _select(option, { forceAutocomplete = false } = {}) {
-    this._resetOptions()
-
-    if (option) {
-      this._autocompleteWith(option, { force: forceAutocomplete })
-      this._commitSelection(option, { selected: true })
-      this._markValid()
-    } else {
+  _selectBasedOnQuery(event) {
+    if (this._shouldTreatAsNewOptionForFiltering(!isDeleteEvent(event))) {
+      this._selectNew()
+    } else if (isDeleteEvent(event)) {
+      this._deselect()
+    } else if (event.inputType === "hw:lockInSelection" && this._ensurableOption) {
+      this._selectAndAutocompleteMissingPortion(this._ensurableOption)
+    } else if (this._isOpen && this._visibleOptionElements[0]) {
+      this._selectAndAutocompleteMissingPortion(this._visibleOptionElements[0])
+    } else if (this._isOpen) {
+      this._resetOptionsAndNotify()
       this._markInvalid()
+    } else {
+      // When selecting from an async dialog listbox: selection is forced, the listbox is filtered,
+      // and the dialog is closed. Filtering ends with an `endOfOptionsStream` target connected
+      // to the now invisible combobox, which is now closed because Turbo waits for "nextRepaint"
+      // before rendering turbo streams. This ultimately calls +_selectBasedOnQuery+. We do want
+      // to call +_selectBasedOnQuery+ in this case to account for e.g. selection of
+      // new options. But we will noop here if it's none of the cases checked above.
     }
   }
 
-  _commitSelection(option, { selected }) {
-    this._markSelected(option, { selected })
+  _select(option, autocompleteStrategy) {
+    const previousValue = this._value
 
-    if (selected) {
-      this.hiddenFieldTarget.value = option.dataset.value
-      option.scrollIntoView({ block: "nearest" })
-    }
+    this._resetOptionsSilently()
 
-    this._dispatchSelectionEvent({ isNew: false })
+    autocompleteStrategy(option)
+
+    this._setValue(option.dataset.value)
+    this._markSelected(option)
+    this._markValid()
+    this._dispatchSelectionEvent({ isNewAndAllowed: false, previousValue: previousValue })
+
+    option.scrollIntoView({ block: "nearest" })
   }
 
-  _markSelected(option, { selected }) {
-    if (this.hasSelectedClass) {
-      option.classList.toggle(this.selectedClass, selected)
-    }
+  _selectNew() {
+    const previousValue = this._value
 
-    option.setAttribute("aria-selected", selected)
-    this._setActiveDescendant(selected ? option.id : "")
+    this._resetOptionsSilently()
+    this._setValue(this._fullQuery)
+    this._setName(this.nameWhenNewValue)
+    this._markValid()
+    this._dispatchSelectionEvent({ isNewAndAllowed: true, previousValue: previousValue })
   }
 
   _deselect() {
-    const option = this._selectedOptionElement
+    const previousValue = this._value
 
-    if (option) this._commitSelection(option, { selected: false })
+    if (this._selectedOptionElement) {
+      this._markNotSelected(this._selectedOptionElement)
+    }
 
-    this.hiddenFieldTarget.value = null
+    this._setValue(null)
     this._setActiveDescendant("")
 
-    if (!option) this._dispatchSelectionEvent({ isNew: false })
+    return previousValue
   }
 
-  _selectNew() {
-    this._resetOptions()
-    this.hiddenFieldTarget.value = this._fullQuery
-    this.hiddenFieldTarget.name = this.nameWhenNewValue
-    this._markValid()
+  _deselectAndNotify() {
+    const previousValue = this._deselect()
+    this._dispatchSelectionEvent({ isNewAndAllowed: false, previousValue: previousValue })
+  }
+
+  _forceSelectionAndFilter(option, event) {
+    this._forceSelectionWithoutFiltering(option)
+    this._filter(event)
+  }
 
-    this._dispatchSelectionEvent({ isNew: true })
+  _forceSelectionWithoutFiltering(option) {
+    this._selectAndReplaceFullQuery(option)
   }
 
   _selectIndex(index) {
     const option = wrapAroundAccess(this._visibleOptionElements, index)
-    this._select(option, { forceAutocomplete: true })
+    this._forceSelectionWithoutFiltering(option)
   }
 
   _preselectOption() {
     if (this._hasValueButNoSelection && this._allOptions.length < 100) {
       const option = this._allOptions.find(option => {
-        return option.dataset.value === this.hiddenFieldTarget.value
+        return option.dataset.value === this._value
       })
 
-      if (option) this._markSelected(option, { selected: true })
+      if (option) this._markSelected(option)
     }
   }
 
+  _selectAndReplaceFullQuery(option) {
+    this._select(option, this._replaceFullQueryWithAutocompletedValue.bind(this))
+  }
+
+  _selectAndAutocompleteMissingPortion(option) {
+    this._select(option, this._autocompleteMissingPortion.bind(this))
+  }
+
   _lockInSelection() {
     if (this._shouldLockInSelection) {
-      this._select(this._ensurableOption, { forceAutocomplete: true })
-      this.filter({ inputType: "hw:lockInSelection" })
+      this._forceSelectionAndFilter(this._ensurableOption, { inputType: "hw:lockInSelection" })
     }
+  }
 
-    if (this._isUnjustifiablyBlank) {
-      this._deselect()
-      this._clearQuery()
-    }
+  _markSelected(option) {
+    if (this.hasSelectedClass) option.classList.add(this.selectedClass)
+    option.setAttribute("aria-selected", true)
+    this._setActiveDescendant(option.id)
+  }
+
+  _markNotSelected(option) {
+    if (this.hasSelectedClass) option.classList.remove(this.selectedClass)
+    option.removeAttribute("aria-selected")
+    this._removeActiveDescendant()
   }
 
   _setActiveDescendant(id) {
     this._forAllComboboxes(el => el.setAttribute("aria-activedescendant", id))
   }
 
+  _removeActiveDescendant() {
+    this._setActiveDescendant("")
+  }
+
+  _setValue(value) {
+    this.hiddenFieldTarget.value = value
+  }
+
+  _setName(value) {
+    this.hiddenFieldTarget.name = value
+  }
+
+  get _value() {
+    return this.hiddenFieldTarget.value
+  }
+
   get _hasValueButNoSelection() {
-    return this.hiddenFieldTarget.value && !this._selectedOptionElement
+    return this._value && !this._selectedOptionElement
   }
 
   get _shouldLockInSelection() {

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

@@ -9,7 +9,11 @@ Combobox.Toggle = Base => class extends Base {
   close() {
     if (this._isOpen) {
       this._lockInSelection()
+      this._clearInvalidQuery()
+
       this.expandedValue = false
+
+      this._dispatchClosedEvent()
     }
   }
 
@@ -78,6 +82,8 @@ Combobox.Toggle = Base => class extends Base {
     this._actingCombobox.setAttribute("aria-expanded", true) // needs to happen after setting acting combobox
   }
 
+  // +._collapse()+ differs from `.close()` in that it might be called by stimulus on connect because
+  // it interprets a change in `expandedValue` — whereas `.close()` is only called internally by us.
   _collapse() {
     this._actingCombobox.setAttribute("aria-expanded", false) // needs to happen before resetting acting combobox
 
@@ -118,6 +124,13 @@ Combobox.Toggle = Base => class extends Base {
     enableBodyScroll(this.dialogListboxTarget)
   }
 
+  _clearInvalidQuery() {
+    if (this._isUnjustifiablyBlank) {
+      this._deselect()
+      this._clearQuery()
+    }
+  }
+
   get _isOpen() {
     return this.expandedValue
   }

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

@@ -34,7 +34,7 @@ Combobox.Validity = Base => class extends Base {
   // +_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
+    const isRequiredAndEmpty = this.comboboxTarget.required && !this._value
     return isRequiredAndEmpty
   }
 }

data/app/presenters/hotwire_combobox/component.rb

@@ -266,7 +266,7 @@ class HotwireCombobox::Component
       combobox_attrs.fetch(:data, {}).merge \
         action: "
           focus->hw-combobox#open
-          input->hw-combobox#filter
+          input->hw-combobox#filterAndSelect
           keydown->hw-combobox#navigate
           click@window->hw-combobox#closeOnClickOutside
           focusin@window->hw-combobox#closeOnFocusOutside
@@ -316,7 +316,7 @@ class HotwireCombobox::Component
     def dialog_input_data
       {
         action: "
-          input->hw-combobox#filter
+          input->hw-combobox#filterAndSelect
           keydown->hw-combobox#navigate
           click@window->hw-combobox#closeOnClickOutside".squish,
         hw_combobox_target: "dialogCombobox"

data/lib/hotwire_combobox/engine.rb

@@ -9,8 +9,8 @@ module HotwireCombobox
 
         unless HotwireCombobox.bypass_convenience_methods?
           module FormBuilderExtensions
-            def combobox(*args, **kwargs)
-              @template.hw_combobox_tag(*args, **kwargs.merge(form: self))
+            def combobox(*args, **kwargs, &block)
+              @template.hw_combobox_tag(*args, **kwargs.merge(form: self), &block)
             end
           end
 

data/lib/hotwire_combobox/helper.rb

@@ -26,11 +26,9 @@ module HotwireCombobox
       if options.first.is_a? HotwireCombobox::Listbox::Option
         options
       else
-        render_in_proc = hw_render_in_proc(render_in) if render_in.present?
-
-        hw_parse_combobox_options(options, render_in: render_in_proc, **methods.merge(display: display)).tap do |options|
-          options.unshift(hw_blank_option(include_blank)) if include_blank.present?
-        end
+        opts = hw_parse_combobox_options options, render_in_proc: hw_render_in_proc(render_in), **methods.merge(display: display)
+        opts.unshift(hw_blank_option(include_blank)) if include_blank.present?
+        opts
       end
     end
     hw_alias :hw_combobox_options
@@ -85,7 +83,7 @@ module HotwireCombobox
         if include_blank.is_a? Hash
           text = include_blank.delete(:text)
 
-          [ text, hw_render_in_proc(include_blank).(text) ]
+          [ text, hw_call_render_in_proc(hw_render_in_proc(include_blank), text, display: text, value: "") ]
         else
           [ include_blank, include_blank ]
         end
@@ -102,7 +100,9 @@ module HotwireCombobox
 
     private
       def hw_render_in_proc(render_in)
-        ->(object) { render(**render_in.reverse_merge(object: object)) }
+        if render_in.present?
+          ->(object, locals) { render(**render_in.reverse_merge(object: object, locals: locals)) }
+        end
       end
 
       def hw_extract_options_and_src(options_or_src, render_in, include_blank)
@@ -113,40 +113,50 @@ module HotwireCombobox
         end
       end
 
-      def hw_parse_combobox_options(options, render_in: nil, **methods)
+      def hw_parse_combobox_options(options, render_in_proc: nil, **methods)
         options.map do |option|
           HotwireCombobox::Listbox::Option.new \
-            **hw_option_attrs_for(option, render_in: render_in, **methods)
+            **hw_option_attrs_for(option, render_in_proc: render_in_proc, **methods)
         end
       end
 
-      def hw_option_attrs_for(option, render_in: nil, **methods)
+      def hw_option_attrs_for(option, render_in_proc: nil, **methods)
         case option
         when Hash
-          option
+          option.tap do |attrs|
+            attrs[:content] = hw_call_render_in_proc(render_in_proc, attrs[:display], attrs) if render_in_proc
+          end
         when String
           {}.tap do |attrs|
             attrs[:display] = option
             attrs[:value] = option
-            attrs[:content] = render_in.(option) if render_in
+            attrs[:content] = hw_call_render_in_proc(render_in_proc, attrs[:display], attrs) if render_in_proc
           end
         when Array
           {}.tap do |attrs|
             attrs[:display] = option.first
             attrs[:value] = option.last
-            attrs[:content] = render_in.(option.first) if render_in
+            attrs[:content] = hw_call_render_in_proc(render_in_proc, attrs[:display], attrs) if render_in_proc
           end
         else
           {}.tap do |attrs|
-            attrs[:value] = hw_call_method_or_proc(option, methods[:value] || :id)
-
             attrs[:id] = hw_call_method_or_proc(option, methods[:id]) if methods[:id]
             attrs[:display] = hw_call_method_or_proc(option, methods[:display]) if methods[:display]
-            attrs[:content] = hw_call_method_or_proc(option, render_in || methods[:content]) if render_in || methods[:content]
+            attrs[:value] = hw_call_method_or_proc(option, methods[:value] || :id)
+
+            if render_in_proc
+              attrs[:content] = hw_call_render_in_proc(render_in_proc, option, attrs)
+            elsif methods[:content]
+              attrs[:content] = hw_call_method_or_proc(option, methods[:content])
+            end
           end
         end
       end
 
+      def hw_call_render_in_proc(render_in_proc, object, attrs)
+        render_in_proc.(object, combobox_display: attrs[:display], combobox_value: attrs[:value])
+      end
+
       def hw_call_method_or_proc(object, method_or_proc)
         if method_or_proc.is_a? Proc
           method_or_proc.call object

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.41"
+  VERSION = "0.1.43"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.41
+  version: 0.1.43
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-12 00:00:00.000000000 Z
+date: 2024-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails