chore(): sync with main

core/src/components/input/input.scss

@@ -147,6 +147,13 @@
   appearance: none;
 }
 
+/**
+ * Normally, we would not want to use :focus
+ * here because that would mean tapping the button
+ * on mobile would focus it (and keep it focused).
+ * However, the clear button always disappears after
+ * being activated, so we never get to that state.
+ */
 .input-clear-icon:focus {
   opacity: 0.5;
 }

core/src/components/input/input.tsx

@@ -376,12 +376,6 @@ export class Input implements ComponentInterface {
     this.isComposing = false;
   };
 
-  private clearTextOnEnter = (ev: KeyboardEvent) => {
-    if (ev.key === 'Enter') {
-      this.clearTextInput(ev);
-    }
-  };
-
   private clearTextInput = (ev?: Event) => {
     if (this.clearInput && !this.readonly && !this.disabled && ev) {
       ev.preventDefault();
@@ -470,8 +464,15 @@ export class Input implements ComponentInterface {
             aria-label="reset"
             type="button"
             class="input-clear-icon"
-            onPointerDown={this.clearTextInput}
-            onKeyDown={this.clearTextOnEnter}
+            onPointerDown={(ev) => {
+              /**
+               * This prevents mobile browsers from
+               * blurring the input when the clear
+               * button is activated.
+               */
+              ev.preventDefault();
+            }}
+            onClick={this.clearTextInput}
           />
         )}
       </Host>

core/src/components/input/test/basic/input.e2e.ts

@@ -157,3 +157,47 @@ test.describe('input: basic', () => {
     });
   });
 });
+
+test.describe('input: clear button', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+  test('should clear the input when pressed', async ({ page }) => {
+    await page.setContent(`
+      <ion-input value="abc" clear-input="true"></ion-input>
+    `);
+
+    const input = page.locator('ion-input');
+    const clearButton = input.locator('.input-clear-icon');
+
+    await expect(input).toHaveJSProperty('value', 'abc');
+
+    await clearButton.click();
+    await page.waitForChanges();
+
+    await expect(input).toHaveJSProperty('value', '');
+  });
+  /**
+   * Note: This only tests the desktop focus behavior.
+   * Mobile browsers have different restrictions around
+   * focusing inputs, so these platforms should always
+   * be tested when making changes to the focus behavior.
+   */
+  test('should keep the input focused when the clear button is pressed', async ({ page }) => {
+    await page.setContent(`
+      <ion-input value="abc" clear-input="true"></ion-searchbar>
+    `);
+
+    const input = page.locator('ion-input');
+    const nativeInput = input.locator('input');
+    const clearButton = input.locator('.input-clear-icon');
+
+    await input.click();
+    await expect(nativeInput).toBeFocused();
+
+    await clearButton.click();
+    await page.waitForChanges();
+
+    await expect(nativeInput).toBeFocused();
+  });
+});