bring table to front while dropdown is visible

Yarith · Dec 1, 2021 · d1255ce · d1255ce
1 parent 4858efd
commit d1255ce
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/public/script.js b/public/script.js
@@ -290,6 +290,22 @@ window.addEventListener('load', function () {
 
     /* Bootstrap helpers */
 
+    // bring table to front while dropdown is visible
+    function updateTableDropdownOpen(target, state) {
+        if (target instanceof HTMLDivElement) {
+            const table = findParent(target, x => x.classList && x.classList.contains("erd-table"));
+            if (table) {
+                if (state) {
+                    table.classList.add("dropdown-open");
+                } else {
+                    table.classList.remove("dropdown-open");
+                }
+            }
+        }
+    }
+    window.addEventListener('show.bs.dropdown', e => updateTableDropdownOpen(e.target, true));
+    window.addEventListener('hide.bs.dropdown', e => updateTableDropdownOpen(e.target, false));
+
     // hide tooltip on click (avoid orphan tooltips when element is removed)
     // cf https://getbootstrap.com/docs/5.0/components/tooltips/: "Tooltips must be hidden before their corresponding elements have been removed from the DOM."
     let currentTooltip = null

diff --git a/public/styles.css b/public/styles.css
@@ -92,6 +92,8 @@
     cursor: pointer;
 }
 
+.erd-table.dropdown-open { z-index: 100000 !important; }
+
 .erd-table .header { border-top-color: var(--tw-blueGray); }
 .erd-table.gray .header { border-top-color: var(--tw-blueGray); }
 .erd-table.red .header { border-top-color: var(--tw-red); }