From 6b63e53faa0be2208ef9330f632990e4359f3e4b Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Sun, 12 Jan 2025 22:01:31 +1030
Subject: [PATCH] feat: add backspace functionality to remove last search term
 in SearchBar component

---
 frontend/src/components/ui/DataBar/SearchBar.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/components/ui/DataBar/SearchBar.jsx b/frontend/src/components/ui/DataBar/SearchBar.jsx
index 6ce3dbe..cad58ba 100644
--- a/frontend/src/components/ui/DataBar/SearchBar.jsx
+++ b/frontend/src/components/ui/DataBar/SearchBar.jsx
@@ -29,6 +29,14 @@ const SearchBar = ({
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [onClearTerms]);
 
+    const handleKeyDown = e => {
+        // Handle backspace when input is empty and there are search terms
+        if (e.key === 'Backspace' && !currentInput && searchTerms.length > 0) {
+            e.preventDefault();
+            onRemoveTerm(searchTerms[searchTerms.length - 1]);
+        }
+    };
+
     const handleKeyPress = e => {
         if (requireEnter && e.key === 'Enter' && currentInput.trim()) {
             onAddTerm(currentInput);
@@ -91,6 +99,7 @@ const SearchBar = ({
                     value={currentInput}
                     onChange={e => onInputChange(e.target.value)}
                     onKeyPress={handleKeyPress}
+                    onKeyDown={handleKeyDown}
                     onFocus={() => setIsFocused(true)}
                     onBlur={() => setIsFocused(false)}
                     placeholder={