diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index e80d266ae899b1d829c36cfd04945ecf5bfdedcf..2e9e53458fb974b57c23210a59973ce7803a5b51 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -37,7 +37,7 @@ } getSearchInput() { - const query = this.input.value.trim(); + const query = gl.DropdownUtils.getSearchInput(this.input).trim(); const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); return lastToken.value || ''; diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 index c27ef3042d1bdfdf2f6f082a55be9b6df4f96b5f..07d257ad8d9e3358a866cba746cfe68be24a6362 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 @@ -72,6 +72,18 @@ // Return boolean based on whether it was set return dataValue !== null; } + + static getSearchInput(filteredSearchInput) { + const selectionStart = filteredSearchInput.selectionStart; + const inputValue = filteredSearchInput.value; + const rightPos = inputValue.slice(selectionStart).search(/\s/); + + if (rightPos < 0) { + return inputValue; + } + + return inputValue.slice(0, rightPos + selectionStart + 1).trim(); + } } window.gl = window.gl || {}; 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 1d5c3490f091829ab29993cfe7c2c950f77e5ee9..4577aa2c94e478e399f325abfa74153307e548ea 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 @@ -59,7 +59,8 @@ const input = document.querySelector('.filtered-search'); const word = `${tokenName}:${tokenValue}`; - const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(input.value); + const inputValue = gl.DropdownUtils.getSearchInput(input).trim(); + const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(inputValue); const lastSearchToken = searchToken.split(' ').last(); const lastInputCharacter = input.value[input.value.length - 1]; const lastInputTrimmedCharacter = input.value.trim()[input.value.trim().length - 1]; @@ -92,7 +93,7 @@ const filterIconPadding = 27; const offset = gl.text - .getTextWidth(this.getSearchInput(), this.font) + filterIconPadding; + .getTextWidth(gl.DropdownUtils.getSearchInput(this.filteredSearchInput).trim(), this.font) + filterIconPadding; this.mapping[key].reference.setOffset(offset); } @@ -148,7 +149,7 @@ setDropdown() { const { lastToken, searchToken } = this.tokenizer - .processTokens(this.getSearchInput()); + .processTokens(gl.DropdownUtils.getSearchInput(this.filteredSearchInput)); if (this.filteredSearchInput.value.split('').last() === ' ') { this.updateCurrentDropdownOffset(); @@ -169,18 +170,6 @@ } } - getSearchInput() { - const selectionStart = this.filteredSearchInput.selectionStart; - const inputValue = this.filteredSearchInput.value; - const rightPos = inputValue.slice(selectionStart).search(/\s/); - - if (rightPos < 0) { - return inputValue; - } - - return inputValue.slice(0, rightPos + selectionStart + 1).trim(); - } - resetDropdowns() { // Force current dropdown to hide this.mapping[this.currentDropdown].reference.hideDropdown(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index ca8a185a1029b33c64f8e0efcd7d54bd10b9c467..12b8cb4b4b1677c75764a036a4bd142d85567c76 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -30,12 +30,13 @@ this.checkForEnterWrapper = this.checkForEnter.bind(this); this.clearSearchWrapper = this.clearSearch.bind(this); this.checkForBackspaceWrapper = this.checkForBackspace.bind(this); + this.showOnClick = this.showOnClick.bind(this); this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper); this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper); this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper); this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper); - this.filteredSearchInput.addEventListener('click', this.setDropdownWrapper); + this.filteredSearchInput.addEventListener('click', this.showOnClick); this.clearSearchButton.addEventListener('click', this.clearSearchWrapper); } @@ -44,6 +45,7 @@ this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper); this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper); this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper); + this.filteredSearchInput.removeEventListener('click', this.showOnClick); this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper); } @@ -189,6 +191,13 @@ } return usernamesById; } + + showOnClick() { + const currentDropdownRef = this.dropdownManager.mapping[this.dropdownManager.currentDropdown].reference; + + this.setDropdownWrapper(); + currentDropdownRef.dispatchInputEvent(); + } } window.gl = window.gl || {};