From 81cae9cbe00f11fe6b554e85822c6c64567c3be0 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@hey.com>
Date: Thu, 18 Sep 2025 18:39:45 +0200
Subject: [PATCH] Fix default handling

---
 app/assets/stylesheets/filters.css            |  2 +-
 .../controllers/combobox_controller.js        | 34 +++++++-
 .../filters/settings/_assignees.html.erb      | 85 ++++++-------------
 app/views/filters/settings/_closers.html.erb  | 55 +++++-------
 app/views/filters/settings/_controls.html.erb |  8 +-
 app/views/filters/settings/_creators.html.erb | 55 +++++-------
 .../filters/settings/_indexed_by.html.erb     | 10 ++-
 .../filters/settings/_sorted_by.html.erb      | 11 +--
 8 files changed, 119 insertions(+), 141 deletions(-)

diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index a2141bbc6..2b9b9929a 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -116,7 +116,7 @@
       display: block;
     }
 
-    &:has([aria-checked="true"]) {
+    &:has([aria-checked="true"]):not(.quick-filter--with-default) {
       .input--select {
         --input-background: var(--color-selected);
       }
diff --git a/app/javascript/controllers/combobox_controller.js b/app/javascript/controllers/combobox_controller.js
index 92778215a..4764b8ceb 100644
--- a/app/javascript/controllers/combobox_controller.js
+++ b/app/javascript/controllers/combobox_controller.js
@@ -6,11 +6,13 @@ export default class extends Controller {
   static targets = [ "label", "item", "hiddenFieldTemplate" ]
   static values = {
     selectPropertyName: { type: String, default: "aria-checked" },
-    defaultValue: String
+    defaultValue: String,
+    defaultLabel: String
   }
+  static classes = ["withDefault"]
 
   connect() {
-    this.labelTarget.textContent = this.#selectedLabel
+    this.#selectedItem = this.#selectedItem
   }
 
   change(event) {
@@ -21,6 +23,14 @@ export default class extends Controller {
   }
 
   get #selectedLabel() {
+    const selectedValue = this.#selectedItemValue()
+    console.debug("Es ", this.defaultValueValue);
+    if (this.hasDefaultLabelValue && (selectedValue === this.defaultValueValue || !selectedValue)) {
+      return this.defaultLabelValue
+    }
+
+    console.debug("EIN", this.#selectedItem);
+
     return this.#selectedItem?.dataset?.comboboxLabel || ""
   }
 
@@ -28,11 +38,18 @@ export default class extends Controller {
     return this.itemTargets.find(item => item.getAttribute(this.selectPropertyNameValue) === "true")
   }
 
+  #selectedItemValue() {
+    return this.#selectedItem?.dataset?.comboboxValue || ""
+  }
+
   set #selectedItem(item) {
+    if (!item) return
+
     this.#clearSelection()
     item.setAttribute(this.selectPropertyNameValue, "true")
     this.labelTarget.textContent = this.#selectedLabel
     this.hiddenField.value = item.dataset.comboboxValue
+    this.#updateWithDefaultClass()
   }
 
   #clearSelection() {
@@ -53,4 +70,17 @@ export default class extends Controller {
     this.element.appendChild(field)
     return field
   }
+
+  #updateWithDefaultClass() {
+    if (this.hasWithDefaultClass && this.hasDefaultValueValue) {
+      const selectedValue = this.#selectedItemValue()
+      const shouldHaveClass = selectedValue === this.defaultValueValue
+
+      if (shouldHaveClass) {
+        this.element.classList.add(this.withDefaultClass)
+      } else {
+        this.element.classList.remove(this.withDefaultClass)
+      }
+    }
+  }
 }
diff --git a/app/views/filters/settings/_assignees.html.erb b/app/views/filters/settings/_assignees.html.erb
index 2ea5e389f..7bdc68f40 100644
--- a/app/views/filters/settings/_assignees.html.erb
+++ b/app/views/filters/settings/_assignees.html.erb
@@ -1,18 +1,19 @@
 <% filter = user_filtering.filter %>
 <%= tag.div class: "quick-filter position-relative",
