Fix: Filter by "no one" assigned

This also adds support to make some selection items exclusive in the combo boxes.

app/javascript/controllers/multi_selection_combobox_controller.js

@@ -40,7 +40,7 @@ export default class extends Controller {
       return this.noSelectionLabelValue
     }
 
-    const labels = this.#selectedItems().map(item => item.dataset.multiSelectionComboboxLabel)
+    const labels = this.#selectedItems.map(item => item.dataset.multiSelectionComboboxLabel)
     const sentence = toSentence(labels, {
       two_words_connector: " or ",
       last_word_connector: ", or "
@@ -55,13 +55,28 @@ export default class extends Controller {
     if (isSelected) {
       item.setAttribute(this.selectPropertyNameValue, "false")
     } else {
+      if (this.isAnExclusiveSelectionItemInvolved(item)) {
+        this.#deselectAll()
+      }
+
       item.setAttribute(this.selectPropertyNameValue, "true")
     }
 
     this.#updateHiddenFields()
+    if (item.dataset.multiSelectionFieldName) {
+      this.#renameHiddenFields(item.dataset.multiSelectionFieldName)
+    }
     this.labelTarget.textContent = this.#selectedLabel
   }
 
+  isAnExclusiveSelectionItemInvolved(item) {
+    return this.#isExclusiveSelection(item) || Array.from(this.#selectedItems).some((item) => this.#isExclusiveSelection(item))
+  }
+
+  #isExclusiveSelection(item) {
+    return item.dataset.multiSelectionExclusive === "true"
+  }
+
   #updateHiddenFields() {
     this.#clearHiddenFields()
     this.#addHiddenFields()
@@ -73,22 +88,32 @@ export default class extends Controller {
     })
   }
 
-  #selectedItems() {
+  get #selectedItems() {
     return this.itemTargets.filter(item =>
       item.getAttribute(this.selectPropertyNameValue) === "true"
     )
   }
 
   #selectedValues() {
-    return this.#selectedItems().map(item => item.dataset.multiSelectionComboboxValue)
+    return this.#selectedItems.map(item => item.dataset.multiSelectionComboboxValue)
   }
 
   #clearHiddenFields() {
-    this.element.querySelectorAll('input[type="hidden"]').forEach(field => {
+    this.#hiddenFields.forEach(field => {
       field.remove()
     })
   }
 
+  #renameHiddenFields(fieldName) {
+    this.#hiddenFields.forEach(field => {
+      field.setAttribute("name", fieldName)
+    })
+  }
+
+  get #hiddenFields() {
+    return this.element.querySelectorAll("input[type='hidden']")
+  }
+
   #addHiddenFields() {
     this.#selectedValues().forEach(value => {
       const [ field ] = this.hiddenFieldTemplateTarget.content.cloneNode(true).children

app/views/filters/settings/_assignees.html.erb

@@ -25,9 +25,10 @@
 
       <ul class="popup__list" data-filter-target="list" role="listbox">
         <%= tag.li class: "popup__item", data: {
-              filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: "unassigned", multi_selection_combobox_label: "No one" },
+              filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: "unassigned",
+              multi_selection_combobox_label: "No one", multi_selection_field_name: "assignment_status", multi_selection_exclusive: true },
               role: "checkbox", aria: { checked: filter.assignment_status.unassigned? } do %>
-          <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#clear filter-settings#change form#submit">
+          <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
             <span class="overflow-ellipsis flex-item-grow">No one</span>
             <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </button>