advanced_select 0.1.3 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 254f883547b3f323b98150becc0db7f8ff76f609a9a7186a5d1eb8903a0afb7f
-  data.tar.gz: 56b4d1866feaad22d4c4ed00bb2ab573240dbedda3d2f7cc6a1759c7da53b571
+  metadata.gz: 43e9d7178d6a064d18c4243d1fad3ec15fbb935834eb2d07da8cd89d33c955a1
+  data.tar.gz: 389f74b51ecd1615a2d3b11c2794e10c57557ce6085595ebe06f3a296b88874a
 SHA512:
-  metadata.gz: f6a74b01aed5465044972b7f89d75148a9192120d8bba05e7a212899a11715198a3a4743092e329e1dc8ae4ccb0c86c2ab21ccafb48b88fa52059212b6d4acc3
-  data.tar.gz: 9df6c7b80f331cdc57fabaddce592f1f899728fe643d73ac3c98149acdb6b9f4c7a559e2fd87113655338ece19695fcfed7fbb6b570808bf02395f44c568301b
+  metadata.gz: faf098b583a4d1ea48aeb788943b3da2400fdca7946f32f02419aef63ca34af371c7ce9cd97368205ff6dcb96e55b5e3044794e5f8f5cf8237faf0e53dd7e62b
+  data.tar.gz: 5c8fea29044aa4e5a9da1cb804b93f0124e9e302dbc82c0f63d8a216f767e2e13d518c5768704285874596ef6a809750f3033e7ff759176c35a4991f04ee87f0

data/README.md

