Merge branch '26618-search-bar-dropdown-offset-should-not-go-past-search-bar-input' into 'master'

Introduced an offset limit to prevent the dropdown from going far right Closes #26618 and #27023 See merge request !8679

Merge branch '26618-search-bar-dropdown-offset-should-not-go-past-search-bar-input' into 'master'
0161c294 · Jacob Schatz · Robert Speicher · c4a9ea6c · 0161c294
Commit 0161c294 authored Jan 21, 2017 by Jacob Schatz Committed by Robert Speicher Jan 27, 2017
Hide whitespace changes
Inline Side-by-side

Showing with 9 additions and 1 deletion

filtered_search_dropdown_manager.js.es6 ...s/filtered_search/filtered_search_dropdown_manager.js.es6 +9 -1

No files found.
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
@@ -98,7 +98,15 @@
      const input = this.filteredSearchInput;
      const inputText = input.value.slice(0, input.selectionStart);
      const filterIconPadding = 27;
-      const offset = gl.text.getTextWidth(inputText, this.font) + filterIconPadding;
+      let offset = gl.text.getTextWidth(inputText, 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);
    }