Class: StimulusPlumbers::Components::Combobox::Autocomplete

Inherits:
Plumber::Base
  • Object
show all
Includes:
OptionGroup
Defined in:
lib/stimulus_plumbers/components/combobox/autocomplete.rb

Overview

Renders a listbox popover body for autocomplete. Re-uses combobox-dropdown for selection/filtering; input-combobox relays the trigger input event via the combobox-dropdown outlet.

Constant Summary collapse 

"combobox-dropdown"
[
  "click->combobox-dropdown#select",
  "keydown->combobox-dropdown#navigate",
  "combobox-dropdown:selected->input-combobox#onSelected"
].join(" ").freeze

Constants included from Plumber::HtmlOptions

Plumber::HtmlOptions::STIMULUS_SPACEJOIN_KEYS

Instance Attribute Summary

Attributes inherited from Plumber::Base

#template

Class Method Summary collapse

Instance Method Summary collapse

Methods inherited from Plumber::Base

#initialize, #theme

Methods included from Plumber::HtmlOptions

#merge_data_options, #merge_html_options, #merge_string_option, #normalize_part

Constructor Details

This class inherits a constructor from StimulusPlumbers::Components::Plumber::Base

Class Method Details

.default_opts ⇒ Object 



19
20
21
22
23
24
25
26
27
28
 
# File 'lib/stimulus_plumbers/components/combobox/autocomplete.rb', line 19

def self.default_opts
  {
    popover: {
      tag:      :div,
      haspopup: "listbox",
      data:     { controller: DROPDOWN_CONTROLLER, action: DROPDOWN_ACTION }
    },
    trigger: { aria_autocomplete: "list", readonly: false }
  }
end

Instance Method Details

#render(options: [], value: nil, label: nil, **_kwargs) ⇒ Object 



30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
# File 'lib/stimulus_plumbers/components/combobox/autocomplete.rb', line 30

def render(options: [], value: nil, label: nil, **_kwargs)
  listbox_attrs = { role: "listbox", data: { "#{DROPDOWN_CONTROLLER}_target": "listbox" } }
  listbox_attrs[:aria] = { label: label } if label

  listbox = template.content_tag(:ul, **listbox_attrs) do
    render_items(options, value: value)
  end

  loading = template.content_tag(
    :div,
    hidden: "",
    aria:   { live: "polite" },
    data:   { "#{DROPDOWN_CONTROLLER}_target": "loading" }
  ) { "" }

  empty = template.content_tag(
    :div,
    hidden: "",
    role:   "status",
    data:   { "#{DROPDOWN_CONTROLLER}_target": "empty" }
  ) { "No results" }

  template.safe_join([listbox, loading, empty])
end