Clears visual token on second backspace

4 files changed, 51 insertions, 15 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 2ba85c7da97..c05a83176f2 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -127,7 +127,7 @@ class FilteredSearchManager {
     this.handleInputVisualTokenWrapper = this.handleInputVisualToken.bind(this);
     this.checkForEnterWrapper = this.checkForEnter.bind(this);
     this.onClearSearchWrapper = this.onClearSearch.bind(this);
-    this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
+    this.checkForBackspaceWrapper = this.checkForBackspace.call(this);
     this.removeSelectedTokenKeydownWrapper = this.removeSelectedTokenKeydown.bind(this);
     this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
     this.editTokenWrapper = this.editToken.bind(this);
@@ -180,22 +180,34 @@ class FilteredSearchManager {
     this.unbindStateEvents();
   }
 
-  checkForBackspace(e) {
-    // 8 = Backspace Key
-    // 46 = Delete Key
-    if (e.keyCode === 8 || e.keyCode === 46) {
-      const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+  checkForBackspace() {
+    let backspaceCount = 0;
+
+    // closure for keeping track of the number of backspace keystrokes
+    return (e) => {
+      // 8 = Backspace Key
+      // 46 = Delete Key
+      if (e.keyCode === 8 || e.keyCode === 46) {
+        const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+        const { tokenName, tokenValue } = gl.DropdownUtils.getVisualTokenValues(lastVisualToken);
+        const canEdit = tokenName && this.canEdit && this.canEdit(tokenName, tokenValue);
+
+        if (this.filteredSearchInput.value === '' && lastVisualToken && canEdit) {
+          backspaceCount += 1;
+
+          if (backspaceCount === 2) {
+            backspaceCount = 0;
+            this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
+            gl.FilteredSearchVisualTokens.removeLastTokenPartial();
+          }
+        }
 
-      const { tokenName, tokenValue } = gl.DropdownUtils.getVisualTokenValues(lastVisualToken);
-      const canEdit = tokenName && this.canEdit && this.canEdit(tokenName, tokenValue);
-      if (this.filteredSearchInput.value === '' && lastVisualToken && canEdit) {
-        this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
-        gl.FilteredSearchVisualTokens.removeLastTokenPartial();
+        // Reposition dropdown so that it is aligned with cursor
+        this.dropdownManager.updateCurrentDropdownOffset();
+      } else {
+        backspaceCount = 0;
       }
-
-      // Reposition dropdown so that it is aligned with cursor
-      this.dropdownManager.updateCurrentDropdownOffset();
-    }
+    };
   }
 
   checkForEnter(e) {
diff --git a/changelogs/unreleased/38596-fix-backspace-visual-token-clearing.yml b/changelogs/unreleased/38596-fix-backspace-visual-token-clearing.yml
new file mode 100644
index 00000000000..4a9d0b66a8c
--- /dev/null
+++ b/changelogs/unreleased/38596-fix-backspace-visual-token-clearing.yml
@@ -0,0 +1,5 @@
+---
+title: Clears visual token on second backspace
+merge_request:
+author: Martin Wortschack
+type: fixed
diff --git a/spec/features/issues/filtered_search/dropdown_hint_spec.rb b/spec/features/issues/filtered_search/dropdown_hint_spec.rb
index 18ae45aa340..ef40dddfd3a 100644
--- a/spec/features/issues/filtered_search/dropdown_hint_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_hint_spec.rb
@@ -176,6 +176,7 @@ describe 'Dropdown hint', :js do
       it 'reuses existing author text' do
         filtered_search.send_keys('author:')
         filtered_search.send_keys(:backspace)
+        filtered_search.send_keys(:backspace)
         click_hint('author')
 
         expect_tokens([{ name: 'author' }])
@@ -185,6 +186,7 @@ describe 'Dropdown hint', :js do
       it 'reuses existing assignee text' do
         filtered_search.send_keys('assignee:')
         filtered_search.send_keys(:backspace)
+        filtered_search.send_keys(:backspace)
         click_hint('assignee')
 
         expect_tokens([{ name: 'assignee' }])
@@ -194,6 +196,7 @@ describe 'Dropdown hint', :js do
       it 'reuses existing milestone text' do
         filtered_search.send_keys('milestone:')
         filtered_search.send_keys(:backspace)
+        filtered_search.send_keys(:backspace)
         click_hint('milestone')
 
         expect_tokens([{ name: 'milestone' }])
@@ -203,6 +206,7 @@ describe 'Dropdown hint', :js do
       it 'reuses existing label text' do
         filtered_search.send_keys('label:')
         filtered_search.send_keys(:backspace)
+        filtered_search.send_keys(:backspace)
         click_hint('label')
 
         expect_tokens([{ name: 'label' }])
@@ -212,6 +216,7 @@ describe 'Dropdown hint', :js do
       it 'reuses existing emoji text' do
         filtered_search.send_keys('my-reaction:')
         filtered_search.send_keys(:backspace)
+        filtered_search.send_keys(:backspace)
         click_hint('my-reaction')
 
         expect_tokens([{ name: 'my-reaction' }])
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 5111632d681..b8890e4cda1 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -252,6 +252,7 @@ describe('Filtered Search Manager', () => {
       it('removes last token', () => {
         spyOn(gl.FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
         dispatchBackspaceEvent(input, 'keyup');
+        dispatchBackspaceEvent(input, 'keyup');
 
         expect(gl.FilteredSearchVisualTokens.removeLastTokenPartial).toHaveBeenCalled();
       });
@@ -259,6 +260,7 @@ describe('Filtered Search Manager', () => {
       it('sets the input', () => {
         spyOn(gl.FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
         dispatchDeleteEvent(input, 'keyup');
+        dispatchDeleteEvent(input, 'keyup');
 
         expect(gl.FilteredSearchVisualTokens.getLastTokenPartial).toHaveBeenCalled();
         expect(input.value).toEqual('~bug');
@@ -276,6 +278,18 @@ describe('Filtered Search Manager', () => {
       expect(gl.FilteredSearchVisualTokens.getLastTokenPartial).not.toHaveBeenCalled();
       expect(input.value).toEqual('text');
     });
+
+    it('does not remove previous token on single backspace press', () => {
+      spyOn(gl.FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
+      spyOn(gl.FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
+
+      input.value = 't';
+      dispatchDeleteEvent(input, 'keyup');
+
+      expect(gl.FilteredSearchVisualTokens.removeLastTokenPartial).not.toHaveBeenCalled();
+      expect(gl.FilteredSearchVisualTokens.getLastTokenPartial).not.toHaveBeenCalled();
+      expect(input.value).toEqual('t');
+    });
   });
 
   describe('removeToken', () => {