Add support for showing Autocomplete Menu on top (#1866)

Add support for showing Autocomplete Menu on top

Author: Sami Vänttinen

keepassxc-browser/content/autocomplete.js

@@ -110,8 +110,8 @@ class Autocomplete {
         }
 
         this.updateList();
-        this.updatePosition();
         this.container.style.display = 'block';
+        this.updatePosition();
     }
 
     async updateList() {
@@ -273,11 +273,21 @@ class Autocomplete {
         const rect = this.input.getBoundingClientRect();
         this.container.style.minWidth = Pixels(this.input.offsetWidth);
 
+        // Calculate Y offset if menu does not fit to the bottom of the screen -> show it at the top of the input field
+        const menuRect = this.container.getBoundingClientRect();
+        const totalHeight = menuRect.height + rect.height;
+        const menuOffset = (totalHeight + rect.y) > window.self.visualViewport.height ? totalHeight : 0;
+        if (menuOffset > 0) {
+            this.container.classList.add('kpxcAutocomplete-container-on-top');
+        } else {
+            this.container.classList.remove('kpxcAutocomplete-container-on-top');
+        }
+
         if (kpxcUI.bodyStyle.position.toLowerCase() === 'relative') {
-            this.container.style.top = Pixels(rect.top - kpxcUI.bodyRect.top + document.scrollingElement.scrollTop + this.input.offsetHeight);
+            this.container.style.top = Pixels(rect.top - kpxcUI.bodyRect.top + document.scrollingElement.scrollTop + this.input.offsetHeight - menuOffset);
             this.container.style.left = Pixels(rect.left - kpxcUI.bodyRect.left + document.scrollingElement.scrollLeft);
         } else {
-            this.container.style.top = Pixels(rect.top + document.scrollingElement.scrollTop + this.input.offsetHeight);
+            this.container.style.top = Pixels(rect.top + document.scrollingElement.scrollTop + this.input.offsetHeight - menuOffset);
             this.container.style.left = Pixels(rect.left + document.scrollingElement.scrollLeft);
         }
     }

keepassxc-browser/css/autocomplete.css

@@ -8,6 +8,13 @@
     overflow: hidden; /* this fixes an issue with the border radius not showing up clearly */
 }
 
+.kpxcAutocomplete-container-on-top {
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+}
+
 .kpxcAutocomplete-items {
     max-height: 250px;
     overflow-y: auto;