From d8602827086647a2df6bc74a7d6aedb3f0fb1c51 Mon Sep 17 00:00:00 2001
From: Paul Bob <69730720+Paul-Bob@users.noreply.github.com>
Date: Fri, 4 Oct 2024 12:32:20 +0300
Subject: [PATCH] fix: tags filters closing on tag selection (#3306)

---
 .../js/controllers/toggle_controller.js          | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/javascript/js/controllers/toggle_controller.js b/app/javascript/js/controllers/toggle_controller.js
index 01b4dff9b..1041e783f 100644
--- a/app/javascript/js/controllers/toggle_controller.js
+++ b/app/javascript/js/controllers/toggle_controller.js
@@ -6,12 +6,12 @@ export default class extends Controller {
   static targets = ['panel']
 
   static values = {
-    // One may want to have an element that is exempt from triggerring the click outside event
-    exemptionContainer: String,
+    // One may want to have elements that are exempt from triggering the click outside event
+    exemptionContainers: Array,
   }
 
-  get exemptionContainerTarget() {
-    return document.querySelector(this.exemptionContainerValue)
+  get exemptionContainerTargets() {
+    return this.exemptionContainersValue.map((selector) => document.querySelector(selector)).filter(Boolean)
   }
 
   connect() {
@@ -20,13 +20,9 @@ export default class extends Controller {
 
   clickOutside(e) {
     if (this.hasPanelTarget) {
-      if (this.hasExemptionContainerValue && this.exemptionContainerTarget) {
-        const inExemptionContainer = this.exemptionContainerTarget.contains(e.target)
+      const isInExemptionContainer = this.hasExemptionContainersValue && this.exemptionContainerTargets.some((container) => container.contains(e.target))
 
-        if (!inExemptionContainer) {
-          leave(this.panelTarget)
-        }
-      } else {
+      if (!isInExemptionContainer) {
         leave(this.panelTarget)
       }
     }