diff --git a/keepassxc-browser/content/autocomplete.js b/keepassxc-browser/content/autocomplete.js index 904a618..38cea6c 100644 --- a/keepassxc-browser/content/autocomplete.js +++ b/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); } } diff --git a/keepassxc-browser/css/autocomplete.css b/keepassxc-browser/css/autocomplete.css index bbecc59..4710e20 100644 --- a/keepassxc-browser/css/autocomplete.css +++ b/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;