fix(input): clear button is not activated on swipe (#25825)

resolves #24857

Author: liamdebeasi

core/src/components/input/input.tsx

@@ -402,12 +402,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();
@@ -496,8 +490,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();
+  });
+});