From da85c1b45550c47d2bca61e3840cca96ea804d40 Mon Sep 17 00:00:00 2001
From: v753r <valerie.sauer@dkfz-heidelberg.de>
Date: Mon, 16 Dec 2024 16:06:46 +0100
Subject: [PATCH] fix(searchbar): clear input text when no matches are found
 and clear button is clicked

---
 .../components/buttons/StoreDeleteButtonComponent.svelte | 5 +++++
 .../components/search-bar/SearchBarComponent.wc.svelte   | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

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>