kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Correctly replaces string when selecting in dropdown

Browse source
This commit is contained in:
Phil Hughes 2017-01-19 10:10:53 +00:00
parent ac080c6379
commit c45dc8027c
3 changed files with 31 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/filtered_search/dropdown_utils.js.es6
View file

@ -76,13 +76,25 @@
static getSearchInput(filteredSearchInput) {
const selectionStart = filteredSearchInput.selectionStart;
const inputValue = filteredSearchInput.value;
const rightPos = inputValue.slice(selectionStart).search(/\s/);
const { right } = gl.DropdownUtils.getInputSelectionPosition(filteredSearchInput);
if (rightPos < 0) {
if (right < 0) {
return inputValue;
}
return inputValue.slice(0, rightPos + selectionStart + 1).trim();
return inputValue.slice(0, right + selectionStart + 1).trim();
}
static getInputSelectionPosition(input) {
const inputValue = input.value;
const selectionStart = input.selectionStart;
const left = inputValue.slice(0, selectionStart + 1).search(/\S+$/);
const right = inputValue.slice(selectionStart).search(/\s/);
return {
left,
right,
};
}
}

31
app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
View file

@ -57,30 +57,24 @@
static addWordToInput(tokenName, tokenValue = '') {
const input = document.querySelector('.filtered-search');
const inputValue = input.value;
const word = `${tokenName}:${tokenValue}`;
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];
// Get the string to replace
const selectionStart = input.selectionStart;
const { left } = gl.DropdownUtils.getInputSelectionPosition(input);
let { right } = gl.DropdownUtils.getInputSelectionPosition(input);
// Remove the typed tokenName
if (word.indexOf(lastSearchToken) === 0 && searchToken !== '') {
// Remove spaces after the colon
if (lastInputCharacter === ' ' && lastInputTrimmedCharacter === ':') {
input.value = input.value.trim();
}
input.value = input.value.slice(0, -1 * lastSearchToken.length);
} else if (lastInputCharacter !== ' ' || (lastToken && lastToken.value[lastToken.value.length - 1] === ' ')) {
// Remove the existing tokenValue
const lastTokenString = `${lastToken.key}:${lastToken.symbol}${lastToken.value}`;
input.value = input.value.slice(0, -1 * lastTokenString.length);
if (right < 0) {
right = inputValue.length;
}
if (left !== -1) {
input.value = `${inputValue.substr(0, left)}${word}${inputValue.substr(right + selectionStart)}`;
} else {
input.value += word;
}
}
updateCurrentDropdownOffset() {
this.updateDropdownOffset(this.currentDropdown);
@ -93,7 +87,8 @@
const filterIconPadding = 27;
const offset = gl.text
.getTextWidth(gl.DropdownUtils.getSearchInput(this.filteredSearchInput).trim(), this.font) + filterIconPadding;
.getTextWidth(gl.DropdownUtils.getSearchInput(this.filteredSearchInput).trim(), this.font)
+ filterIconPadding;
this.mapping[key].reference.setOffset(offset);
}

3
app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
View file

@ -193,7 +193,8 @@
}
showOnClick() {
const currentDropdownRef = this.dropdownManager.mapping[this.dropdownManager.currentDropdown].reference;
const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
const currentDropdownRef = dropdown.reference;
this.setDropdownWrapper();
currentDropdownRef.dispatchInputEvent();