Close I1 quick action popups on outside click

app/modules/employees/templates/employees/work_engagement_board.html

@@ -173,7 +173,7 @@
                 </a>
                 {% endif %}
 
-                <details class="relative">
+                <details class="relative" data-i1-quick-popup>
                   <summary class="list-none cursor-pointer rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm font-bold text-amber-700 hover:bg-amber-100">! Blocked</summary>
                   <form method="post" action="/employee/work/engagements/{{ board.engagement_id }}/tasks/{{ task.id }}/quick-action" class="absolute right-0 z-20 mt-2 w-80 rounded-xl border border-amber-200 bg-white p-3 shadow-xl">
                     <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
@@ -187,7 +187,7 @@
                   </form>
                 </details>
 
-                <details class="relative">
+                <details class="relative" data-i1-quick-popup>
                   <summary class="list-none cursor-pointer rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm font-bold text-red-700 hover:bg-red-100">✕ N/A</summary>
                   <form method="post" action="/employee/work/engagements/{{ board.engagement_id }}/tasks/{{ task.id }}/quick-action" class="absolute right-0 z-20 mt-2 w-80 rounded-xl border border-red-200 bg-white p-3 shadow-xl">
                     <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
@@ -403,6 +403,35 @@ document.addEventListener("click", function (event) {
     requested.classList.remove("hidden");
   }
 });
+
+
+document.addEventListener("click", function (event) {
+  const clickedPopup = event.target.closest("[data-i1-quick-popup]");
+  const clickedSummary = event.target.closest("[data-i1-quick-popup] > summary");
+
+  document.querySelectorAll("[data-i1-quick-popup][open]").forEach(function (popup) {
+    if (clickedPopup === popup) {
+      return;
+    }
+    popup.removeAttribute("open");
+  });
+
+  if (clickedSummary) {
+    const popup = clickedSummary.parentElement;
+    document.querySelectorAll("[data-i1-quick-popup][open]").forEach(function (otherPopup) {
+      if (otherPopup !== popup) {
+        otherPopup.removeAttribute("open");
+      }
+    });
+  }
+});
+
+document.addEventListener("keydown", function (event) {
+  if (event.key !== "Escape") return;
+  document.querySelectorAll("[data-i1-quick-popup][open]").forEach(function (popup) {
+    popup.removeAttribute("open");
+  });
+});
 </script>
 
 {% endblock %}