From bf15f2fb8af070e7beae332cbecbaadf1a860aa8 Mon Sep 17 00:00:00 2001
From: Tomas Drencak <tomas@drencak.com>
Date: Wed, 9 Aug 2023 21:28:30 +0200
Subject: [PATCH] Toggle visibility of the clear button (#1496)

---
 src/components/input/input.component.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts
index 44c9b0df..6a17cbf5 100644
--- a/src/components/input/input.component.ts
+++ b/src/components/input/input.component.ts
@@ -407,7 +407,9 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon =
-      this.clearable && !this.disabled && !this.readonly && (typeof this.value === 'number' || this.value.length > 0);
+      this.clearable && !this.disabled && !this.readonly;
+    const hasClearIconVisible =
+      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);
 
     return html`
       <div
@@ -497,6 +499,7 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
                     type="button"
                     aria-label=${this.localize.term('clearEntry')}
                     @click=${this.handleClearClick}
+                    style="visibility: ${hasClearIconVisible?'visible':'hidden'}"
                     tabindex="-1"
                   >
                     <slot name="clear-icon">