@@ -16,6 +16,8 @@ AdvancedSelect is a small Rails engine for rendering an advanced select input wi
 - [Basic Local Select](#basic-local-select)
 - [Remote Search](#remote-search)
 - [Multiple Select](#multiple-select)
+- [Count Summary](#count-summary)
+- [Selection Tooltip](#selection-tooltip)
 - [Add Mode](#add-mode)
 - [Dependent Fields](#dependent-fields)
 - [Custom Option Content](#custom-option-content)
@@ -75,7 +77,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:
@@ -428,6 +430,79 @@ Pass `include_hidden: false` to opt out — for example, when your controller re
 ) %>
 ```
 
+### Count Summary
+
+By default a multiple select collapses its trigger to the first two selected labels plus an `& +N` token. For long selections — or when the detail belongs in a [tooltip](#selection-tooltip) — pass `summary_mode: :count` to render a single `"N selected"` label instead:
+
+```erb
+<%= advanced_select_tag(
+  "record[item_ids][]",
+  id: "record_item_ids",
+  selected: selected_options,
+  options: options,
+  placeholder: t(".items_placeholder"),
+  multiple: true,
+  summary_mode: :count
+) %>
+```
+
+The label text comes from the `shared.advanced_select.selected_count` translation (`"%{count} selected"`), so override it per locale to localize or reword it. `summary_mode` only affects multiple selects; single selects always show the selected label.
+
+### Selection Tooltip
+
+Multiple selects can show an optional tooltip when the user hovers the trigger — handy together with `summary_mode: :count`, where the trigger only shows a count and the tooltip reveals the detail. The tooltip is hover-driven (no info icon) and is positioned with CSS below the trigger.
+
+Pass `tooltip: true` for a built-in list of the selected display labels:
+
+```erb
+<%= advanced_select_tag(
+  "record[item_ids][]",
+  id: "record_item_ids",
+  selected: selected_options,
+  options: options,
+  placeholder: t(".items_placeholder"),
+  multiple: true,
+  summary_mode: :count,
+  tooltip: true
+) %>
+```
+
+The built-in list stays in sync as the selection changes on the client.
+
+For richer layouts — a table, badges, compatibility columns, etc. — pass `tooltip_partial:` instead. The partial receives `selected_options` and `options` as locals and may render any markup:
+
+```erb
+<%= advanced_select_tag(
+  "record[alternative_ids][]",
+  id: "record_alternative_ids",
+  selected: selected_options,
+  options: options,
+  placeholder: t(".alternatives_placeholder"),
+  multiple: true,
+  summary_mode: :count,
+  tooltip_partial: "alternatives/tooltip"
+) %>
+```
+
+```erb
+<%# app/views/alternatives/_tooltip.html.erb %>
+<table>
+  <thead>
+    <tr><th>Code &amp; Name</th><th>Type</th></tr>
+  </thead>
+  <tbody>
+    <% selected_options.each do |option| %>
+      <tr>
+        <td><%= option.fetch(:display_label) %></td>
+        <td><%= option.fetch(:value) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+```
+
+A custom `tooltip_partial` is rendered once on the server, so it is best for display-oriented content. If your selection changes on the client and the custom tooltip must reflect it live, re-render the field (for example via a Turbo Stream) after the change. The built-in `tooltip: true` list updates client-side automatically.
+
 ### Add Mode
 
 Set `add_mode: true` when users may submit a new typed value:
@@ -502,6 +577,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:
@@ -631,12 +748,21 @@ advanced_select_tag(
   add_mode: false,
   dependent_fields: {},
   include_hidden: true,
+  auto_select_single: true,
+  eager: true,
+  summary_mode: :tokens,
+  tooltip: false,
+  tooltip_partial: nil,
   option_content_partial: nil,
   classes: {},
   append_classes: {}
 )
 ```
 
+`summary_mode:` controls how a multiple select renders its collapsed trigger label. The default `:tokens` shows the first two selected display labels followed by `& +N`. Pass `:count` to render a single localized `"N selected"` summary instead (see [Count Summary](#count-summary)).
+
+`tooltip:` / `tooltip_partial:` enable an optional hover tooltip on the trigger (see [Selection Tooltip](#selection-tooltip)).
+
 `advanced_select_options_tag`:
 
 ```ruby
@@ -694,8 +820,12 @@ shared:
     empty: "No options found"
     error: "Options could not be loaded"
     loading: "Loading..."
+    search_placeholder: "Search..."
+    selected_count: "%{count} selected"
 ```
 
+`selected_count` is used by the [count summary](#count-summary) (`summary_mode: :count`).
+
 Override these keys in the host app as needed.
 
 ## Styling
@@ -807,6 +937,7 @@ Common styling hooks:
 
 - `.ui-advanced-select-trigger` controls the visible input button, border, radius, height, background, and focus outline.
 - `.ui-advanced-select-dropdown` controls the popup container, border, radius, shadow, width, and `z-index`.
+- `.ui-advanced-select-tooltip`, `.ui-advanced-select-tooltip-list`, and `.ui-advanced-select-tooltip-item` control the optional [selection tooltip](#selection-tooltip) container and its built-in list. The tooltip is positioned with CSS (`position: absolute` below the trigger); adjust `top`, `min-width`, or `z-index` here if your layout needs it.
 - `.ui-advanced-select-options` controls the scroll container and default `max-height`.
 - `.ui-advanced-select-option` controls option row spacing, hover state, and font sizing.
 - `.ui-advanced-select-option[aria-selected="true"]` controls selected option colors.

data/app/assets/stylesheets/advanced_select/advanced_select.css

@@ -101,6 +101,40 @@
   z-index: 20;
 }
 
+.ui-advanced-select-tooltip {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  box-sizing: border-box;
+  color: #374151;
+  font-size: 0.875rem;
+  left: 0;
+  line-height: 1.25rem;
+  margin-top: 0.25rem;
+  min-width: 100%;
+  padding: 0.75rem 1rem;
+  position: absolute;
+  top: 100%;
+  width: max-content;
+  z-index: 30;
+}
+
+.ui-advanced-select-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-advanced-select-tooltip-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ui-advanced-select-search {
   border: 1px solid #e5e7eb;
   border-radius: 0.5rem;

data/app/javascript/advanced_select/advanced_select_controller.js

@@ -2,11 +2,13 @@ import { Controller } from "@hotwired/stimulus"
 import { Turbo } from "@hotwired/turbo-rails"
 
 export default class extends Controller {
-  static targets = ["hiddenFields", "trigger", "summary", "dropdown", "search", "options", "caret", "clear"]
+  static targets = ["hiddenFields", "trigger", "summary", "dropdown", "search", "options", "caret", "clear", "tooltip"]
   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 },
@@ -17,6 +19,8 @@ export default class extends Controller {
     placeholder: String,
     searchable: Boolean,
     selected: Array,
+    selectedCountText: String,
+    summaryMode: { type: String, default: "tokens" },
     targetId: String,
     url: String
   }
@@ -28,6 +32,7 @@ export default class extends Controller {
     this.placeholderClass = this.element.dataset.advancedSelectPlaceholderClass || "ui-advanced-select-placeholder"
     this.valueClass = this.element.dataset.advancedSelectValueClass || "ui-advanced-select-value"
     this.tokenClass = this.element.dataset.advancedSelectTokenClass || "ui-advanced-select-token"
+    this.tooltipItemClass = this.element.dataset.advancedSelectTooltipItemClass || "ui-advanced-select-tooltip-item"
     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"
@@ -41,11 +46,17 @@ export default class extends Controller {
     }))
     this.close = this.close.bind(this)
     this.renderOptionsState()
+    this.setupEagerDependentFields()
   }
 
   disconnect() {
     window.clearTimeout(this.timer)
+    window.clearTimeout(this.tooltipHideTimer)
     document.removeEventListener("click", this.close)
+
+    if (this.dependentChangeListener) {
+      document.removeEventListener("change", this.dependentChangeListener)
+    }
   }
 
   toggle(event) {
@@ -59,11 +70,12 @@ export default class extends Controller {
   }
 
   open() {
+    this.hideTooltip(true)
     this.dropdownTarget.classList.remove("hidden")
     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())
@@ -186,7 +198,7 @@ export default class extends Controller {
     return (text || "").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
   }
 
-  fetchOptions({ selected = false } = {}) {
+  fetchOptions({ selected = false, autoSelect = false, eager = false } = {}) {
     if (!this.urlValue) {
       return
     }
@@ -221,23 +233,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
         }
 
@@ -291,9 +307,18 @@ export default class extends Controller {
   renderSelection() {
     this.hiddenFieldsTarget.replaceChildren(...this.hiddenFieldElements)
     this.summaryTarget.replaceChildren(...this.selectionElements)
+    this.renderTooltip()
     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() {
@@ -319,6 +344,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(
@@ -364,6 +437,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
   }
@@ -400,6 +477,10 @@ export default class extends Controller {
       return [this.textElement("span", this.valueClass, this.displayLabel(this.selectedValue[0]))]
     }
 
+    if (this.summaryModeValue === "count") {
+      return [this.textElement("span", this.valueClass, this.selectedCountLabel(this.selectedValue.length))]
+    }
+
     const tokens = this.selectedValue.slice(0, 2).map((option) => this.textElement("span", this.tokenClass, this.displayLabel(option)))
 
     if (this.selectedValue.length > 2) {
@@ -409,10 +490,60 @@ export default class extends Controller {
     return tokens
   }
 
+  selectedCountLabel(count) {
+    return (this.selectedCountTextValue || "%{count}").replace("%{count}", count)
+  }
+
   displayLabel(option) {
     return option.displayLabel || option.label
   }
 
+  showTooltip() {
+    if (!this.hasTooltipTarget || this.expanded || this.selectedValue.length === 0) {
+      return
+    }
+
+    window.clearTimeout(this.tooltipHideTimer)
+    this.tooltipTarget.classList.remove("hidden")
+  }
+
+  hideTooltip(immediate = false) {
+    if (!this.hasTooltipTarget) {
+      return
+    }
+
+    window.clearTimeout(this.tooltipHideTimer)
+
+    if (immediate === true) {
+      this.tooltipTarget.classList.add("hidden")
+    } else {
+      this.tooltipHideTimer = window.setTimeout(() => this.tooltipTarget.classList.add("hidden"), 150)
+    }
+  }
+
+  keepTooltip() {
+    window.clearTimeout(this.tooltipHideTimer)
+  }
+
+  renderTooltip() {
+    if (!this.hasTooltipTarget || this.tooltipTarget.hasAttribute("data-advanced-select-tooltip-custom")) {
+      return
+    }
+
+    const list = this.tooltipTarget.querySelector("[data-advanced-select-tooltip-list]")
+    if (!list) {
+      return
+    }
+
+    list.replaceChildren(
+      ...this.selectedValue.map((option) => this.textElement("li", this.tooltipItemClass, this.displayLabel(option)))
+    )
+
+    if (this.selectedValue.length === 0) {
+      this.hideTooltip(true)
+    }
+  }
+
   textElement(tagName, className, text) {
     const element = document.createElement(tagName)
     element.className = className

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

@@ -13,9 +13,14 @@
      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-summary-mode-value="<%= summary_mode %>"
+     data-advanced-select-selected-count-text-value="<%= t("shared.advanced_select.selected_count", count: "%{count}") %>"
      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-tooltip-item-class="<%= advanced_select_class(class_map, :tooltip_item) %>"
      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) %>"
@@ -36,6 +41,8 @@
     <% end %>
   </div>
 
+  <% tooltip_enabled = tooltip || tooltip_partial.present? %>
+  
   <button type="button"
           id="<%= "#{id}_trigger" %>"
           class="<%= advanced_select_class(class_map, :trigger) %>"
@@ -43,14 +50,33 @@
           aria-expanded="false"
           aria-controls="<%= "#{id}_dropdown" %>"
           data-advanced-select-target="trigger"
-          data-action="advanced-select#toggle keydown->advanced-select#keydown">
+          data-action="advanced-select#toggle keydown->advanced-select#keydown<%= " mouseenter->advanced-select#showTooltip mouseleave->advanced-select#hideTooltip" if tooltip_enabled %>">
     <span id="<%= "#{id}_summary" %>" class="<%= advanced_select_class(class_map, :summary) %>" data-advanced-select-target="summary">
-      <%= render partial: "advanced_select/summary", locals: { selected_options: selected_options, multiple: multiple, placeholder: placeholder, class_map: class_map } %>
+      <%= render partial: "advanced_select/summary", locals: { selected_options: selected_options, multiple: multiple, placeholder: placeholder, summary_mode: summary_mode, class_map: class_map } %>
     </span>
     <span id="<%= "#{id}_caret" %>" class="<%= [advanced_select_class(class_map, :caret), ("hidden" if selected_options.any?)].compact.join(" ") %>" data-advanced-select-target="caret">&#8964;</span>
     <span id="<%= "#{id}_clear" %>" class="<%= [advanced_select_class(class_map, :clear), ("hidden" if selected_options.empty?)].compact.join(" ") %>" data-advanced-select-target="clear" data-action="click->advanced-select#clear">&times;</span>
   </button>
 
+  <% if tooltip_enabled %>
+    <div id="<%= "#{id}_tooltip" %>"
+         class="<%= [advanced_select_class(class_map, :tooltip), "hidden"].join(" ") %>"
+         role="tooltip"
+         data-advanced-select-target="tooltip"
+         <%= "data-advanced-select-tooltip-custom" if tooltip_partial.present? %>
+         data-action="mouseenter->advanced-select#keepTooltip mouseleave->advanced-select#hideTooltip">
+      <% if tooltip_partial.present? %>
+        <%= render partial: tooltip_partial, locals: { selected_options: selected_options, options: options } %>
+      <% else %>
+        <ul class="<%= advanced_select_class(class_map, :tooltip_list) %>" data-advanced-select-tooltip-list>
+          <% selected_options.each do |option| %>
+            <li class="<%= advanced_select_class(class_map, :tooltip_item) %>"><%= option.fetch(:display_label) %></li>
+          <% end %>
+        </ul>
+      <% end %>
+    </div>
+  <% end %>
+
   <div id="<%= "#{id}_dropdown" %>"
        class="<%= [advanced_select_class(class_map, :dropdown), "hidden"].join(" ") %>"
        data-advanced-select-target="dropdown">

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

@@ -1,10 +1,15 @@
+<% summary_mode = local_assigns.fetch(:summary_mode, :tokens) %>
 <% if selected_options.any? %>
   <% if multiple %>
-    <% selected_options.first(2).each do |option| %>
-      <span class="<%= advanced_select_class(class_map, :token) %>"><%= option.fetch(:display_label) %></span>
-    <% end %>
-    <% if selected_options.size > 2 %>
-      <span class="<%= advanced_select_class(class_map, :token) %>"><%= "& +#{selected_options.size - 2}" %></span>
+    <% if summary_mode.to_s == "count" %>
+      <span class="<%= advanced_select_class(class_map, :value) %>"><%= t("shared.advanced_select.selected_count", count: selected_options.size) %></span>
+    <% else %>
+      <% selected_options.first(2).each do |option| %>
+        <span class="<%= advanced_select_class(class_map, :token) %>"><%= option.fetch(:display_label) %></span>
+      <% end %>
+      <% if selected_options.size > 2 %>
+        <span class="<%= advanced_select_class(class_map, :token) %>"><%= "& +#{selected_options.size - 2}" %></span>
+      <% end %>
     <% end %>
   <% else %>
     <span class="<%= advanced_select_class(class_map, :value) %>"><%= selected_options.first.fetch(:display_label) %></span>

data/config/locales/en.yml

@@ -6,3 +6,4 @@ en:
       error: "Options could not be loaded"
       loading: "Loading..."
       search_placeholder: "Search..."
+      selected_count: "%{count} selected"

data/config/locales/tr.yml

@@ -6,3 +6,4 @@ tr:
       error: "Seçenekler yüklenemedi"
       loading: "Yükleniyor..."
       search_placeholder: "Ara..."
+      selected_count: "%{count} seçili"

data/lib/advanced_select/class_map.rb

@@ -9,6 +9,9 @@ module AdvancedSelect
       token: "ui-advanced-select-token",
       caret: "ui-advanced-select-caret",
       clear: "ui-advanced-select-clear",
+      tooltip: "ui-advanced-select-tooltip",
+      tooltip_list: "ui-advanced-select-tooltip-list",
+      tooltip_item: "ui-advanced-select-tooltip-item",
       dropdown: "ui-advanced-select-dropdown",
       search: "ui-advanced-select-search",
       options: "ui-advanced-select-options",

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, summary_mode: :tokens, tooltip: false, tooltip_partial: nil, option_content_partial: nil, classes: {}, append_classes: {})
       selected_options = advanced_select_selected_options(selected)
       class_map = advanced_select_class_map(classes, append_classes)
 
@@ -16,6 +16,11 @@ module AdvancedSelect
         add_mode: add_mode,
         dependent_fields: dependent_fields,
         include_hidden: include_hidden,
+        auto_select_single: auto_select_single,
+        eager: eager,
+        summary_mode: summary_mode,
+        tooltip: tooltip,
+        tooltip_partial: tooltip_partial,
         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.3"
+  VERSION = "0.1.5"
 end

data/lib/generators/advanced_select/install/templates/advanced_select.css

@@ -101,6 +101,40 @@
   z-index: 20;
 }
 
+.ui-advanced-select-tooltip {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  box-sizing: border-box;
+  color: #374151;
+  font-size: 0.875rem;
+  left: 0;
+  line-height: 1.25rem;
+  margin-top: 0.25rem;
+  min-width: 100%;
+  padding: 0.75rem 1rem;
+  position: absolute;
+  top: 100%;
+  width: max-content;
+  z-index: 30;
+}
+
+.ui-advanced-select-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-advanced-select-tooltip-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ui-advanced-select-search {
   border: 1px solid #e5e7eb;
   border-radius: 0.5rem;

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

@@ -2,11 +2,13 @@ import { Controller } from "@hotwired/stimulus"
 import { Turbo } from "@hotwired/turbo-rails"
 
 export default class extends Controller {
-  static targets = ["hiddenFields", "trigger", "summary", "dropdown", "search", "options", "caret", "clear"]
+  static targets = ["hiddenFields", "trigger", "summary", "dropdown", "search", "options", "caret", "clear", "tooltip"]
   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 },
@@ -17,6 +19,8 @@ export default class extends Controller {
     placeholder: String,
     searchable: Boolean,
     selected: Array,
+    selectedCountText: String,
+    summaryMode: { type: String, default: "tokens" },
     targetId: String,
     url: String
   }
@@ -28,6 +32,7 @@ export default class extends Controller {
     this.placeholderClass = this.element.dataset.advancedSelectPlaceholderClass || "ui-advanced-select-placeholder"
     this.valueClass = this.element.dataset.advancedSelectValueClass || "ui-advanced-select-value"
     this.tokenClass = this.element.dataset.advancedSelectTokenClass || "ui-advanced-select-token"
+    this.tooltipItemClass = this.element.dataset.advancedSelectTooltipItemClass || "ui-advanced-select-tooltip-item"
     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"
@@ -41,11 +46,17 @@ export default class extends Controller {
     }))
     this.close = this.close.bind(this)
     this.renderOptionsState()
+    this.setupEagerDependentFields()
   }
 
   disconnect() {
     window.clearTimeout(this.timer)
+    window.clearTimeout(this.tooltipHideTimer)
     document.removeEventListener("click", this.close)
+
+    if (this.dependentChangeListener) {
+      document.removeEventListener("change", this.dependentChangeListener)
+    }
   }
 
   toggle(event) {
@@ -59,11 +70,12 @@ export default class extends Controller {
   }
 
   open() {
+    this.hideTooltip(true)
     this.dropdownTarget.classList.remove("hidden")
     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())
@@ -186,7 +198,7 @@ export default class extends Controller {
     return (text || "").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
   }
 
-  fetchOptions({ selected = false } = {}) {
+  fetchOptions({ selected = false, autoSelect = false, eager = false } = {}) {
     if (!this.urlValue) {
       return
     }
@@ -221,23 +233,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
         }
 
@@ -291,9 +307,18 @@ export default class extends Controller {
   renderSelection() {
     this.hiddenFieldsTarget.replaceChildren(...this.hiddenFieldElements)
     this.summaryTarget.replaceChildren(...this.selectionElements)
+    this.renderTooltip()
     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() {
@@ -319,6 +344,56 @@ 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
+    }
+
+    // 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() {
     if (this.activeOption.hasAttribute("data-advanced-select-add-option")) {
       this.addOption(
@@ -364,6 +439,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
   }
@@ -400,6 +479,10 @@ export default class extends Controller {
       return [this.textElement("span", this.valueClass, this.displayLabel(this.selectedValue[0]))]
     }
 
+    if (this.summaryModeValue === "count") {
+      return [this.textElement("span", this.valueClass, this.selectedCountLabel(this.selectedValue.length))]
+    }
+
     const tokens = this.selectedValue.slice(0, 2).map((option) => this.textElement("span", this.tokenClass, this.displayLabel(option)))
 
     if (this.selectedValue.length > 2) {
@@ -409,10 +492,60 @@ export default class extends Controller {
     return tokens
   }
 
+  selectedCountLabel(count) {
+    return (this.selectedCountTextValue || "%{count}").replace("%{count}", count)
+  }
+
   displayLabel(option) {
     return option.displayLabel || option.label
   }
 
+  showTooltip() {
+    if (!this.hasTooltipTarget || this.expanded || this.selectedValue.length === 0) {
+      return
+    }
+
+    window.clearTimeout(this.tooltipHideTimer)
+    this.tooltipTarget.classList.remove("hidden")
+  }
+
+  hideTooltip(immediate = false) {
+    if (!this.hasTooltipTarget) {
+      return
+    }
+
+    window.clearTimeout(this.tooltipHideTimer)
+
+    if (immediate === true) {
+      this.tooltipTarget.classList.add("hidden")
+    } else {
+      this.tooltipHideTimer = window.setTimeout(() => this.tooltipTarget.classList.add("hidden"), 150)
+    }
+  }
+
+  keepTooltip() {
+    window.clearTimeout(this.tooltipHideTimer)
+  }
+
+  renderTooltip() {
+    if (!this.hasTooltipTarget || this.tooltipTarget.hasAttribute("data-advanced-select-tooltip-custom")) {
+      return
+    }
+
+    const list = this.tooltipTarget.querySelector("[data-advanced-select-tooltip-list]")
+    if (!list) {
+      return
+    }
+
+    list.replaceChildren(
+      ...this.selectedValue.map((option) => this.textElement("li", this.tooltipItemClass, this.displayLabel(option)))
+    )
+
+    if (this.selectedValue.length === 0) {
+      this.hideTooltip(true)
+    }
+  }
+
   textElement(tagName, className, text) {
     const element = document.createElement(tagName)
     element.className = className
@@ -448,4 +581,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.3
+  version: 0.1.5
 platform: ruby
 authors:
 - Mehmet Celik