-      data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_assignees? } do %>
-    <button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
-      <span class="overflow-ellipsis">
-        <% if filter.assignment_status.unassigned? %>
-          No one
-        <% elsif filter.assignees.any? %>
-          Assigned to <%= filter.assignees.map(&:familiar_name).to_sentence(two_words_connector: " or ", last_word_connector: ", or ") %>
-        <% else %>
-          Assigned to…
-        <% end %>
+      data: {
+        controller: "dialog multi-selection-combobox form",
+        action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
+        filter_show: user_filtering.show_assignees?,
+        multi_selection_combobox_no_selection_label_value: "Assigned to…" } do %>
+    <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
+      <span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
       </span>
     </button>
 
+    <template data-multi-selection-combobox-target="hiddenFieldTemplate">
+      <%= hidden_field_tag "assignee_ids[]", nil, data: { filter_settings_target: "field" } %>
+    </template>
+
     <%= filter_dialog "Assigned to…" do %>
       <strong class="popup__title">Assigned to…</strong>
 
@@ -21,55 +22,25 @@
               type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
       <% end %>
 
-      <ul class="popup__list" data-filter-target="list">
-        <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
-          <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
-            <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
-              <%= filter_hidden_field_tag key, value %>
-            <% end %>
-
-            <% unless filter.assignment_status.unassigned? %>
-              <%= hidden_field_tag :assignment_status, "unassigned" %>
-            <% end %>
-
-            <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
-
-            <%= form.button type: "submit", class: "popup__btn btn" do %>
-              <span class="overflow-ellipsis flex-item-grow">No one</span>
-              <% if filter.assignment_status.unassigned? %>
-                <%= icon_tag "check", class: "checked flex-item-justify-end" %>
-              <% end %>
-            <% end %>
-          <% end %>
-        </li>
+      <ul class="popup__list" data-filter-target="list" role="listbox">
+        <%= tag.li class: "popup__item", data: {
+              navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: "unassigned", multi_selection_combobox_label: "No one" },
+              role: "checkbox", aria: { checked: filter.assignment_status.unassigned? } do %>
+          <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change form#submit filter-settings#change">
+            <span class="overflow-ellipsis flex-item-grow">No one</span>
+            <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
+          </button>
+        <% end %>
 
         <% user_filtering.users.each do |user| %>
-          <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
-            <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
-              <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
-                <%= filter_hidden_field_tag key, value %>
-              <% end %>
-
-              <% filter.assignees.each do |existing_assignee| %>
-                <% unless existing_assignee == user %>
-                  <%= hidden_field_tag "assignee_ids[]", existing_assignee.id %>
-                <% end %>
-              <% end %>
-
-              <% unless filter.assignees.include?(user) %>
-                <%= hidden_field_tag "assignee_ids[]", user.id %>
-              <% end %>
-
-              <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
-
-              <%= form.button type: "submit", class: "popup__btn btn" do %>
-                <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
-                <% if filter.assignees.include?(user) %>
-                  <%= icon_tag "check", class: "checked flex-item-justify-end" %>
-                <% end %>
-              <% end %>
-            <% end %>
-          </li>
+          <%= tag.li class: "popup__item", data: {
+                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.name },
+                role: "checkbox", aria: { checked: filter.assignees.include?(user) } do %>
+            <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change form#submit filter-settings#change">
+              <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
+              <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
+            </button>
+          <% end %>
         <% end %>
       </ul>
     <% end %>
diff --git a/app/views/filters/settings/_closers.html.erb b/app/views/filters/settings/_closers.html.erb
index 779f68f9f..0215cf9cd 100644
--- a/app/views/filters/settings/_closers.html.erb
+++ b/app/views/filters/settings/_closers.html.erb
@@ -1,17 +1,20 @@
 <% filter = user_filtering.filter %>
 
 <%= tag.div class: "quick-filter position-relative",
-      data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_closers? } do %>
-    <button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
-      <span class="overflow-ellipsis">
-        <% if filter.closers.any? %>
-          <%= "Closed by #{filter.closers.map(&:familiar_name).to_sentence(two_words_connector: " or ", last_word_connector: ", or ")}" %>
-        <% else %>
-          Closed by…
-        <% end %>
+      data: {
+        controller: "dialog multi-selection-combobox form",
+        action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
+        filter_show: user_filtering.show_closers?,
+        multi_selection_combobox_no_selection_label_value: "Closed by…" } do %>
+    <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
+      <span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
       </span>
     </button>
 
