advanced_select 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54b72a840fc9224ed932cb7cef5f070b9d1886be46a88898879d7a1d4bd9681b
-  data.tar.gz: 6799024650b16bc9110353edf37ae1507c1a07b5b8482109a992cd436b47f5a0
+  metadata.gz: 8acafe10e284da26e61bec53737160926b3b6f43e51aa4d2a690e9a9b5a47367
+  data.tar.gz: c2465e1a792dc86ece9747b18fe2dcb3e077d706aed3e178515fe1376308067b
 SHA512:
-  metadata.gz: 4084582d35f08891e34dbaebdd46ec565ac7f169a4752c9bc8dc58390f81f5cdad0163b3bff45d3e987f15a9e65c7d3029be20f0feadc4ed3ab7d0aa2a336c60
-  data.tar.gz: b797dc1f36f445dfcb4b18b3b0fd59e810670bc09efaf4db4640f80f4ea465f972fab662ecd22f1edc8106288cd22281733f7a7927fa7f802f08995b8430e862
+  metadata.gz: d9a0cefc246959a5f8f5910e91e648f5654c55eee8bbb63ae78232c5abd9b7ab0b307eb04744f70016d5e23ab54cc3b7c9a6973c18b5d2ea3b885255a54e8c5a
+  data.tar.gz: 4e4143bb1da3fb3e50f5aa6fda9cce40f3631c6f7d0ba5b2185a5f06ca4cb9f0b16938932aca365206cf0391ac5b8151335ae1e32e1e5c9abd4a26447e383617

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", git: "https://github.com/MehmetCelik4/advanced_select.git"
+gem "advanced_select", "~> 0.1.0"
 ```
 
 Run the installer:
@@ -408,6 +408,25 @@ For remote multiple options, pass `multiple: true` to the options render too:
 ) %>
 ```
 
+When users select an option from a long multiple-select list, AdvancedSelect moves that visible option to the top of the dropdown. This applies to both local options and remote Turbo Stream-refreshed option lists, so newly selected rows stay easy to review and deselect.
+
+For multiple selects, AdvancedSelect emits a blank hidden field (`<input type="hidden" name="..." value="">`) before the selected values, matching Rails' built-in `f.select multiple: true` and `f.collection_check_boxes` behavior. Without it, clearing every selection would leave the parameter out of the submission entirely, so Rails would skip updating the association instead of clearing it.
+
+Pass `include_hidden: false` to opt out — for example, when your controller relies on the parameter being absent for partial updates:
+
+```erb
+<%= advanced_select_tag(
+  "record[item_ids][]",
+  id: "record_item_ids",
+  selected: selected_options,
+  options: options,
+  placeholder: t(".items_placeholder"),
+  multiple: true,
+  include_hidden: false,
+  searchable: false
+) %>
+```
+
 ### Add Mode
 
 Set `add_mode: true` when users may submit a new typed value:
@@ -610,6 +629,7 @@ advanced_select_tag(
   searchable: true,
   add_mode: false,
   dependent_fields: {},
+  include_hidden: true,
   option_content_partial: nil,
   classes: {},
   append_classes: {}

data/app/javascript/advanced_select/advanced_select_controller.js

@@ -8,6 +8,7 @@ export default class extends Controller {
     delay: { type: Number, default: 200 },
     dependentFields: Object,
     errorText: String,
+    includeHidden: { type: Boolean, default: true },
     inputId: String,
     loadingText: String,
     multiple: Boolean,
@@ -37,6 +38,7 @@ export default class extends Controller {
       displayLabel: option.displayLabel || option.label
     }))
     this.close = this.close.bind(this)
+    this.renderOptionsState()
   }
 
   disconnect() {
@@ -214,7 +216,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 }]
@@ -240,6 +242,7 @@ export default class extends Controller {
 
   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 +254,13 @@ 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)
+    }
   }
 
   chooseActiveOption() {
@@ -303,7 +313,13 @@ export default class extends Controller {
   }
 
   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 +392,4 @@ export default class extends Controller {
   get expanded() {
     return this.triggerTarget.getAttribute("aria-expanded") === "true"
   }
-}
+}

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

@@ -4,13 +4,15 @@
      aria-busy="false"
      <% if local_assigns[:multiple] %>aria-multiselectable="true"<% end %>
      role="listbox">
+  <% selected_option_ids = advanced_select_selected_option_ids(selected_options) %>
+
   <% 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>
     <% end %>
 
     <% group.fetch(:options).each do |option| %>
