diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js index 78b245726ee..320afa26130 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js +++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js @@ -178,9 +178,9 @@ class FilteredSearchVisualTokens { const inputLi = input.parentElement; const tokenContainer = document.querySelector('.tokens-container'); - if (!tokenContainer.lastElementChild.isEqualNode(inputLi)) { - FilteredSearchVisualTokens.tokenizeInput(); + FilteredSearchVisualTokens.tokenizeInput(); + if (!tokenContainer.lastElementChild.isEqualNode(inputLi)) { const { isLastVisualTokenValid } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js index 3c0e894ea31..bbda1476fed 100644 --- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js @@ -533,12 +533,12 @@ describe('Filtered Search Visual Tokens', () => { FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', 'none'), ); - spyOn(gl.FilteredSearchVisualTokens, 'tokenizeInput').and.callThrough(); + spyOn(gl.FilteredSearchVisualTokens, 'tokenizeInput').and.callFake(() => {}); spyOn(gl.FilteredSearchVisualTokens, 'getLastVisualTokenBeforeInput').and.callThrough(); gl.FilteredSearchVisualTokens.moveInputToTheRight(); - expect(gl.FilteredSearchVisualTokens.tokenizeInput).not.toHaveBeenCalled(); + expect(gl.FilteredSearchVisualTokens.tokenizeInput).toHaveBeenCalled(); expect(gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput).not.toHaveBeenCalled(); }); @@ -583,5 +583,18 @@ describe('Filtered Search Visual Tokens', () => { expect(tokensContainer.children[2].querySelector('.filtered-search')).not.toEqual(null); }); + + it('tokenizes input even if input is the right most element', () => { + tokensContainer.innerHTML = ` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', 'none')} + ${FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('label')} + ${FilteredSearchSpecHelper.createInputHTML('', '~bug')} + `; + + gl.FilteredSearchVisualTokens.moveInputToTheRight(); + + const token = tokensContainer.children[1]; + expect(token.querySelector('.value').innerText).toEqual('~bug'); + }); }); }); diff --git a/spec/javascripts/helpers/filtered_search_spec_helper.js b/spec/javascripts/helpers/filtered_search_spec_helper.js index c891518fce9..ce83a256ddd 100644 --- a/spec/javascripts/helpers/filtered_search_spec_helper.js +++ b/spec/javascripts/helpers/filtered_search_spec_helper.js @@ -33,10 +33,10 @@ class FilteredSearchSpecHelper { `; } - static createInputHTML(placeholder = '') { + static createInputHTML(placeholder = '', value = '') { return `
  • - +
  • `; }