diff options
| -rw-r--r-- | app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 | 31 |
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) { |