-      <%= render partial: "advanced_select/option", locals: { option: option, selected_options: selected_options, option_content_partial: option_content_partial, class_map: class_map } %>
+      <%= advanced_select_option_tag(option, selected_options, option_content_partial, class_map, selected_option_ids: selected_option_ids) %>
     <% end %>
   <% end %>
 

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

@@ -11,6 +11,7 @@
      data-advanced-select-multiple-value="<%= multiple %>"
      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-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) %>"
@@ -22,6 +23,9 @@
      data-advanced-select-selected-value="<%= advanced_select_selected_value(selected_options) %>">
   <div data-advanced-select-target="hiddenFields">
     <% if multiple %>
+      <% if include_hidden %>
+        <%= hidden_field_tag name, "", id: nil %>
+      <% end %>
       <% selected_options.each do |option| %>
         <%= hidden_field_tag name, option.fetch(:value, option.fetch(:id)) %>
       <% end %>

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: {}, 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, option_content_partial: nil, classes: {}, append_classes: {})
       selected_options = advanced_select_selected_options(selected)
       class_map = advanced_select_class_map(classes, append_classes)
 
@@ -15,6 +15,7 @@ module AdvancedSelect
         searchable: searchable && options_url.present?,
         add_mode: add_mode,
         dependent_fields: dependent_fields,
+        include_hidden: include_hidden,
         target_id: "#{id}_options",
         option_content_partial: option_content_partial,
         class_map: class_map
@@ -59,6 +60,56 @@ module AdvancedSelect
       end.to_json
     end
 
+    def advanced_select_option_tag(option, selected_options, option_content_partial, class_map, selected_option_ids: nil)
+      selected = advanced_select_option_selected?(option, selected_options, selected_option_ids)
+
+      tag.button(
+        type: "button",
+        class: advanced_select_class(class_map, :option, (:option_selected if selected)),
+        role: "option",
+        aria: { selected: selected },
+        data: {
+          advanced_select_option: "",
+          action: "mouseenter->advanced-select#activateOption mousedown->advanced-select#choose",
+          advanced_select_value_param: option.fetch(:id),
+          advanced_select_submit_value_param: advanced_select_option_value(option),
+          advanced_select_label_param: advanced_select_option_label(option),
+          advanced_select_display_label_param: advanced_select_option_display_label(option)
+        }
+      ) do
+        safe_join([
+          tag.span(
+            (selected ? "\u2713" : ""),
+            class: advanced_select_class(class_map, :option_check),
+            data: { advanced_select_option_check: "" }
+          ),
+          advanced_select_option_content_tag(option, option_content_partial, class_map)
+        ])
+      end
+    end
+
+    def advanced_select_option_content_tag(option, option_content_partial, class_map)
+      if option_content_partial.present?
+        render partial: option_content_partial, locals: { option: option }
+      else
+        advanced_select_default_option_content_tag(option, class_map)
+      end
+    end
+
+    def advanced_select_default_option_content_tag(option, class_map)
+      description = advanced_select_option_description(option)
+      content = [tag.span(advanced_select_option_label(option))]
+
+      if description.present?
+        content << tag.span(
+          description,
+          class: advanced_select_class(class_map, :option_description)
+        )
+      end
+
+      tag.span(safe_join(content), class: advanced_select_class(class_map, :option_content))
+    end
+
     def advanced_select_options_for_render(options, selected_options, searchable)
       searchable ? selected_options.presence || options : options
     end
@@ -82,7 +133,15 @@ module AdvancedSelect
       end
     end
 
-    def advanced_select_option_selected?(option, selected_options)
+    def advanced_select_selected_option_ids(selected_options)
+      selected_options.each_with_object({}) do |selected_option, selected_option_ids|
+        selected_option_ids[selected_option.fetch(:id).to_s] = true
+      end
+    end
+
+    def advanced_select_option_selected?(option, selected_options, selected_option_ids = nil)
+      return selected_option_ids.key?(option.fetch(:id).to_s) if selected_option_ids
+
       selected_options.any? { |selected_option| selected_option.fetch(:id).to_s == option.fetch(:id).to_s }
     end
 

data/lib/advanced_select/version.rb

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

metadata

@@ -1,10 +1,12 @@
 --- !ruby/object:Gem::Specification
 name: advanced_select
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Mehmet Celik
+- Tankut Ozbeyendir
+- Emre ULUSOY
 bindir: bin
 cert_chain: []
 date: 1980-01-01 00:00:00.000000000 Z
@@ -84,6 +86,8 @@ description: AdvancedSelect provides helper-rendered Rails partials, Stimulus dr
   leaving data loading, authorization, and endpoints to the host app.
 email:
 - mehmetcelik4@gmail.com
+- tankutozbeyendir@gmail.com
+- ulsyemr@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []