clicking/removing a badge inside a multiselect does not toggle the dropdown anymore

the_works/static/the_works.css

@@ -115,15 +115,28 @@ summary:empty::before {
   color: var(--pico-background-color);
   font-size: .8em;
   padding: calc(var(--pico-form-element-spacing-vertical) * .5) calc(var(--pico-form-element-spacing-horizontal) * .5);
-  margin: auto calc(var(--pico-spacing) * .25);
+  margin: calc(var(--pico-spacing) * .25);
   cursor: default;
+  text-wrap: nowrap;
+  position: relative;
 }
 
 .dropdown-badge-close {
   cursor: pointer;  
+  font-size: 1.5em;
+  position: relative;
+  vertical-align: sub;
 }
 
 form:not([novalidate]) input:user-valid[type="search"] {
   border-color: inherit;
   background-image: none;
-}
+}
+
+/* style for Klappentext tooltips */
+[data-tooltip][data-placement="bottom"]::after, 
+[data-tooltip][data-placement="bottom"]::before  {
+  white-space: pre-line;
+  max-width: 400px;
+}
+

the_works/static/the_works.js

@@ -146,7 +146,7 @@ function updateDropdownSelected(that, summary) {
     // add closing X to badge
     let badgeX = document.createElement("span");
     badgeX.classList.add("dropdown-badge-close");
-    badgeX.innerHTML = "✖";
+    badgeX.innerHTML = "×";
     badge.appendChild(badgeX);
     badgeX.addEventListener("click", removeDropdownBadge);
   } else {
@@ -162,3 +162,29 @@ function removeDropdownBadge(event) {
   this.parentNode.remove();
   event.stopPropagation();
 }
+
+// initializes all dropdown selects on the page 
+function initAllDropdownSelects() {
+  // initialize each dropdown individually
+  let dropdowns = document.querySelectorAll("form details.dropdown");
+  dropdowns.forEach((d) => initDropdownSelect(d));
+  // now it's time to set the z-indices 
+  // get the_works style sheet
+  let sheet = [...document.styleSheets].filter((s) => s.ownerNode.getAttribute("href").includes("the_works"))[0];
+  const initialZ = 20;
+  // set z-index on dropdowns in reverse order  
+  for ( let i = 0; i < dropdowns.length; i++ ) {
+    sheet.insertRule(`#${dropdowns[dropdowns.length-i-1].id} { z-index: ${initialZ + i*3};}`, sheet.cssRules.length);
+    sheet.insertRule(`#${dropdowns[dropdowns.length-i-1].id} .dropdown-badge { z-index: ${initialZ+1+i*3};}`, sheet.cssRules.length);
+    sheet.insertRule(`#${dropdowns[dropdowns.length-i-1].id} .dropdown-badge-close { z-index: ${initialZ+2+i*3};}`, sheet.cssRules.length);
+  }
+  // event handler for summary elements (see below)
+  function summaryClick(event, that) {
+    if ( event.target != that && that.contains(event.target) ) {
+      event.preventDefault();
+    }
+  }
+  // add event handler to summary elements preventing default behavior (toggling the details element) if the click actually targeted a badge
+  document.querySelectorAll("form details.dropdown summary").forEach((summary) => summary.addEventListener("click", (event) => summaryClick(event, summary), true)); 
+}
+

the_works/templates/views/text_detail.html

@@ -93,6 +93,6 @@ Text bearbeiten
 {% block script %}
 <script src="{{ url_for('static', filename='the_works.js') }}"></script>
 <script>
-  window.onload = () => initDropdownSelect(document.getElementById("form_Genre_dropdown"));
+  window.onload = () => initAllDropdownSelects();
 </script>
 {% endblock script %}

the_works/templates/views/werk_detail.html

@@ -159,9 +159,6 @@ Werk bearbeiten
 {% block script %}
 <script src="{{ url_for('static', filename='the_works.js') }}"></script>
 <script>
-  window.onload = () => {
-    initDropdownSelect(document.getElementById("form_Genre_dropdown"));
-    initDropdownSelect(document.getElementById("form_Herausgeber_dropdown"));
-  }
+  window.onload = () => initAllDropdownSelects();
 </script>
 {% endblock script %}