From 0e68eb8c4236b5601a9ebe160f79f99e9fb64f64 Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Sat, 31 May 2025 13:55:56 +0300
Subject: [PATCH] fix: input defocus on market and transactions page

---
 website/src/routes/market/+page.svelte       | 19 +++++++++++++++----
 website/src/routes/transactions/+page.svelte | 13 ++++++++++++-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/website/src/routes/market/+page.svelte b/website/src/routes/market/+page.svelte
index 9dbdf26..836bc22 100644
--- a/website/src/routes/market/+page.svelte
+++ b/website/src/routes/market/+page.svelte
@@ -135,10 +135,19 @@
 
 	function performSearch() {
 		currentPage = 1;
-		updateURL();
 		fetchMarketData();
 	}
 
+	function updateSearchUrl() {
+		updateURL();
+	}
+
+	function handleSearchKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			updateSearchUrl();
+		}
+	}
+
 	$effect(() => {
 		if (searchQuery !== previousSearchQueryForEffect) {
 			debouncedSearch();
@@ -232,7 +241,7 @@
 	);
 </script>
 
-<SEO 
+<SEO
 	title="Market - Rugplay"
 	description="Discover and trade virtual cryptocurrencies in our simulation game. Browse all available simulated coins, filter by price and performance, and more."
 	keywords="virtual cryptocurrency market, crypto trading game, coin discovery simulation, market analysis game, trading practice"
@@ -253,6 +262,8 @@
 						bind:value={searchQuery}
 						placeholder="Search coins by name or symbol..."
 						class="pl-10 pr-4"
+						onblur={updateSearchUrl}
+						onkeydown={handleSearchKeydown}
 					/>
 				</div>
 
@@ -434,8 +445,8 @@
 							<div class="flex items-center gap-3">
 								<CoinIcon icon={coin.icon} symbol={coin.symbol} size={8} />
 								<div>
-									<h3 class="text-lg font-semibold leading-tight truncate">{coin.name}</h3>
-									<p class="text-muted-foreground text-sm truncate">*{coin.symbol}</p>
+									<h3 class="truncate text-lg font-semibold leading-tight">{coin.name}</h3>
+									<p class="text-muted-foreground truncate text-sm">*{coin.symbol}</p>
 								</div>
 							</div>
 							<div class="text-right">
diff --git a/website/src/routes/transactions/+page.svelte b/website/src/routes/transactions/+page.svelte
index 3ba440e..8ebdfdd 100644
--- a/website/src/routes/transactions/+page.svelte
+++ b/website/src/routes/transactions/+page.svelte
@@ -122,10 +122,19 @@
 
 	function performSearch() {
 		currentPage = 1;
-		updateURL();
 		fetchTransactions();
 	}
 
+	function updateSearchUrl() {
+		updateURL();
+	}
+
+	function handleSearchKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			updateSearchUrl();
+		}
+	}
+
 	$effect(() => {
 		if (searchQuery !== previousSearchQueryForEffect) {
 			debouncedSearch();
@@ -271,6 +280,8 @@
 						bind:value={searchQuery}
 						placeholder="Search by coin name or symbol..."
 						class="pl-10 pr-4"
+						onblur={updateSearchUrl}
+						onkeydown={handleSearchKeydown}
 					/>
 				</div>