From 928178716aeb81c02b58b474d7d6059746525f95 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Mon, 16 Dec 2019 14:46:06 +0000
Subject: [PATCH] Operation elements now have decreasing z-index properties,
 meaning dropdowns do not get hidden. Fixes #925

---
 src/web/waiters/RecipeWaiter.mjs | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index ba0e7b11..4f8290f4 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -51,6 +51,7 @@ class RecipeWaiter {
                 }
             }.bind(this),
             onSort: function(evt) {
+                this.updateZIndices();
                 if (evt.from.id === "rec-list") {
                     document.dispatchEvent(this.manager.statechange);
                 }
@@ -149,6 +150,19 @@ class RecipeWaiter {
     }
 
 
+    /**
+     * Sets the z-index property on each operation to make sure that operations higher in the list
+     * have a higher index, meaning dropdowns are not hidden underneath subsequent operations.
+     */
+    updateZIndices() {
+        const operations = document.getElementById("rec-list").children;
+        for (let i = 0; i < operations.length; i++) {
+            const operation = operations[i];
+            operation.style.zIndex = 100 + operations.length - i;
+        }
+    }
+
+
     /**
      * Handler for favourite dragover events.
      * If the element being dragged is an operation, displays a visual cue so that the user knows it can
@@ -466,6 +480,7 @@ class RecipeWaiter {
         log.debug(`'${e.target.querySelector(".op-title").textContent}' added to recipe`);
 
         this.triggerArgEvents(e.target);
+        this.updateZIndices();
         window.dispatchEvent(this.manager.statechange);
     }