+    <template data-multi-selection-combobox-target="hiddenFieldTemplate">
+      <%= hidden_field_tag "closer_ids[]", nil, data: { filter_settings_target: "field" } %>
+    </template>
+
     <%= filter_dialog "Closed by…" do %>
       <strong class="popup__title">Closed by…</strong>
 
@@ -20,34 +23,16 @@
               type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
       <% end %>
 
-      <ul class="popup__list" data-filter-target="list">
+      <ul class="popup__list" data-filter-target="list" role="listbox">
         <% user_filtering.users.each do |user| %>
-          <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
-            <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
-              <% filter.as_params.except(:closer_ids).each do |key, value| %>
-                <%= filter_hidden_field_tag key, value %>
-              <% end %>
-
-              <% filter.closers.each do |existing_closer| %>
-                <% unless existing_closer == user %>
-                  <%= hidden_field_tag "closer_ids[]", existing_closer.id %>
-                <% end %>
-              <% end %>
-
-              <% unless filter.closers.include?(user) %>
-                <%= hidden_field_tag "closer_ids[]", user.id %>
-              <% end %>
-
-              <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
-
-              <%= form.button type: "submit", class: "popup__btn btn" do %>
-                <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
-                <% if filter.closers.include?(user) %>
-                  <%= icon_tag "check", class: "checked flex-item-justify-end" %>
-                <% end %>
-              <% end %>
-            <% end %>
-          </li>
+          <%= tag.li class: "popup__item", data: {
+                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.name },
+                role: "checkbox", aria: { checked: filter.closers.include?(user) } do %>
+            <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change form#submit filter-settings#change">
+              <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
+              <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
+            </button>
+          <% end %>
         <% end %>
       </ul>
     <% end %>
diff --git a/app/views/filters/settings/_controls.html.erb b/app/views/filters/settings/_controls.html.erb
index 89a53d0f2..36bcf9002 100644
--- a/app/views/filters/settings/_controls.html.erb
+++ b/app/views/filters/settings/_controls.html.erb
@@ -3,8 +3,8 @@
   <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
   <%= render "filters/settings/sorted_by", user_filtering: user_filtering %>
   <%= render "filters/settings/indexed_by", user_filtering: user_filtering %>
-  <%= render "filters/settings/tags", user_filtering: user_filtering %>
-<%#= render "filters/settings/assignees", user_filtering: user_filtering %>
-<%#= render "filters/settings/creators", user_filtering: user_filtering %>
-<%#= render "filters/settings/closers", user_filtering: user_filtering %>
+  <%#= render "filters/settings/tags", user_filtering: user_filtering %>
+  <%#= render "filters/settings/assignees", user_filtering: user_filtering %>
+  <%#= render "filters/settings/creators", user_filtering: user_filtering %>
+  <%#= render "filters/settings/closers", user_filtering: user_filtering %>
 <% end %>
diff --git a/app/views/filters/settings/_creators.html.erb b/app/views/filters/settings/_creators.html.erb
index d1ab37986..b67a115e5 100644
--- a/app/views/filters/settings/_creators.html.erb
+++ b/app/views/filters/settings/_creators.html.erb
@@ -1,17 +1,20 @@
 <% filter = user_filtering.filter %>
 
 <%= tag.div class: "quick-filter position-relative",
-      data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_creators? } do %>
-    <button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
-      <span class="overflow-ellipsis">
-        <% if filter.creators.any? %>
-          <%= "Added by #{filter.creators.map(&:familiar_name).to_sentence(two_words_connector: " or ", last_word_connector: ", or ")}" %>
-        <% else %>
-          Added by…
-        <% end %>
+      data: {
+        controller: "dialog multi-selection-combobox form",
+        action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
+        filter_show: user_filtering.show_creators?,
+        multi_selection_combobox_no_selection_label_value: "Added by…" } do %>
+    <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
+      <span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
       </span>
     </button>
 
+    <template data-multi-selection-combobox-target="hiddenFieldTemplate">
+      <%= hidden_field_tag "creator_ids[]", nil, data: { filter_settings_target: "field" } %>
+    </template>
+
     <%= filter_dialog "Added by…" do %>
       <strong class="popup__title">Added by…</strong>
 
