From 9b2a3233e91e6f8291c673239a6c93a3992f956c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 25 Jun 2026 20:27:20 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Conditional=20trailin?=
=?UTF-8?q?g=20icon=20in=20Profile=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: yeboster <23556525+yeboster@users.noreply.github.com>
---
.Jules/palette.md | 4 ++++
src/routes/profile/+page.svelte | 18 +++++++++++-------
2 files changed, 15 insertions(+), 7 deletions(-)
diff --git a/.Jules/palette.md b/.Jules/palette.md
index d6d129bc..628a7580 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -2,3 +2,7 @@
**Learning:** Async buttons that handle errors often fail to reset their error state on subsequent attempts. This leads to a confusing UX where a successful retry still displays the error icon, making the user believe the action failed again.
**Action:** Always ensure that error flags (e.g., `hasError`) are reset at the _start_ of the async operation, not just set in the `catch` block.
+## 2024-11-20 - Ensure trailing clear icon buttons correctly hide for empty fields and resets reactive lists
+
+**Learning:** When using reactive lists in Svelte filtering based on text inputs (like an autocomplete search string binding logic), the user may get stuck if the search is empty but the bound list is not reset or when the clear icon button is clicked. Moreover, unconditionally rendering trailing "clear search" icons in an empty text field breaks keyboard accessibility as the icon still receives focus without having an action or state to revert.
+**Action:** Always conditionally render both the HTML elements representing the trailing icons (e.g. `{#if search !== ''}`) and set dynamic boolean props on parent inputs (e.g. `withTrailingIcon={search !== ''}`). When setting up reactive statements targeting input strings, guarantee that the empty string edge cases reset their mapped list by writing explicitly handled fallbacks.
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 7f290736..391ccfc6 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -17,6 +17,8 @@
$: if (search !== '') {
domainsFiltered = domains.filter((domain) => isFuzzyMatch(domain.name, search));
+ } else {
+ domainsFiltered = domains;
}
walletAddress.subscribe(async (address) => {
@@ -39,7 +41,7 @@
if (trimmedDomain.startsWith(trimmedSearch) || trimmedDomain.includes(trimmedSearch))
return true;
- else false;
+ else return false;
}
@@ -55,14 +57,16 @@
label="Search"
bind:value={search}
variant="outlined"
- withTrailingIcon
+ withTrailingIcon={search !== ''}
>
-
-
-
-
-
+ {#if search !== ''}
+
+
+
+
+
+ {/if}