hotwire_combobox 0.3.1 → 0.4.0

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

@@ -95,3 +95,12 @@ export function nextAnimationFrame() {
 export function nextEventLoopTick() {
   return new Promise((resolve) => setTimeout(() => resolve(), 0))
 }
+
+export function randomUUID() {
+  const uuidPattern = "10000000-1000-4000-8000-100000000000"
+
+  return uuidPattern.replace(/[018]/g, (match) => {
+    const randomByte = crypto.getRandomValues(new Uint8Array(1))[0]
+    return (match ^ (randomByte & 15) >> (match / 4)).toString(16)
+  })
+}

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

@@ -8,23 +8,33 @@ Combobox.Autocomplete = Base => class extends Base {
     }
   }
 
-  _replaceFullQueryWithAutocompletedValue(option) {
+  _hardAutocomplete(option) {
+    const typedValue = this._typedQuery
     const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue)
 
     this._fullQuery = autocompletedValue
-    this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
+
+    if (this._isAutocompletableWith(typedValue, autocompletedValue)) {
+      this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length)
+    } else {
+      this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
+    }
   }
 
-  _autocompleteMissingPortion(option) {
+  _softAutocomplete(option) {
     const typedValue = this._typedQuery
     const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue)
 
-    if (this._autocompletesInline && startsWith(autocompletedValue, typedValue)) {
+    if (this._isAutocompletableWith(typedValue, autocompletedValue)) {
       this._fullQuery = autocompletedValue
       this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length)
     }
   }
 
