diff --git a/app/javascript/controllers/dialog_manager_controller.js b/app/javascript/controllers/dialog_manager_controller.js new file mode 100644 index 000000000..71552e2c8 --- /dev/null +++ b/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"]') + } +} diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb index ae604011c..52137b5de 100644 --- a/app/views/filters/_settings.html.erb +++ b/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, diff --git a/app/views/filters/settings/_assignees.html.erb b/app/views/filters/settings/_assignees.html.erb index 996116d63..0a60a4878 100644 --- a/app/views/filters/settings/_assignees.html.erb +++ b/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", diff --git a/app/views/filters/settings/_boards.html.erb b/app/views/filters/settings/_boards.html.erb index 5caf96d65..97a21618d 100644 --- a/app/views/filters/settings/_boards.html.erb +++ b/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", diff --git a/app/views/filters/settings/_closers.html.erb b/app/views/filters/settings/_closers.html.erb index 5da789245..24e542b1e 100644 --- a/app/views/filters/settings/_closers.html.erb +++ b/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", diff --git a/app/views/filters/settings/_creators.html.erb b/app/views/filters/settings/_creators.html.erb index 92385f7a2..8453fe745 100644 --- a/app/views/filters/settings/_creators.html.erb +++ b/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", diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb index 48bf476da..8175fea9e 100644 --- a/app/views/filters/settings/_indexed_by.html.erb +++ b/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?, diff --git a/app/views/filters/settings/_sorted_by.html.erb b/app/views/filters/settings/_sorted_by.html.erb index 5379cfd17..e5c0adc4e 100644 --- a/app/views/filters/settings/_sorted_by.html.erb +++ b/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", diff --git a/app/views/filters/settings/_time_window.html.erb b/app/views/filters/settings/_time_window.html.erb index cfc827ecc..b747384ac 100644 --- a/app/views/filters/settings/_time_window.html.erb +++ b/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 %>