From 6a2d14e5f8d1c623fd90b4866f4b1d6a8bc53cd2 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 24 Feb 2017 10:09:53 -0600 Subject: Fix dropdown offset --- .../filtered_search_dropdown_manager.js.es6 | 31 ++++++++-------------- 1 file 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) { -- cgit v1.2.1