Merge branch 'fix-edit-last-visual-token' into 'master'

Fix edit last visual token

See merge request !9791

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();
 

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');
+    });
   });
 });

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>
     `;
   }