Module: UI::ComboboxBehavior

Included in:
ComboboxWrapper, ComboboxWrapperComponent
Defined in:
app/helpers/ui/combobox_behavior.rb

Overview

ComboboxBehavior

Shared behavior for Combobox wrapper component across ERB, ViewComponent, and Phlex implementations. This module provides consistent attribute generation for combobox functionality.

The combobox pattern wraps a Popover/Drawer/DropdownMenu container and adds selection management:

  • Maintains selected value state

  • Updates target text when item is selected

  • Controls check icon visibility based on selection

  • Closes container after selection

Examples:

Usage with Popover (Phlex)

render UI::ComboboxWrapper.new(value: "next") do |combobox_attrs|
  render UI::Popover.new(**combobox_attrs) do
    # ... popover content
  end
end

Instance Method Summary collapse

Instance Method Details

#combobox_html_attributes ⇒ Hash

Returns HTML attributes for the combobox container (Popover/Drawer/DropdownMenu) These attributes initialize the Stimulus controller and set the initial selected value

Returns:

  • (Hash) —

    HTML attributes including Stimulus controller and value



25
26
27
28
29
30
31
32
33
34
 
# File 'app/helpers/ui/combobox_behavior.rb', line 25

def combobox_html_attributes
  value = respond_to?(:value) ? value : (@value || "")

  {
    data: {
      controller: "ui--combobox",
      ui__combobox_value_value: value
    }
  }
end

#combobox_item_html_attributes(value) ⇒ Hash

Returns HTML attributes for a command item These attributes mark the item as a combobox target and associate it with a value

Parameters:

  • value (String) —

    The value associated with this item

Returns:

  • (Hash) —

    HTML attributes marking element as item target with value



51
52
53
54
55
56
57
58
 
# File 'app/helpers/ui/combobox_behavior.rb', line 51

def combobox_item_html_attributes(value)
  {
    data: {
      ui__combobox_target: "item",
      value: value
    }
  }
end

#combobox_text_html_attributes ⇒ Hash

Returns HTML attributes for the text target element This is typically a <span> inside the trigger button that displays the selected item’s label

Returns:

  • (Hash) —

    HTML attributes marking element as text target



40
41
42
43
44
 
# File 'app/helpers/ui/combobox_behavior.rb', line 40

def combobox_text_html_attributes
  {
    data: {ui__combobox_target: "text"}
  }
end