Class: PhlexKit::ComboboxSearchInput

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/combobox/combobox_search_input.rb

Overview

Filter input at the top of a PhlexKit::ComboboxPopover (magnifier icon + borderless search field). Filtering happens client-side against each item's text (or data-text). The field carries the ARIA combobox role (keyboard nav highlights options via aria-activedescendant while focus stays here); pass list_id: matching the ComboboxList id to wire aria-controls statically — otherwise the controller wires it on connect. See combobox.rb.

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(placeholder:, list_id: nil, **attrs) ⇒ ComboboxSearchInput

Returns a new instance of ComboboxSearchInput.



9
10
11
12
13
 
# File 'app/components/phlex_kit/combobox/combobox_search_input.rb', line 9

def initialize(placeholder:, list_id: nil, **attrs)
  @placeholder = placeholder
  @list_id = list_id
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
# File 'app/components/phlex_kit/combobox/combobox_search_input.rb', line 15

def view_template
  div(class: "pk-combobox-search") do
    icon
    input(**mix({
      type: :search,
      role: "combobox",
      aria: { autocomplete: "list", expanded: "false", controls: @list_id },
      autocorrect: "off",
      autocomplete: "off",
      spellcheck: "false",
      placeholder: @placeholder,
      class: "pk-combobox-search-input",
      data: {
        phlex_kit__combobox_target: "searchInput",
        action: "keyup->phlex-kit--combobox#filterItems search->phlex-kit--combobox#filterItems"
      }
    }, @attrs))
  end
end