diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 1d0d93309e..d0a594fddc 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}
/>
)}
diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts
index d611e847af..79f6857123 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(`
+
+ `);
+
+ 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(`
+
+ `);
+
+ 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();
+ });
+});