backport shoelace#1911

docs/docs/resources/changelog.md

@@ -34,6 +34,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Fixed a bug in `<sl-tree>` that caused a new stacking context resulting in tooltips being clipped [#1709]
 - Fixed a bug in `<sl-tab-group>` that caused the scroll controls to toggle indefinitely when zoomed in Safari [#1839]
 - Fixed a bug in the submenu controller that allowed two submenus to be open at the same time [#1880]
+- Fixed a bug in `<sl-input>` that prevented the control from receiving focus when clicking over the clear button
 
 ## 2.14.0
 

src/components/input/input.styles.ts

@@ -219,10 +219,6 @@ export default css`
    * Clearable + Password Toggle
    */
 
-  .input__clear:not(.input__clear--visible) {
-    visibility: hidden;
-  }
-
   .input__clear,
   .input__password-toggle {
     display: inline-flex;
@@ -247,10 +243,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;

src/components/input/input.ts

@@ -258,13 +258,16 @@ export default class WaInput extends WebAwesomeElement implements WebAwesomeForm
   }
 
   private handleClearClick(event: MouseEvent) {
-    this.value = '';
-    this.emit('wa-clear');
-    this.emit('wa-input');
-    this.emit('wa-change');
-    this.input.focus();
+    event.preventDefault();
 
-    event.stopPropagation();
+    if (this.value !== '') {
+      this.value = '';
+      this.emit('wa-clear');
+      this.emit('wa-input');
+      this.emit('wa-change');
+    }
+
+    this.input.focus();
   }
 
   private handleFocus() {
@@ -500,14 +503,11 @@ export default class WaInput extends WebAwesomeElement implements WebAwesomeForm
               @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}