From 9e9f75c124ecd72b420767b9ec99ea38c18a8432 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Fri, 28 Jun 2024 23:11:33 +0200
Subject: [PATCH] IMPR: Hide only siblings of dropdown

---
 package.json          |  2 +-
 src/js/ui/dropdown.js | 56 +++++++++++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 8b171b9..7f21ed2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
-  "version": "5.4.3",
+  "version": "5.4.4",
   "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
   "author": "Tony Air <tony@twma.pro>",
   "license": "BSD-2-Clause",
diff --git a/src/js/ui/dropdown.js b/src/js/ui/dropdown.js
index e43d75e..cc9bd8a 100644
--- a/src/js/ui/dropdown.js
+++ b/src/js/ui/dropdown.js
@@ -24,8 +24,13 @@ const DropdownHoverUI = ((window) => {
     }, timeout)
   }
 
+  // debuging
+  const LogMsg = (msg) => {
+    //console.log(msg)
+  }
+
   const HideAll = () => {
-    console.log(`${NAME}: HideAll`)
+    LogMsg(`${NAME}: HideAll`)
     // hide others
     document.querySelectorAll('.dropdown-menu').forEach((el, i) => {
       if (el.locked) {
@@ -55,24 +60,39 @@ const DropdownHoverUI = ((window) => {
     }
 
     LockMenu(menu, 800)
-    HideAll()
+    HideSiblings(el)
 
     if (isOpennedByToogle) {
-      console.log(`${NAME}: Toggle hide`)
+      LogMsg(`${NAME}: Toggle hide`)
 
       el.classList.remove(...ACTIVECLS)
       menu.classList.remove('show')
-
-      menu.dropdownToggle = false
     } else {
-      console.log(`${NAME}: Toggle show`)
+      LogMsg(`${NAME}: Toggle show`)
 
       el.classList.add(...ACTIVECLS)
       menu.classList.add('show')
-
-      menu.dropdownToggle = true
     }
 
+    menu.dropdownToggle = true
+  }
+
+  const HideSiblings = (el) => {
+    const parent = el.parentNode
+    if (!parent) {
+      return
+    }
+
+    [...parent.children].forEach((el2) => {
+      if (el === el2) {
+        return
+      }
+
+      const dropdown = el2.querySelector('.dropdown-menu')
+      if (dropdown) {
+        dropdown.classList.remove('show')
+      }
+    })
   }
 
   const Show = (e) => {
@@ -88,9 +108,10 @@ const DropdownHoverUI = ((window) => {
       return
     }
 
+    menu.dropdownToggle = false
     //LockMenu(menu)
-    console.log(`${NAME}: Show`)
-    HideAll()
+    LogMsg(`${NAME}: Show`)
+    HideSiblings(el)
 
     el.classList.add(...ACTIVECLS)
     menu.classList.add('show')
@@ -108,16 +129,17 @@ const DropdownHoverUI = ((window) => {
       return
     }
 
+    menu.dropdownToggle = false
     LockMenu(menu)
 
-    console.log(`${NAME}: Hide`)
+    LogMsg(`${NAME}: Hide`)
 
     el.classList.remove(...ACTIVECLS)
     menu.classList.remove('show')
   }
 
   const init = () => {
-    console.log(`${NAME}: init`)
+    LogMsg(`${NAME}: init`)
 
     const clickableEls = document.querySelectorAll(`[data-bs-toggle="dropdown"]`)
     const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
@@ -144,7 +166,7 @@ const DropdownHoverUI = ((window) => {
         const el = e.currentTarget
         const parent = el.closest('.dropdown')
 
-        console.log(`${NAME}: click`)
+        LogMsg(`${NAME}: click`)
 
         if (parent) {
           Toggle(parent)
@@ -156,14 +178,6 @@ const DropdownHoverUI = ((window) => {
     }
 
     // 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
       const path = event.path || (event.composedPath && event.composedPath())