diff --git a/.Jules/palette.md b/.Jules/palette.md
index d6d129bc..4d2ffd8a 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-10-25 - Conditional Trailing Icons in SMUI Textfields
+**Learning:** Trailing icons (like clear buttons) inside SMUI `Textfield` components remain focusable and take up layout space even when they shouldn't be active (e.g., when a search input is empty).
+**Action:** Conditionally render the icon element (e.g., `{#if search !== ''}`) to remove it from the focus order and dynamically bind the `withTrailingIcon` property to the same condition so the layout updates correctly. Use descriptive `aria-label`s like "clear search" instead of generic names.
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}