From 184ec579ba863386c7c688e4d851608d647c0e30 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Fri, 18 Mar 2022 14:09:51 +0200
Subject: [PATCH] FIX: Firefox dropdown outside clicks

---
 src/js/ui/dropdown.js | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/js/ui/dropdown.js b/src/js/ui/dropdown.js
index a92863f..81ca066 100644
--- a/src/js/ui/dropdown.js
+++ b/src/js/ui/dropdown.js
@@ -36,6 +36,9 @@ const DropdownHoverUI = ((window) => {
   const init = () => {
     console.log(`${NAME}: init`);
 
+    const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`);
+    const hoverableEls = document.querySelectorAll(`[data-bs-toggle="hover"]`);
+
     const attachHoverEvents = (el) => {
       el.addEventListener('mouseover', Show, false);
       el.addEventListener('mouseout', Hide, false);
@@ -55,10 +58,24 @@ const DropdownHoverUI = ((window) => {
       el.classList.add(`${NAME}-active`);
     };
 
-    // Hide all for not dropdown-menu clicks
+    // Hide all for outside clicks
+    /*document.addEventListener('click', function (event) {
+      const isClickInside = clickableEls.contains(event.target);
+
+      if (!isClickInside) {
+        HideAll();
+      }
+    });*/
+
     document.addEventListener('click', (event) => {
       let breakPath = false;
-      event.path.forEach((el, i) => {
+      const path = event.path || (event.composedPath && event.composedPath());
+
+      if (!path) {
+        console.warn('Browser does not provide event path to hide dropdowns on outside click');
+      }
+
+      path.forEach((el, i) => {
         if (breakPath) {
           return;
         }
@@ -74,12 +91,12 @@ const DropdownHoverUI = ((window) => {
       });
     });
 
-    document.querySelectorAll(`[data-bs-toggle="hover"]`).forEach((el, i) => {
+    hoverableEls.forEach((el, i) => {
       const parent = el.closest('.dropdown');
       attachHoverEvents(parent);
     });
 
-    document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`).forEach((el, i) => {
+    clickableEls.forEach((el, i) => {
       attachClickEvents(el);
     });
   };