From 99ed046e1a46403991f3998767e05174cc4161bd Mon Sep 17 00:00:00 2001
From: ansengarvin <45224464+ansengarvin@users.noreply.github.com>
Date: Thu, 25 Apr 2024 19:37:41 -0700
Subject: [PATCH] Fix: Input fields for length and mass now reset on filter

---
 frontend/src/routes/Search.svelte | 38 ++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/routes/Search.svelte b/frontend/src/routes/Search.svelte
index 0efda41..3415e3e 100644
--- a/frontend/src/routes/Search.svelte
+++ b/frontend/src/routes/Search.svelte
@@ -18,6 +18,7 @@
 	let lengthExtent: { min: number; max: number };
 	let massFilter: { min: number; max: number } | undefined;
 	let massExtent: { min: number; max: number };
+    let filterResetCounter = 0;
 
     let urlParams = new URLSearchParams(window.location.search)
     let proteinsPerPage = 20 // The number of proteins to show per page
@@ -63,6 +64,7 @@
 		massFilter = massExtent;
 		query = "";
         page = 0;
+        filterResetCounter++; // Incrementing this so relevant components can be destroyed and re-created
 		await search();
 	}
 </script>
@@ -98,28 +100,32 @@
 			<div>
 				<h3>Amino Acids Length</h3>
 				{#if lengthExtent && lengthFilter}
-					<RangerFilter
-						min={lengthExtent.min}
-						max={lengthExtent.max}
-						on:change={async ({ detail }) => {
-							lengthFilter = detail;
-                            await searchAndResetPage();
-						}}
-					/>
+                    {#key filterResetCounter}
+                        <RangerFilter
+                            min={lengthExtent.min}
+                            max={lengthExtent.max}
+                            on:change={async ({ detail }) => {
+                                lengthFilter = detail;
+                                await searchAndResetPage();
+                            }}
+                        />
+                    {/key}
 				{/if}
 			</div>
 
 			<div>
 				<h3>Mass (Da)</h3>
 				{#if massExtent && massFilter}
-					<RangerFilter
-						min={massExtent.min}
-						max={massExtent.max}
-						on:change={async ({ detail }) => {
-							massFilter = detail;
-                            await searchAndResetPage()
-						}}
-					/>
+                    {#key filterResetCounter}
+                        <RangerFilter
+                            min={massExtent.min}
+                            max={massExtent.max}
+                            on:change={async ({ detail }) => {
+                                massFilter = detail;
+                                await searchAndResetPage()
+                            }}
+                        />
+                    {/key}
 				{/if}
 			</div>