advanced_select 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8acafe10e284da26e61bec53737160926b3b6f43e51aa4d2a690e9a9b5a47367
-  data.tar.gz: c2465e1a792dc86ece9747b18fe2dcb3e077d706aed3e178515fe1376308067b
+  metadata.gz: 9be8d05d537d5e36a565546c0f821c68a6a62cd5e3978cbbe23d3ef7451c1f2a
+  data.tar.gz: c6c4c0667ef096fd55e57024621eb9a21d2338ecbef2c2305e2bf2edab0fad4d
 SHA512:
-  metadata.gz: d9a0cefc246959a5f8f5910e91e648f5654c55eee8bbb63ae78232c5abd9b7ab0b307eb04744f70016d5e23ab54cc3b7c9a6973c18b5d2ea3b885255a54e8c5a
-  data.tar.gz: 4e4143bb1da3fb3e50f5aa6fda9cce40f3631c6f7d0ba5b2185a5f06ca4cb9f0b16938932aca365206cf0391ac5b8151335ae1e32e1e5c9abd4a26447e383617
+  metadata.gz: 492cee1cf22c71e9c6e328052bb3ff7c49d519816c06ebe8610f2c0d07d2cbcfd9ebe09383ac3a69e696497295a34015aa467f004d46e40194ae4cc7d7538473
+  data.tar.gz: 65b3749af47dc024f475284c0998657190f5c68c27da5578d93dfd35669a4eb9c319d3b1b6df1a07fb16157eb0f8897ed4154ab7b54f5e49d8ad7dda3d1bec84

data/README.md

@@ -75,7 +75,7 @@ AdvancedSelect does not provide query objects, model concerns, authorization log
 Add the gem to the host Rails app:
 
 ```ruby
-gem "advanced_select", "~> 0.1.0"
+gem "advanced_select", "~> 0.1.4"
 ```
 
 Run the installer:
@@ -316,11 +316,12 @@ Use local options when the complete option list is already available while rende
   id: "record_item_id",
   selected: selected_option,
   options: options,
-  placeholder: t(".item_placeholder"),
-  searchable: false
+  placeholder: t(".item_placeholder")
 ) %>
 ```
 
+Local selects are searchable by default. Set `searchable: false` when the option list should open without a search field.
+
 Options are hashes:
 
 ```ruby
@@ -501,6 +502,48 @@ Use `dependent_fields` when a remote option endpoint depends on another field va
 
 The remote request will include `parent_id=<current field value>`.
 
+By default the field is **eager**: it listens for `change` on each dependent field and reloads its options immediately, without waiting for the dropdown to open. When a parent changes, the field clears its current value, fetches fresh options for the new parent, and (combined with auto select, below) can settle on a value while staying closed. It also loads once on initial render so a parent's default value is reflected right away. An existing server-rendered selection is left untouched.
+
+Because the field re-broadcasts a `change` event whenever its own value changes, you can chain advanced selects: a child can depend on another advanced select via its hidden input id (`dependent_fields: { parent_id: "#record_parent_id" }`).
+
+Pass `eager: false` for the lazy behaviour instead — options are only fetched when the dropdown opens, and the field does not react to parent changes until then:
+
+```erb
+<%= advanced_select_tag(
+  "record[item_id]",
+  id: "record_item_id",
+  selected: selected_option,
+  options: [],
+  placeholder: t(".item_placeholder"),
+  options_url: item_options_path,
+  dependent_fields: { parent_id: "#record_parent_id" },
+  eager: false
+) %>
+```
+
+### Auto Select Single Option
+
+When a remote option list is populated and resolves to exactly one selectable option, the field selects that option automatically. This is enabled by default and is meant for dependent fields where a parent value narrows the children down to a single valid choice.
+
+Auto selection only runs when the dropdown is **populated through a remote request** (the cascade case): it fires after the options finish loading, either when the dropdown opens or — with the default eager dependent fields above — as soon as a parent value loads them, so a single valid option is selected without the user opening the field. It does **not** run for statically rendered local options on page load, and it never triggers while the user is actively typing a search.
+
+It never overrides an existing selection and is skipped for `multiple` fields.
+
+Pass `auto_select_single: false` to opt out:
+
+```erb
+<%= advanced_select_tag(
+  "record[item_id]",
+  id: "record_item_id",
+  selected: selected_option,
+  options: [],
+  placeholder: t(".item_placeholder"),
+  options_url: item_options_path,
+  dependent_fields: { parent_id: "#record_parent_id" },
+  auto_select_single: false
+) %>
+```
+
 ### Custom Option Content
 
 Use a custom option content partial when an option needs richer content. The engine still renders the option button, Stimulus data attributes, and ARIA attributes:
@@ -630,6 +673,8 @@ advanced_select_tag(
   add_mode: false,
   dependent_fields: {},
   include_hidden: true,
+  auto_select_single: true,
+  eager: true,
   option_content_partial: nil,
   classes: {},
   append_classes: {}

data/app/javascript/advanced_select/advanced_select_controller.js

@@ -5,8 +5,11 @@ export default class extends Controller {
   static targets = ["hiddenFields", "trigger", "summary", "dropdown", "search", "options", "caret", "clear"]
   static values = {
     addMode: Boolean,
+    autoSelectSingle: { type: Boolean, default: true },
     delay: { type: Number, default: 200 },
     dependentFields: Object,
+    eager: { type: Boolean, default: true },
+    emptyText: String,
     errorText: String,
     includeHidden: { type: Boolean, default: true },
     inputId: String,
@@ -29,6 +32,7 @@ export default class extends Controller {
     this.tokenClass = this.element.dataset.advancedSelectTokenClass || "ui-advanced-select-token"
     this.loadingClass = this.element.dataset.advancedSelectLoadingClass || "ui-advanced-select-loading"
     this.errorClass = this.element.dataset.advancedSelectErrorClass || "ui-advanced-select-error"
+    this.emptyClass = this.element.dataset.advancedSelectEmptyClass || "ui-advanced-select-empty"
     this.optionActiveClasses = this.classList(this.element.dataset.advancedSelectOptionActiveClass || "ui-advanced-select-option-active")
     this.addOptionActiveClasses = this.classList(this.element.dataset.advancedSelectAddOptionActiveClass || "")
     this.optionSelectedClasses = this.classList(this.element.dataset.advancedSelectOptionSelectedClass || "")
@@ -39,11 +43,16 @@ export default class extends Controller {
     }))
     this.close = this.close.bind(this)
     this.renderOptionsState()
+    this.setupEagerDependentFields()
   }
 
   disconnect() {
     window.clearTimeout(this.timer)
     document.removeEventListener("click", this.close)
+
+    if (this.dependentChangeListener) {
+      document.removeEventListener("change", this.dependentChangeListener)
+    }
   }
 
   toggle(event) {
@@ -61,7 +70,7 @@ export default class extends Controller {
     this.triggerTarget.setAttribute("aria-expanded", "true")
     document.addEventListener("click", this.close)
     this.activate(-1)
-    this.fetchOptions({ selected: true })
+    this.fetchOptions({ selected: true, autoSelect: true })
 
     if (this.searchableValue) {
       requestAnimationFrame(() => this.searchTarget.focus())
@@ -81,6 +90,12 @@ export default class extends Controller {
   }
 
   search() {
+    if (!this.urlValue) {
+      this.filterOptions()
+      this.activate(-1)
+      return
+    }
+
     window.clearTimeout(this.timer)
     this.renderLoading()
     this.activate(-1)
@@ -127,10 +142,58 @@ export default class extends Controller {
   clearSearch() {
     if (this.searchableValue) {
       this.searchTarget.value = ""
+
+      if (!this.urlValue) {
+        this.filterOptions()
+      }
+    }
+  }
+
+  filterOptions() {
+    const query = this.normalize(this.searchTarget.value)
+    const container = this.currentOptionsTarget
+    let visibleCount = 0
+    let currentGroup = null
+    let groupHasMatch = false
+
+    Array.from(container.children).forEach((child) => {
+      if (child.hasAttribute("data-advanced-select-group-label")) {
+        if (currentGroup) currentGroup.classList.toggle("hidden", !groupHasMatch)
+        currentGroup = child
+        groupHasMatch = false
+      } else if (child.hasAttribute("data-advanced-select-option")) {
+        const match = this.normalize(child.dataset.advancedSelectLabelParam).includes(query)
+        child.classList.toggle("hidden", !match)
+        if (match) {
+          visibleCount += 1
+          groupHasMatch = true
+        }
+      }
+    })
+
+    if (currentGroup) currentGroup.classList.toggle("hidden", !groupHasMatch)
+
+    this.toggleEmptyState(visibleCount === 0)
+  }
+
+  toggleEmptyState(empty) {
+    const container = this.currentOptionsTarget
+    let emptyState = container.querySelector("[data-advanced-select-empty-state]")
+
+    if (empty && !emptyState) {
+      emptyState = this.textElement("div", this.emptyClass, this.emptyTextValue)
+      emptyState.setAttribute("data-advanced-select-empty-state", "")
+      container.appendChild(emptyState)
+    } else if (!empty && emptyState) {
+      emptyState.remove()
     }
   }
 
-  fetchOptions({ selected = false } = {}) {
+  normalize(text) {
+    return (text || "").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+  }
+
+  fetchOptions({ selected = false, autoSelect = false, eager = false } = {}) {
     if (!this.urlValue) {
       return
     }
@@ -165,23 +228,27 @@ export default class extends Controller {
         return response.text()
       })
       .then((html) => {
-        if (!this.expanded || requestSequence !== this.requestSequence) {
+        if (!(eager || this.expanded) || requestSequence !== this.requestSequence) {
           return
         }
 
         Turbo.renderStreamMessage(html)
         requestAnimationFrame(() => {
-          if (!this.expanded || requestSequence !== this.requestSequence) {
+          if (!(eager || this.expanded) || requestSequence !== this.requestSequence) {
             return
           }
 
           this.currentOptionsTarget.setAttribute("aria-busy", "false")
           this.renderOptionsState()
           this.activate(-1)
+
+          if (autoSelect) {
+            this.autoSelectSingle()
+          }
         })
       })
       .catch(() => {
-        if (!this.expanded || requestSequence !== this.requestSequence) {
+        if (!(eager || this.expanded) || requestSequence !== this.requestSequence) {
           return
         }
 
@@ -238,6 +305,14 @@ export default class extends Controller {
     this.renderOptionsState()
     this.caretTarget.classList.toggle("hidden", this.selectedValue.length > 0)
     this.clearTarget.classList.toggle("hidden", this.selectedValue.length === 0)
+    this.dispatchValueChange()
+  }
+
+  dispatchValueChange() {
+    const input = this.hiddenFieldsTarget.querySelector("input")
+    if (input) {
+      input.dispatchEvent(new Event("change", { bubbles: true }))
+    }
   }
 
   renderOptionsState() {
@@ -263,6 +338,54 @@ export default class extends Controller {
     }
   }
 
+  setupEagerDependentFields() {
+    if (!this.eagerValue || !this.urlValue) {
+      return
+    }
+
+    this.dependentSelectors = [...new Set(Object.values(this.dependentFieldsValue))]
+    if (this.dependentSelectors.length === 0) {
+      return
+    }
+
+    this.dependentChangeListener = (event) => {
+      if (event.target instanceof Element && this.dependentSelectors.some((selector) => event.target.matches(selector))) {
+        this.reloadDependentOptions()
+      }
+    }
+    document.addEventListener("change", this.dependentChangeListener)
+
+    if (this.selectedValue.length === 0) {
+      this.fetchOptions({ eager: true, autoSelect: true })
+    }
+  }
+
+  reloadDependentOptions() {
+    this.selectedValue = []
+    this.renderSelection()
+    this.clearSearch()
+    this.fetchOptions({ eager: true, autoSelect: true })
+  }
+
+  autoSelectSingle() {
+    if (!this.autoSelectSingleValue || this.multipleValue || this.selectedValue.length > 0) {
+      return
+    }
+
+    const options = this.selectableOptionElements
+    if (options.length !== 1) {
+      return
+    }
+
+    const option = options[0]
+    this.selectOption(
+      option.dataset.advancedSelectValueParam,
+      option.dataset.advancedSelectLabelParam,
+      option.dataset.advancedSelectSubmitValueParam || option.dataset.advancedSelectValueParam,
+      { displayLabel: option.dataset.advancedSelectDisplayLabelParam, refreshOptions: false }
+    )
+  }
+
   chooseActiveOption() {
     if (this.activeOption.hasAttribute("data-advanced-select-add-option")) {
       this.addOption(
@@ -308,6 +431,10 @@ export default class extends Controller {
     return this.optionElements[this.activeIndex]
   }
 
+  get selectableOptionElements() {
+    return Array.from(this.currentOptionsTarget.querySelectorAll("[data-advanced-select-option]")).filter((option) => !option.classList.contains("hidden"))
+  }
+
   get currentOptionsTarget() {
     return document.getElementById(this.targetIdValue) || this.optionsTarget
   }

data/app/views/advanced_select/_options.html.erb

@@ -8,7 +8,7 @@
 
   <% advanced_select_option_groups(options).each do |group| %>
     <% if group[:label].present? %>
-      <div class="<%= advanced_select_class(class_map, :group_label) %>"><%= group.fetch(:label) %></div>
+      <div class="<%= advanced_select_class(class_map, :group_label) %>" data-advanced-select-group-label><%= group.fetch(:label) %></div>
     <% end %>
 
     <% group.fetch(:options).each do |option| %>
@@ -28,6 +28,6 @@
       <%= t("shared.advanced_select.add_option", query: query) %>
     </button>
   <% elsif advanced_select_options_empty?(options) %>
-    <div class="<%= advanced_select_class(class_map, :empty) %>"><%= t("shared.advanced_select.empty") %></div>
+    <div class="<%= advanced_select_class(class_map, :empty) %>" data-advanced-select-empty-state><%= t("shared.advanced_select.empty") %></div>
   <% end %>
 </div>

data/app/views/advanced_select/_select.html.erb

@@ -5,6 +5,7 @@
      data-advanced-select-name-value="<%= name %>"
      data-advanced-select-input-id-value="<%= id %>"
      data-advanced-select-placeholder-value="<%= placeholder %>"
+     data-advanced-select-empty-text-value="<%= t("shared.advanced_select.empty") %>"
      data-advanced-select-loading-text-value="<%= t("shared.advanced_select.loading") %>"
      data-advanced-select-error-text-value="<%= t("shared.advanced_select.error") %>"
      data-advanced-select-dependent-fields-value="<%= dependent_fields.to_json %>"
@@ -12,9 +13,12 @@
      data-advanced-select-searchable-value="<%= searchable %>"
      data-advanced-select-add-mode-value="<%= add_mode %>"
      data-advanced-select-include-hidden-value="<%= include_hidden %>"
+     data-advanced-select-auto-select-single-value="<%= auto_select_single %>"
+     data-advanced-select-eager-value="<%= eager %>"
      data-advanced-select-placeholder-class="<%= advanced_select_class(class_map, :placeholder) %>"
      data-advanced-select-value-class="<%= advanced_select_class(class_map, :value) %>"
      data-advanced-select-token-class="<%= advanced_select_class(class_map, :token) %>"
+     data-advanced-select-empty-class="<%= advanced_select_class(class_map, :empty) %>"
      data-advanced-select-loading-class="<%= advanced_select_class(class_map, :loading) %>"
      data-advanced-select-error-class="<%= advanced_select_class(class_map, :error) %>"
      data-advanced-select-option-active-class="<%= advanced_select_state_class(class_map, :option_active) %>"
@@ -56,7 +60,7 @@
       <%= tag.input type: "search",
                     id: "#{id}_search",
                     autocomplete: "off",
-                    placeholder: placeholder,
+                    placeholder: t("shared.advanced_select.search_placeholder"),
                     class: advanced_select_class(class_map, :search),
                     data: {
                       advanced_select_target: "search",

data/config/locales/en.yml

@@ -5,3 +5,4 @@ en:
       empty: "No options found"
       error: "Options could not be loaded"
       loading: "Loading..."
+      search_placeholder: "Search..."

data/config/locales/tr.yml

@@ -5,3 +5,4 @@ tr:
       empty: "Seçenek bulunamadı"
       error: "Seçenekler yüklenemedi"
       loading: "Yükleniyor..."
+      search_placeholder: "Ara..."

data/lib/advanced_select/helper.rb

@@ -1,6 +1,6 @@
 module AdvancedSelect
   module Helper
-    def advanced_select_tag(name, id:, selected:, options:, placeholder:, options_url: nil, multiple: false, searchable: true, add_mode: false, dependent_fields: {}, include_hidden: true, option_content_partial: nil, classes: {}, append_classes: {})
+    def advanced_select_tag(name, id:, selected:, options:, placeholder:, options_url: nil, multiple: false, searchable: true, add_mode: false, dependent_fields: {}, include_hidden: true, auto_select_single: true, eager: true, option_content_partial: nil, classes: {}, append_classes: {})
       selected_options = advanced_select_selected_options(selected)
       class_map = advanced_select_class_map(classes, append_classes)
 
@@ -12,10 +12,12 @@ module AdvancedSelect
         options: options,
         placeholder: placeholder,
         multiple: multiple,
-        searchable: searchable && options_url.present?,
+        searchable: searchable,
         add_mode: add_mode,
         dependent_fields: dependent_fields,
         include_hidden: include_hidden,
+        auto_select_single: auto_select_single,
+        eager: eager,
         target_id: "#{id}_options",
         option_content_partial: option_content_partial,
         class_map: class_map

data/lib/advanced_select/version.rb

@@ -1,3 +1,3 @@
 module AdvancedSelect
-  VERSION = "0.1.2"
+  VERSION = "0.1.4"
 end

data/lib/generators/advanced_select/install/templates/advanced_select_controller.js

@@ -5,9 +5,13 @@ export default class extends Controller {
   static targets = ["hiddenFields", "trigger", "summary", "dropdown", "search", "options", "caret", "clear"]
   static values = {
     addMode: Boolean,
+    autoSelectSingle: { type: Boolean, default: true },
     delay: { type: Number, default: 200 },
     dependentFields: Object,
+    eager: { type: Boolean, default: true },
+    emptyText: String,
     errorText: String,
+    includeHidden: { type: Boolean, default: true },
     inputId: String,
     loadingText: String,
     multiple: Boolean,
@@ -28,6 +32,7 @@ export default class extends Controller {
     this.tokenClass = this.element.dataset.advancedSelectTokenClass || "ui-advanced-select-token"
     this.loadingClass = this.element.dataset.advancedSelectLoadingClass || "ui-advanced-select-loading"
     this.errorClass = this.element.dataset.advancedSelectErrorClass || "ui-advanced-select-error"
+    this.emptyClass = this.element.dataset.advancedSelectEmptyClass || "ui-advanced-select-empty"
     this.optionActiveClasses = this.classList(this.element.dataset.advancedSelectOptionActiveClass || "ui-advanced-select-option-active")
     this.addOptionActiveClasses = this.classList(this.element.dataset.advancedSelectAddOptionActiveClass || "")
     this.optionSelectedClasses = this.classList(this.element.dataset.advancedSelectOptionSelectedClass || "")
@@ -37,11 +42,17 @@ export default class extends Controller {
       displayLabel: option.displayLabel || option.label
     }))
     this.close = this.close.bind(this)
+    this.renderOptionsState()
+    this.setupEagerDependentFields()
   }
 
   disconnect() {
     window.clearTimeout(this.timer)
     document.removeEventListener("click", this.close)
+
+    if (this.dependentChangeListener) {
+      document.removeEventListener("change", this.dependentChangeListener)
+    }
   }
 
   toggle(event) {
@@ -59,7 +70,7 @@ export default class extends Controller {
     this.triggerTarget.setAttribute("aria-expanded", "true")
     document.addEventListener("click", this.close)
     this.activate(-1)
-    this.fetchOptions({ selected: true })
+    this.fetchOptions({ selected: true, autoSelect: true })
 
     if (this.searchableValue) {
       requestAnimationFrame(() => this.searchTarget.focus())
@@ -79,6 +90,12 @@ export default class extends Controller {
   }
 
   search() {
+    if (!this.urlValue) {
+      this.filterOptions()
+      this.activate(-1)
+      return
+    }
+
     window.clearTimeout(this.timer)
     this.renderLoading()
     this.activate(-1)
@@ -125,10 +142,58 @@ export default class extends Controller {
   clearSearch() {
     if (this.searchableValue) {
       this.searchTarget.value = ""
+
+      if (!this.urlValue) {
+        this.filterOptions()
+      }
     }
   }
 
-  fetchOptions({ selected = false } = {}) {
+  filterOptions() {
+    const query = this.normalize(this.searchTarget.value)
+    const container = this.currentOptionsTarget
+    let visibleCount = 0
+    let currentGroup = null
+    let groupHasMatch = false
+
+    Array.from(container.children).forEach((child) => {
+      if (child.hasAttribute("data-advanced-select-group-label")) {
+        if (currentGroup) currentGroup.classList.toggle("hidden", !groupHasMatch)
+        currentGroup = child
+        groupHasMatch = false
+      } else if (child.hasAttribute("data-advanced-select-option")) {
+        const match = this.normalize(child.dataset.advancedSelectLabelParam).includes(query)
+        child.classList.toggle("hidden", !match)
+        if (match) {
+          visibleCount += 1
+          groupHasMatch = true
+        }
+      }
+    })
+
+    if (currentGroup) currentGroup.classList.toggle("hidden", !groupHasMatch)
+
+    this.toggleEmptyState(visibleCount === 0)
+  }
+
+  toggleEmptyState(empty) {
+    const container = this.currentOptionsTarget
+    let emptyState = container.querySelector("[data-advanced-select-empty-state]")
+
+    if (empty && !emptyState) {
+      emptyState = this.textElement("div", this.emptyClass, this.emptyTextValue)
+      emptyState.setAttribute("data-advanced-select-empty-state", "")
+      container.appendChild(emptyState)
+    } else if (!empty && emptyState) {
+      emptyState.remove()
+    }
+  }
+
+  normalize(text) {
+    return (text || "").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+  }
+
+  fetchOptions({ selected = false, autoSelect = false, eager = false } = {}) {
     if (!this.urlValue) {
       return
     }
@@ -163,23 +228,27 @@ export default class extends Controller {
         return response.text()
       })
       .then((html) => {
-        if (!this.expanded || requestSequence !== this.requestSequence) {
+        if (!(eager || this.expanded) || requestSequence !== this.requestSequence) {
           return
         }
 
         Turbo.renderStreamMessage(html)
         requestAnimationFrame(() => {
-          if (!this.expanded || requestSequence !== this.requestSequence) {
+          if (!(eager || this.expanded) || requestSequence !== this.requestSequence) {
             return
           }
 
           this.currentOptionsTarget.setAttribute("aria-busy", "false")
           this.renderOptionsState()
           this.activate(-1)
+
+          if (autoSelect) {
+            this.autoSelectSingle()
+          }
         })
       })
       .catch(() => {
-        if (!this.expanded || requestSequence !== this.requestSequence) {
+        if (!(eager || this.expanded) || requestSequence !== this.requestSequence) {
           return
         }
 
@@ -214,7 +283,7 @@ export default class extends Controller {
       if (this.selectedValue.some((option) => option.id === value)) {
         this.selectedValue = this.selectedValue.filter((option) => option.id !== value)
       } else {
-        this.selectedValue = this.selectedValue.concat({ id: value, value: submitValue, label, displayLabel })
+        this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }, ...this.selectedValue]
       }
     } else {
       this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }]
@@ -236,10 +305,19 @@ export default class extends Controller {
     this.renderOptionsState()
     this.caretTarget.classList.toggle("hidden", this.selectedValue.length > 0)
     this.clearTarget.classList.toggle("hidden", this.selectedValue.length === 0)
+    this.dispatchValueChange()
+  }
+
+  dispatchValueChange() {
+    const input = this.hiddenFieldsTarget.querySelector("input")
+    if (input) {
+      input.dispatchEvent(new Event("change", { bubbles: true }))
+    }
   }
 
   renderOptionsState() {
     const selectedIds = new Set(this.selectedValue.map((option) => option.id))
+    const container = this.currentOptionsTarget
 
     this.optionElements.forEach((option) => {
       const selected = selectedIds.has(option.dataset.advancedSelectValueParam)
@@ -251,6 +329,63 @@ export default class extends Controller {
         check.textContent = selected ? "\u2713" : ""
       }
     })
+
+    for (let i = this.selectedValue.length - 1; i >= 0; i--) {
+      const option = container.querySelector(
+        `[data-advanced-select-option][data-advanced-select-value-param="${this.selectedValue[i].id}"]`
+      )
+      if (option) container.prepend(option)
+    }
+  }
+
+  setupEagerDependentFields() {
+    if (!this.eagerValue || !this.urlValue) {
+      return
+    }
+
+    this.dependentSelectors = [...new Set(Object.values(this.dependentFieldsValue))]
+    if (this.dependentSelectors.length === 0) {
+      return
+    }
+
+    // Delegated on document so it keeps working after a parent advanced select
+    // rewrites its hidden input on each selection.
+    this.dependentChangeListener = (event) => {
+      if (event.target instanceof Element && this.dependentSelectors.some((selector) => event.target.matches(selector))) {
+        this.reloadDependentOptions()
+      }
+    }
+    document.addEventListener("change", this.dependentChangeListener)
+
+    if (this.selectedValue.length === 0) {
+      this.fetchOptions({ eager: true, autoSelect: true })
+    }
+  }
+
+  reloadDependentOptions() {
+    this.selectedValue = []
+    this.renderSelection()
+    this.clearSearch()
+    this.fetchOptions({ eager: true, autoSelect: true })
+  }
+
+  autoSelectSingle() {
+    if (!this.autoSelectSingleValue || this.multipleValue || this.selectedValue.length > 0) {
+      return
+    }
+
+    const options = this.selectableOptionElements
+    if (options.length !== 1) {
+      return
+    }
+
+    const option = options[0]
+    this.selectOption(
+      option.dataset.advancedSelectValueParam,
+      option.dataset.advancedSelectLabelParam,
+      option.dataset.advancedSelectSubmitValueParam || option.dataset.advancedSelectValueParam,
+      { displayLabel: option.dataset.advancedSelectDisplayLabelParam, refreshOptions: false }
+    )
   }
 
   chooseActiveOption() {
@@ -298,12 +433,22 @@ export default class extends Controller {
     return this.optionElements[this.activeIndex]
   }
 
+  get selectableOptionElements() {
+    return Array.from(this.currentOptionsTarget.querySelectorAll("[data-advanced-select-option]")).filter((option) => !option.classList.contains("hidden"))
+  }
+
   get currentOptionsTarget() {
     return document.getElementById(this.targetIdValue) || this.optionsTarget
   }
 
   get hiddenFieldElements() {
-    const options = this.multipleValue ? this.selectedValue : [this.selectedValue[0]]
+    let options
+
+    if (this.multipleValue) {
+      options = this.includeHiddenValue ? [null, ...this.selectedValue] : this.selectedValue
+    } else {
+      options = [this.selectedValue[0]]
+    }
 
     return options.map((option) => {
       const input = document.createElement("input")
@@ -376,4 +521,4 @@ export default class extends Controller {
   get expanded() {
     return this.triggerTarget.getAttribute("aria-expanded") === "true"
   }
-}
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: advanced_select
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Mehmet Celik