Merge pull request #1524 from basecamp/one-filter-at-a-time

One filter at a time

app/javascript/controllers/dialog_manager_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.addEventListener("dialog:show", this.handleDialogShow.bind(this))
+  }
+
+  disconnect() {
+    this.element.removeEventListener("dialog:show", this.handleDialogShow.bind(this))
+  }
+
+  handleDialogShow(event) {
+    this.#dialogControllers.forEach(dialogController => {
+      if (dialogController !== event.target) {
+        const dialog = dialogController.querySelector("dialog")
+        dialog.removeAttribute("open")
+      }
+    })
+  }
+
+  get #dialogControllers() {
+    return this.element.querySelectorAll('[data-controller~="dialog"]')
+  }
+}

app/views/filters/_settings.html.erb

@@ -1,7 +1,7 @@
 <%= tag.aside \
       class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }),
       data: {
-        controller: "toggle-enable toggle-class filter-settings",
+        controller: "toggle-enable toggle-class filter-settings dialog-manager",
         toggle_class_toggle_class: "filters--expanded",
         filter_settings_filters_set_class: "filters--has-filters-set",
         filter_settings_no_filtering_url_value: no_filtering_url,

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

@@ -1,5 +1,5 @@
 <% filter = user_filtering.filter %>
-<%= tag.div class: "quick-filter position-relative",
+<%= tag.div class: "quick-filter",
       data: {
         controller: "dialog multi-selection-combobox",
         action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",

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

@@ -1,6 +1,6 @@
 <% filter = user_filtering.filter %>
 
-<%= tag.div class: "quick-filter position-relative",
+<%= tag.div class: "quick-filter",
       data: {
         controller: "dialog multi-selection-combobox",
         action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",

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

@@ -1,6 +1,6 @@
 <% filter = user_filtering.filter %>
 
-<%= tag.div class: "quick-filter position-relative",
+<%= tag.div class: "quick-filter",
       data: {
         controller: "dialog multi-selection-combobox",
         action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",

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

@@ -1,6 +1,6 @@
 <% filter = user_filtering.filter %>
 
-<%= tag.div class: "quick-filter position-relative",
+<%= tag.div class: "quick-filter",
       data: {
         controller: "dialog multi-selection-combobox",
         action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",

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

@@ -1,6 +1,6 @@
 <% filter = user_filtering.filter %>
 
-<%= tag.div class: class_names("quick-filter position-relative"),
+<%= tag.div class: class_names("quick-filter"),
       data: { controller: "dialog combobox",
             action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
             filter_show: user_filtering.show_indexed_by?,

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

@@ -1,6 +1,6 @@
 <% filter = user_filtering.filter %>
 
-<%= tag.div class: class_names("quick-filter position-relative"),
+<%= tag.div class: class_names("quick-filter"),
       data: {
         controller: "dialog combobox",
         action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",

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

@@ -1,5 +1,5 @@
 <% filter = user_filtering.filter %>
-<%= tag.div class: "quick-filter position-relative",
+<%= tag.div class: "quick-filter",
       data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: filter.public_send("#{name}_window").present? } do %>
     <button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
       <span class="overflow-ellipsis">