From ff71ad492d7671f8e550da7e08dbde30cb05ebf7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 29 Aug 2022 16:41:02 -0500
Subject: [PATCH] fix(input): clear button is not activated on swipe (#25825)

resolves #24857
---
 core/src/components/input/input.tsx           | 17 +++----
 .../components/input/test/basic/input.e2e.ts  | 44 +++++++++++++++++++
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 1d0d93309ed..d0a594fddc3 100644
--- a/core/src/components/input/input.tsx
+++ b/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>
diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts
index d611e847aff..79f68571238 100644
--- a/core/src/components/input/test/basic/input.e2e.ts
+++ b/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();
+  });
+});