Introduced an offset limit to prevent the dropdown from going far right26618-search-bar-dropdown-offset-should-not-go-past-search-bar-input

1 files changed, 9 insertions, 1 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 1cd0483877a..83eb1864f5c 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
@@ -91,9 +91,17 @@
       }
 
       const filterIconPadding = 27;
-      const offset = gl.text
+      let offset = gl.text
         .getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding;
 
+      const currentDropdownWidth = this.mapping[key].element.clientWidth === 0 ? 200 :
+      this.mapping[key].element.clientWidth;
+      const offsetMaxWidth = this.filteredSearchInput.clientWidth - currentDropdownWidth;
+
+      if (offsetMaxWidth < offset) {
+        offset = offsetMaxWidth;
+      }
+
       this.mapping[key].reference.setOffset(offset);
     }