fix clear button clicks (#1911)

shoelace-style · Mar 25, 2024 · 2878957 · 2878957
1 parent cd5a648
commit 2878957
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 19 deletions.
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
@@ -27,6 +27,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-select>` where the tag size wouldn't update with the control's size [#1886]
 - Fixed a bug in `<sl-checkbox>` and `<sl-switch>` where the color of the required content wasn't applying correctly
 - Fixed a bug in `<sl-checkbox>` where help text was incorrectly styled [#1897]
+- Fixed a bug in `<sl-input>` that prevented the control from receiving focus when clicking over the clear button
 
 ## 2.14.0
 

diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts
@@ -251,13 +251,16 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
   }
 
   private handleClearClick(event: MouseEvent) {
-    this.value = '';
-    this.emit('sl-clear');
-    this.emit('sl-input');
-    this.emit('sl-change');
-    this.input.focus();
+    event.preventDefault();
 
-    event.stopPropagation();
+    if (this.value !== '') {
+      this.value = '';
+      this.emit('sl-clear');
+      this.emit('sl-input');
+      this.emit('sl-change');
+    }
+
+    this.input.focus();
   }
 
   private handleFocus() {
@@ -493,14 +496,11 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
               @blur=${this.handleBlur}
             />
 
-            ${hasClearIcon
+            ${isClearIconVisible
               ? html`
                   <button
                     part="clear-button"
-                    class=${classMap({
-                      input__clear: true,
-                      'input__clear--visible': isClearIconVisible
-                    })}
+                    class="input__clear"
                     type="button"
                     aria-label=${this.localize.term('clearEntry')}
                     @click=${this.handleClearClick}

diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
@@ -247,10 +247,6 @@ export default css`
    * Clearable + Password Toggle
    */
 
-  .input__clear:not(.input__clear--visible) {
-    visibility: hidden;
-  }
-
   .input__clear,
   .input__password-toggle {
     display: inline-flex;
@@ -275,10 +271,6 @@ export default css`
     outline: none;
   }
 
-  .input--empty .input__clear {
-    visibility: hidden;
-  }
-
   /* Don't show the browser's password toggle in Edge */
   ::-ms-reveal {
     display: none;