2 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index c1fc1111ecf..081c2fa9aeb 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -63,6 +63,13 @@
       // 8 = Backspace Key
       // 46 = Delete Key
       if (e.keyCode === 8 || e.keyCode === 46) {
+        const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualToken();
+
+        if (this.filteredSearchInput.value === '' && lastVisualToken) {
+          this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
+          gl.FilteredSearchVisualTokens.removeLastTokenPartial();
+        }
+
         // Reposition dropdown so that it is aligned with cursor
         this.dropdownManager.updateCurrentDropdownOffset();
       }
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js.es6
index 124d1740767..33f9d2e2651 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js.es6
@@ -45,6 +45,34 @@ class FilteredSearchVisualTokens {
   static addSearchVisualToken(searchTerm) {
     FilteredSearchVisualTokens.addVisualTokenElement(searchTerm, null, true);
   }
+
+  static getLastTokenPartial() {
+    const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualToken();
+
+    if (!lastVisualToken) return '';
+
+    const value = lastVisualToken.querySelector('.value');
+    const name = lastVisualToken.querySelector('.name');
+
+    const valueText = value ? value.innerText : '';
+    const nameText = name ? name.innerText : '';
+
+    return valueText || nameText;
+  }
+
+  static removeLastTokenPartial() {
+    const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualToken();
+
+    if (lastVisualToken) {
+      const value = lastVisualToken.querySelector('.value');
+
+      if (value) {
+        lastVisualToken.removeChild(value);
+      } else {
+        lastVisualToken.parentElement.removeChild(lastVisualToken);
+      }
+    }
+  }
 }
 
 window.gl = window.gl || {};