+  _isAutocompletableWith(typedValue, autocompletedValue) {
+    return this._autocompletesInline && startsWith(autocompletedValue, typedValue)
+  }
+
   // +visuallyHideListbox+ hides the listbox from the user,
   // but makes it still searchable by JS.
   _visuallyHideListbox() {

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

@@ -0,0 +1,46 @@
+import Combobox from "hw_combobox/models/combobox/base"
+import { randomUUID } from "hw_combobox/helpers"
+
+const MAX_CALLBACK_ATTEMPTS = 3
+
+Combobox.Callbacks = Base => class extends Base {
+  _initializeCallbacks() {
+    this.callbackQueue = []
+    this.callbackExecutionAttempts = {}
+  }
+
+  _enqueueCallback() {
+    const callbackId = randomUUID()
+    this.callbackQueue.push(callbackId)
+    return callbackId
+  }
+
+  _isNextCallback(callbackId) {
+    return this._nextCallback === callbackId
+  }
+
+  _callbackAttemptsExceeded(callbackId) {
+    return this._callbackAttempts(callbackId) > MAX_CALLBACK_ATTEMPTS
+  }
+
+  _callbackAttempts(callbackId) {
+    return this.callbackExecutionAttempts[callbackId] || 0
+  }
+
+  _recordCallbackAttempt(callbackId) {
+    this.callbackExecutionAttempts[callbackId] = this._callbackAttempts(callbackId) + 1
+  }
+
+  _dequeueCallback(callbackId) {
+    this.callbackQueue = this.callbackQueue.filter(id => id !== callbackId)
+    this._forgetCallbackExecutionAttempts(callbackId)
+  }
+
+  _forgetCallbackExecutionAttempts(callbackId) {
+    delete this.callbackExecutionAttempts[callbackId]
+  }
+
+  get _nextCallback() {
+    return this.callbackQueue[0]
+  }
+}

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

@@ -39,10 +39,7 @@ Combobox.Dialog = Base => class extends Base {
 
   _resizeDialog = () => {
     if (window.visualViewport) {
-      this.dialogTarget.style.setProperty(
-        "--hw-visual-viewport-height",
-        `${window.visualViewport.height}px`
-      )
+      this.dialogTarget.style.setProperty("--hw-visual-viewport-height", `${window.visualViewport.height}px`)
     }
   }
 

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

@@ -4,6 +4,15 @@ import { applyFilter, debounce, unselectedPortion } from "hw_combobox/helpers"
 import { get } from "hw_combobox/vendor/requestjs"
 
 Combobox.Filtering = Base => class extends Base {
+  prepareToFilter({ key }) {
+    const intendsToFilter = key.match(/^[a-zA-Z0-9]$|^ArrowDown$/)
+
+    if (this._isClosed && intendsToFilter) {
+      this.open() // `.open()` sets the appropriate state so the combobox knows it’s open.
+      this._expand() // `.open()` will call `._expand()` via stimulus callbacks, but we’re calling it inline so it happens immediately.
+    }
+  }
+
   filterAndSelect({ inputType }) {
     this._filter(inputType)
 
@@ -14,6 +23,12 @@ Combobox.Filtering = Base => class extends Base {
     }
   }
 
+  clear(event) {
+    this._clearQuery()
+    this.chipDismisserTargets.forEach(el => el.click())
+    if (event && !event.defaultPrevented) event.target.focus()
+  }
+
   _initializeFiltering() {
     this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this))
   }
@@ -36,19 +51,15 @@ Combobox.Filtering = Base => class extends Base {
     const query = {
       q: this._fullQuery,
       input_type: inputType,
-      for_id: this.element.dataset.asyncId
+      for_id: this.element.dataset.asyncId,
+      callback_id: this._enqueueCallback()
     }
 
     await get(this.asyncSrcValue, { responseKind: "turbo-stream", query })
   }
 
   _filterSync() {
-    this._allFilterableOptionElements.forEach(
-      applyFilter(
-        this._fullQuery,
-        { matching: this.filterableAttributeValue }
-      )
-    )
+    this._allFilterableOptionElements.forEach(applyFilter(this._fullQuery, { matching: this.filterableAttributeValue }))
   }
 
   _clearQuery() {
@@ -57,7 +68,7 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   _markQueried() {
-    this._actingCombobox.toggleAttribute("data-queried", this._isQueried)
+    this._forAllComboboxes(el => el.toggleAttribute("data-queried", this._isQueried))
   }
 
   get _isQueried() {

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

@@ -53,8 +53,7 @@ Combobox.FormField = Base => class extends Base {
 
   get _hasEmptyFieldValue() {
     if (this._isMultiselect) {
-      return this.hiddenFieldTarget.dataset.valueForMultiselect == "" ||
-        this.hiddenFieldTarget.dataset.valueForMultiselect == "undefined"
+      return this.hiddenFieldTarget.dataset.valueForMultiselect == "" || this.hiddenFieldTarget.dataset.valueForMultiselect == "undefined"
     } else {
       return this.hiddenFieldTarget.value === ""
     }

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

@@ -25,7 +25,7 @@ Combobox.Multiselect = Base => class extends Base {
     currentTarget.closest("[data-hw-combobox-chip]").remove()
 
     if (!this._isSmallViewport) {
-      this.openByFocusing()
+      this.open()
     }
 
     this._announceToScreenReader(display, "removed")
@@ -50,7 +50,7 @@ Combobox.Multiselect = Base => class extends Base {
       cancel(event)
     },
     Escape: (event) => {
-      this.openByFocusing()
+      this.open()
       cancel(event)
     }
   }
@@ -67,13 +67,16 @@ Combobox.Multiselect = Base => class extends Base {
 
     this._beforeClearingMultiselectQuery(async (display, value) => {
       this._fullQuery = ""
+
       this._filter("hw:multiselectSync")
       this._requestChips(value)
       this._addToFieldValue(value)
+
       if (shouldReopen) {
         await nextRepaint()
-        this.openByFocusing()
+        this.open()
       }
+
       this._announceToScreenReader(display, "multi-selected. Press Shift + Tab, then Enter to remove.")
     })
   }

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

@@ -31,11 +31,11 @@ Combobox.Navigation = Base => class extends Base {
       cancel(event)
     },
     Enter: (event) => {
-      this._closeAndBlur("hw:keyHandler:enter")
+      this.close("hw:keyHandler:enter")
       cancel(event)
     },
     Escape: (event) => {
-      this._closeAndBlur("hw:keyHandler:escape")
+      this._isOpen ? this.close("hw:keyHandler:escape") : this._clearQuery()
       cancel(event)
     },
     Backspace: (event) => {

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

@@ -4,7 +4,7 @@ import { wrapAroundAccess, isDeleteEvent } from "hw_combobox/helpers"
 Combobox.Selection = Base => class extends Base {
   selectOnClick({ currentTarget, inputType }) {
     this._forceSelectionAndFilter(currentTarget, inputType)
-    this._closeAndBlur("hw:optionRoleClick")
+    this.close("hw:optionRoleClick")
   }
 
   _connectSelection() {
@@ -20,9 +20,9 @@ Combobox.Selection = Base => class extends Base {
     } else if (isDeleteEvent({ inputType: inputType })) {
       this._deselect()
     } else if (inputType === "hw:lockInSelection" && this._ensurableOption) {
-      this._selectAndAutocompleteMissingPortion(this._ensurableOption)
+      this._select(this._ensurableOption, this._softAutocomplete.bind(this))
     } else if (this._isOpen && this._visibleOptionElements[0]) {
-      this._selectAndAutocompleteMissingPortion(this._visibleOptionElements[0])
+      this._select(this._visibleOptionElements[0], this._softAutocomplete.bind(this))
     } else if (this._isOpen) {
       this._resetOptionsAndNotify()
       this._markInvalid()
@@ -98,21 +98,13 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _selectAndAutocompleteMissingPortion(option) {
-    this._select(option, this._autocompleteMissingPortion.bind(this))
-  }
-
-  _selectAndAutocompleteFullQuery(option) {
-    this._select(option, this._replaceFullQueryWithAutocompletedValue.bind(this))
-  }
-
   _forceSelectionAndFilter(option, inputType) {
     this._forceSelectionWithoutFiltering(option)
     this._filter(inputType)
   }
 
   _forceSelectionWithoutFiltering(option) {
-    this._selectAndAutocompleteFullQuery(option)
+    this._select(option, this._hardAutocomplete.bind(this))
   }
 
   _lockInSelection() {

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

@@ -6,10 +6,6 @@ Combobox.Toggle = Base => class extends Base {
     this.expandedValue = true
   }
 
-  openByFocusing() {
-    this._actingCombobox.focus()
-  }
-
   close(inputType) {
     if (this._isOpen) {
       const shouldReopen = this._isMultiselect &&
@@ -24,9 +20,8 @@ Combobox.Toggle = Base => class extends Base {
 
       this.expandedValue = false
 
-      this._dispatchSelectionEvent()
-
       if (inputType != "hw:keyHandler:escape") {
+        this._dispatchSelectionEvent()
         this._createChip(shouldReopen)
       }
 
@@ -38,43 +33,38 @@ Combobox.Toggle = Base => class extends Base {
 
   toggle() {
     if (this.expandedValue) {
-      this._closeAndBlur("hw:toggle")
+      this.close("hw:toggle")
     } else {
-      this.openByFocusing()
+      this.open()
     }
   }
 
   closeOnClickOutside(event) {
     const target = event.target
 
-    if (!this._isOpen) return
+    if (this._isClosed) return
     if (this.mainWrapperTarget.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
-    this._closeAndBlur("hw:clickOutside")
+    this.close("hw:clickOutside")
   }
 
   closeOnFocusOutside({ target }) {
-    if (!this._isOpen) return
+    if (this._isClosed) return
     if (this.element.contains(target)) return
 
-    this._closeAndBlur("hw:focusOutside")
+    this.close("hw:focusOutside")
   }
 
   clearOrToggleOnHandleClick() {
     if (this._isQueried) {
       this._clearQuery()
-      this._actingCombobox.focus()
+      this.open()
     } else {
       this.toggle()
     }
   }
 
-  _closeAndBlur(inputType) {
-    this.close(inputType)
-    this._actingCombobox.blur()
-  }
-
   // Some browser extensions like 1Password overlay elements on top of the combobox.
   // Hovering over these elements emits a click event for some reason.
   // These events don't contain any telling information, so we use `_withinElementBounds`
@@ -121,6 +111,7 @@ Combobox.Toggle = Base => class extends Base {
     this._preventFocusingComboboxAfterClosingDialog()
     this._preventBodyScroll()
     this.dialogTarget.showModal()
+    this._resizeDialog()
   }
 
   _openInline() {
@@ -156,4 +147,8 @@ Combobox.Toggle = Base => class extends Base {
   get _isOpen() {
     return this.expandedValue
   }
+
+  get _isClosed() {
+    return !this._isOpen
+  }
 }

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

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

data/app/assets/stylesheets/hotwire_combobox.css

@@ -1,6 +1,7 @@
 :root {
   --hw-active-bg-color: #F3F4F6;
   --hw-border-color: #D1D5DB;
+  --hw-component-bg-color: #FFFFFF;
   --hw-group-color: #57595C;
   --hw-group-bg-color: #FFFFFF;
   --hw-invalid-color: #EF4444;
@@ -22,7 +23,7 @@
   --hw-dialog-label-size: 1.05rem;
   --hw-dialog-listbox-margin: 1.25rem 0 0;
   --hw-dialog-padding: 1rem 1rem 0;
-  --hw-dialog-top-offset: 4rem;
+  --hw-dialog-top-offset: 18vh;
 
   --hw-font-size: 1rem;
 
@@ -63,6 +64,7 @@
 }
 
 .hw-combobox__main__wrapper {
+  background-color: var(--hw-component-bg-color);
   border: var(--hw-border-width--slim) solid var(--hw-border-color);
   border-radius: var(--hw-border-radius);
   padding: var(--hw-padding--slim) calc(var(--hw-handle-width) + var(--hw-padding--slimmer)) var(--hw-padding--slim) var(--hw-padding--thick);
@@ -201,7 +203,7 @@
   overflow: hidden;
   padding: var(--hw-dialog-padding);
   pointer-events: auto;
-  position: absolute;
+  position: fixed;
   top: var(--hw-dialog-top-offset);
   width: auto;
 
@@ -209,12 +211,16 @@
     align-items: center;
     display: flex;
     flex-direction: column;
-    justify-content: start;
+    justify-content: flex-start;
   }
 
   &::backdrop {
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, white 50%);
   }
+
+  .hw-combobox--ios & {
+    position: absolute;
+  }
 }
 
 .hw-combobox__dialog__label {
@@ -291,4 +297,8 @@
 
 .hw_combobox__pagination__wrapper {
   background-color: var(--hw-option-bg-color);
+
+  &:only-child {
+    background-color: transparent;
+  }
 }

data/app/presenters/hotwire_combobox/component/announced.rb

@@ -0,0 +1,5 @@
+module HotwireCombobox::Component::Announced
+  def announcer_attrs
+    { class: "hw-combobox__announcer", data: { hw_combobox_target: "announcer" }, aria: { live: :polite, atomic: true } }
+  end
+end

data/app/presenters/hotwire_combobox/component/associations.rb

@@ -0,0 +1,18 @@
+module HotwireCombobox::Component::Associations
+  private
+    def infer_association_name
+      if name.end_with?("_id")
+        name.sub(/_id\z/, "")
+      end
+    end
+
+    def associated_object
+      @associated_object ||= if association_exists?
+        form_object&.public_send association_name
+      end
+    end
+
+    def association_exists?
+      association_name && form_object&.respond_to?(association_name)
+    end
+end

data/app/presenters/hotwire_combobox/component/async.rb

@@ -0,0 +1,6 @@
+module HotwireCombobox::Component::Async
+  private
+    def async_src
+      view.hw_uri_with_params @async_src, for_id: canonical_id, format: :turbo_stream
+    end
+end

data/app/presenters/hotwire_combobox/component/customizable.rb

@@ -1,32 +1,20 @@
 module HotwireCombobox::Component::Customizable
   CUSTOMIZABLE_ELEMENTS = %i[
+    dialog dialog_input dialog_label dialog_listbox dialog_wrapper
     fieldset
-    label
+    handle
     hidden_field
-    main_wrapper
     input
-    handle
+    label
     listbox
-    dialog
-    dialog_wrapper
-    dialog_label
-    dialog_input
-    dialog_listbox
+    main_wrapper
   ].freeze
 
-  PROTECTED_ATTRS = %i[
-    id
-    name
-    value
-    open
-    role
-    hidden
-    for
-  ].freeze
+  PROTECTED_ATTRS = %i[ for hidden id name open role value ].freeze
 
   CUSTOMIZABLE_ELEMENTS.each do |element|
     define_method "customize_#{element}" do |**attrs|
-      customize element, **attrs
+      store_customizations element, **attrs
     end
   end
 
@@ -35,14 +23,14 @@ module HotwireCombobox::Component::Customizable
       @custom_attrs ||= Hash.new { |h, k| h[k] = {} }
     end
 
-    def customize(element, **attrs)
+    def store_customizations(element, **attrs)
       element = element.to_sym.presence_in(CUSTOMIZABLE_ELEMENTS)
       sanitized_attrs = attrs.deep_symbolize_keys.except(*PROTECTED_ATTRS)
 
       custom_attrs.store element, sanitized_attrs
     end
 
-    def apply_customizations_to(element, base: {})
+    def customize(element, base: {})
       custom = custom_attrs[element]
 
       coalesce = ->(key, value) do

data/app/presenters/hotwire_combobox/component/freetext.rb

@@ -0,0 +1,26 @@
+module HotwireCombobox::Component::Freetext
+  extend ActiveSupport::Concern
+
+  included do
+    include ActiveModel::Validations
+    validate :name_when_new_on_multiselect_must_match_original_name
+  end
+
+  private
+    def name_when_new
+      if free_text && @name_when_new.blank?
+        hidden_field_name
+      else
+        @name_when_new
+      end
+    end
+
+    def name_when_new_on_multiselect_must_match_original_name
+      return unless multiselect? && name_when_new.present?
+
+      unless name_when_new.to_s == hidden_field_name
+        errors.add :name_when_new, :must_match_original_name,
+          message: "must match the regular name ('#{hidden_field_name}', in this case) on multiselect comboboxes."
+      end
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/dialog.rb

@@ -0,0 +1,57 @@
+module HotwireCombobox::Component::Markup::Dialog
+  def dialog_wrapper_attrs
+    customize :dialog_wrapper, base: { class: "hw-combobox__dialog__wrapper" }
+  end
+
+  def dialog_attrs
+    customize :dialog, base: {
+      class: "hw-combobox__dialog", role: :dialog, data: {
+      action: "keydown->hw-combobox#navigate", hw_combobox_target: "dialog" } }
+  end
+
+  def dialog_label
+    @dialog_label || label
+  end
+
+  def dialog_label_attrs
+    customize :dialog_label, base: { class: "hw-combobox__dialog__label", for: dialog_input_id }
+  end
+
+  def dialog_input_attrs
+    customize :dialog_input, base: {
+      id: dialog_input_id, role: :combobox, autofocus: "", type: input_type,
+      class: "hw-combobox__dialog__input", data: dialog_input_data, aria: dialog_input_aria }
+  end
+
+  def dialog_listbox_attrs
+    customize :dialog_listbox, base: {
+      id: dialog_listbox_id, role: :listbox, class: "hw-combobox__dialog__listbox",
+      data: { hw_combobox_target: "dialogListbox" }, aria: { multiselectable: multiselect? } }
+  end
+
+  def dialog_focus_trap_attrs
+    { tabindex: "-1", data: { hw_combobox_target: "dialogFocusTrap" } }
+  end
+
+  private
+    def dialog_input_id
+      "#{canonical_id}-hw-dialog-combobox"
+    end
+
+    def dialog_input_data
+      { action: "
+          keydown->hw-combobox#prepareToFilter
+          input->hw-combobox#filterAndSelect
+          keydown->hw-combobox#navigate
+          click@window->hw-combobox#closeOnClickOutside".squish,
+        hw_combobox_target: "dialogCombobox" }
+    end
+
+    def dialog_input_aria
+      { controls: dialog_listbox_id, owns: dialog_listbox_id, autocomplete: autocomplete, activedescendant: "" }
+    end
+
+    def dialog_listbox_id
+      "#{canonical_id}-hw-dialog-listbox"
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/fieldset.rb

@@ -0,0 +1,46 @@
+module HotwireCombobox::Component::Markup::Fieldset
+  def fieldset_attrs
+    customize :fieldset, base: {
+      class: [ "hw-combobox", platform_classes, { "hw-combobox--multiple": multiselect? } ], data: fieldset_data }
+  end
+
+  private
+    def platform_classes
+      platform = HotwireCombobox::Platform.new request&.user_agent
+
+      view.token_list \
+        "hw-combobox--ios": platform.ios?,
+        "hw-combobox--android": platform.android?,
+        "hw-combobox--mobile-webkit": platform.mobile_webkit?
+    end
+
+    def fieldset_data
+      data.merge \
+        async_id: canonical_id,
+        controller: view.token_list("hw-combobox", data[:controller]),
+        hw_combobox_expanded_value: open,
+        hw_combobox_name_when_new_value: name_when_new,
+        hw_combobox_original_name_value: hidden_field_name,
+        hw_combobox_autocomplete_value: autocomplete,
+        hw_combobox_small_viewport_max_width_value: mobile_at,
+        hw_combobox_async_src_value: async_src,
+        hw_combobox_prefilled_display_value: prefilled_display,
+        hw_combobox_selection_chip_src_value: multiselect_chip_src,
+        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_invalid_class: "hw-combobox__input--invalid"
+    end
+
+    def prefilled_display
+      return if multiselect? || !hidden_field_value
+
+      if async_src && associated_object
+        associated_object.to_combobox_display
+      elsif async_src && form_object&.respond_to?(name)
+        form_object.public_send name
+      else
+        options.find_by_value(hidden_field_value)&.autocompletable_as || hidden_field_value
+      end
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/form.rb

@@ -0,0 +1,6 @@
+module HotwireCombobox::Component::Markup::Form
+  private
+    def form_object
+      form&.object
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/handle.rb

@@ -0,0 +1,7 @@
+module HotwireCombobox::Component::Markup::Handle
+  def handle_attrs
+    customize :handle, base: {
+      class: "hw-combobox__handle",
+      data: { action: "click->hw-combobox#clearOrToggleOnHandleClick", hw_combobox_target: "handle" } }
+  end
+end