fix(searchbar): clear input text when no matches are found and clear …

…button is clicked
samply · Dec 16, 2024 · da85c1b · da85c1b
1 parent 1c91448
commit da85c1b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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>