Fix dropdown offsetfix-dropdown-offset

1 files changed, 11 insertions, 20 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
index c3247f52da8..608c65c78a4 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
@@ -67,22 +67,6 @@
       if (clicked) {
         gl.FilteredSearchVisualTokens.moveInputToTheRight();
       }
-
-      // Get the string to replace
-      // let newCaretPosition = input.selectionStart;
-      // const { left, right } = gl.DropdownUtils.getInputSelectionPosition(input);
-
-      // gl.FilteredSearchDropdownManager.updateInputCaretPosition(newCaretPosition, input);
-    }
-
-    static updateInputCaretPosition(selectionStart, input) {
-      // Reset the position
-      // Sometimes can end up at end of input
-      input.setSelectionRange(selectionStart, selectionStart);
-
-      const { right } = gl.DropdownUtils.getInputSelectionPosition(input);
-
-      input.setSelectionRange(right, right);
     }
 
     updateCurrentDropdownOffset() {
@@ -90,12 +74,19 @@
     }
 
     updateDropdownOffset(key) {
-      if (!this.font) {
-        this.font = window.getComputedStyle(this.filteredSearchInput).font;
+      // Always align dropdown with the input field
+      let offset = this.filteredSearchInput.getBoundingClientRect().left - document.querySelector('.scroll-container').getBoundingClientRect().left;
+
+      const maxInputWidth = 240;
+      const currentDropdownWidth = this.mapping[key].element.clientWidth || maxInputWidth;
+
+      // Make sure offset never exceeds the input container
+      const offsetMaxWidth = document.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
+      if (offsetMaxWidth < offset) {
+        offset = offsetMaxWidth;
       }
 
-      // Temporarily anchor the dropdown offset
-      this.mapping[key].reference.setOffset(0);
+      this.mapping[key].reference.setOffset(offset);
     }
 
     load(key, firstLoad = false) {