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(); + }); +});