@@ -20,34 +23,16 @@
               type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
       <% end %>
 
-      <ul class="popup__list" data-filter-target="list">
+      <ul class="popup__list" data-filter-target="list" role="listbox">
         <% user_filtering.users.each do |user| %>
-          <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
-            <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
-              <% filter.as_params.except(:creator_ids).each do |key, value| %>
-                <%= filter_hidden_field_tag key, value %>
-              <% end %>
-
-              <% filter.creators.each do |existing_creators| %>
-                <% unless existing_creators == user %>
-                  <%= hidden_field_tag "creator_ids[]", existing_creators.id %>
-                <% end %>
-              <% end %>
-
-              <% unless filter.creators.include?(user) %>
-                <%= hidden_field_tag "creator_ids[]", user.id %>
-              <% end %>
-
-              <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
-
-              <%= form.button type: "submit", class: "popup__btn btn" do %>
-                <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
-                <% if filter.creators.include?(user) %>
-                  <%= icon_tag "check", class: "checked flex-item-justify-end" %>
-                <% end %>
-              <% end %>
-            <% end %>
-          </li>
+          <%= tag.li class: "popup__item", data: {
+                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.name },
+                role: "checkbox", aria: { checked: filter.creators.include?(user) } do %>
+            <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change form#submit filter-settings#change">
+              <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
+              <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
+            </button>
+          <% end %>
         <% end %>
       </ul>
     <% end %>
diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb
index 93fca342f..659788e18 100644
--- a/app/views/filters/settings/_indexed_by.html.erb
+++ b/app/views/filters/settings/_indexed_by.html.erb
@@ -1,7 +1,13 @@
 <% filter = user_filtering.filter %>
 
 <%= tag.div class: class_names("quick-filter position-relative"),
-      data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by?, turbo_action: "advance", combobox_default_value: "all" } do %>
+      data: { controller: "dialog combobox form",
+            action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
+            filter_show: user_filtering.show_indexed_by?,
+            turbo_action: "advance",
+            combobox_default_value_value: "all",
+            combobox_default_label_value: "Status",
+            combobox_with_default_class: "quick-filter--with-default" } do %>
     <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
       <span class="overflow-ellipsis" data-combobox-target="label">
       </span>
@@ -16,7 +22,7 @@
 
       <ul class="popup__list" data-filter-target="list" role="listbox">
         <% Filter::INDEXES.each do |index| %>
-          <%= tag.li class: "popup__item", data: { navigable_list_target: "item", combobox_target: "item", combobox_value: index, combobox_label: (index == "all" ? "Status" : index.humanize) }, role: "checkbox", aria: { checked: filter.indexed_by == index } do %>
+          <%= tag.li class: "popup__item", data: { navigable_list_target: "item", combobox_target: "item", combobox_value: index, combobox_label: index.humanize }, role: "checkbox", aria: { checked: filter.indexed_by == index } do %>
             <button type="button" class="btn popup__btn" data-action="dialog#close combobox#change form#submit filter-settings#change">
               <span class="overflow-ellipsis flex-item-grow"><%= index == "all" ? "Status" : index.humanize %></span>
               <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
diff --git a/app/views/filters/settings/_sorted_by.html.erb b/app/views/filters/settings/_sorted_by.html.erb
index eff94c017..9299b6df4 100644
--- a/app/views/filters/settings/_sorted_by.html.erb
+++ b/app/views/filters/settings/_sorted_by.html.erb
@@ -2,11 +2,12 @@
 
 <%= tag.div class: class_names("quick-filter position-relative"),
       data: {
-            controller: "dialog combobox",
-            action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
-            filter_show: user_filtering.show_sorted_by?,
-            turbo_action: "advance",
-            combobox_default_value: "latest" } do %>
+        controller: "dialog combobox",
+        action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
+        filter_show: user_filtering.show_sorted_by?,
+        turbo_action: "advance",
+        combobox_default_value_value: "latest",
+        combobox_with_default_class: "quick-filter--with-default" } do %>
     <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
       <span class="overflow-ellipsis" data-combobox-target="label">
       </span>