Fix edit last visual tokenfix-edit-last-visual-token

3 files changed, 19 insertions, 6 deletions

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 `
       <li class="input-token">
-        <input type='text' class='filtered-search' placeholder='${placeholder}' />
+        <input type='text' class='filtered-search' placeholder='${placeholder}' value='${value}'/>
       </li>
     `;
   }