diff --git a/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte b/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte
index 6baff648..e4c1068b 100644
--- a/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte
+++ b/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte
@@ -6,6 +6,9 @@
     } from "../../stores/query";
     import { iconStore } from "../../stores/icons";
     import type { QueryItem } from "../../types/queryData";
+    import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
     export let itemToDelete: { type: string; index: number; item?: QueryItem };
 
     $: deleteUrl = $iconStore.get("deleteUrl");
@@ -17,6 +20,8 @@
      * can be a group, item or value
      */
     const deleteItem = (): void => {
+        dispatch("clear-search");
+
         if (type === "group") {
             queryStore.update((query) => {
                 query = query.filter((group, i) => i !== index);
diff --git a/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte b/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
index 750e6778..b2f81846 100644
--- a/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
+++ b/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
@@ -434,5 +434,12 @@
             {/if}
         </ul>
     {/if}
-    <StoreDeleteButtonComponent itemToDelete={{ type: "group", index }} />
+    <StoreDeleteButtonComponent
+        itemToDelete={{ type: "group", index }}
+        on:clear-search={() => {
+            inputValue = "";
+            focusedItemIndex = -1;
+            $inputOptions = [];
+        }}
+    />
 </div>