From 78d9363401951651adb035c4e6c325a53b561e9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Stucke?= <joerg.stucke@fkie.fraunhofer.de>
Date: Fri, 6 Dec 2024 15:35:21 +0100
Subject: [PATCH] feat: limited custom upload dropdown height and enabled
 scrolling

---
 src/web_interface/static/css/upload.css |  4 ++++
 src/web_interface/static/js/upload.js   | 23 ++++++++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/web_interface/static/css/upload.css b/src/web_interface/static/css/upload.css
index 691568c4e..dc3871760 100644
--- a/src/web_interface/static/css/upload.css
+++ b/src/web_interface/static/css/upload.css
@@ -13,6 +13,10 @@
     left: 135px; /* upload-label width */
     right: 35px; /* dropdown button width */
     font-family: monospace;
+    max-height: 40vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-behavior: smooth;
 }
 .autocomplete-items li {
     cursor: pointer;
diff --git a/src/web_interface/static/js/upload.js b/src/web_interface/static/js/upload.js
index fd5e71294..faae478df 100644
--- a/src/web_interface/static/js/upload.js
+++ b/src/web_interface/static/js/upload.js
@@ -49,9 +49,15 @@ function autocompleteInput(inputId, options) {
     let currentFocus;
 
     input.addEventListener("input", populateAutocomplete);
-    dropdownButton.addEventListener("click", () => {
-        input.value = "";
-        populateAutocomplete();
+    dropdownButton.addEventListener("click", (event) => {
+        let autoComplete = getAutocompleteElement(event.target.parentNode.parentNode);
+        if (autoComplete) {
+            // clicked on a dropdown button but a menu already exists => close the menu
+            closeAll();
+        } else {
+            input.value = "";
+            populateAutocomplete();
+        }
     });
 
     input.addEventListener("keydown", (event) => {
@@ -87,7 +93,7 @@ function autocompleteInput(inputId, options) {
         list.setAttribute("class", "autocomplete-items list-group border");
         input.parentNode.appendChild(list);
 
-        let listItem, target;
+        let listItem;
         options.forEach(option => {
             let index = option.toLowerCase().indexOf(input.value.toLowerCase());
             if (!input.value || index !== -1) {
@@ -124,7 +130,14 @@ function autocompleteInput(inputId, options) {
         } else if (currentFocus < 0) {
             currentFocus = (elements.length - 1);
         }
-        elements[currentFocus].classList.add("active");
+        const selectedElement = elements[currentFocus];
+        if (selectedElement) {
+            selectedElement.classList.add("active");
+            // scroll to the element above the selected one
+            selectedElement.parentNode.scroll(
+                0, Math.max(0, selectedElement.offsetTop - selectedElement.clientHeight)
+            );
+        }
     }
 }