From 444acc1f1bca348b62dfb398067cc087529f67f1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 18 Aug 2023 12:06:54 -0500 Subject: [PATCH] fix(input, textarea): clearOnEdit does not clear when pressing Tab (#28005) Issue number: resolves #27746 --------- ## What is the current behavior? Pressing the Tab key when focused on an input/textarea with `clearOnEdit` clears the text field and then moves focus to the next focusable element. ## What is the new behavior? - Pressing the Tab key does not clear the text field even when clearOnEdit is enabled. - Added test coverage - I also noticed that input did not have an `index.html` file in the basic directory, so I added that. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `7.3.1-dev.11692202566.13cd16c4` --- core/src/components/input/input.tsx | 2 +- .../components/input/test/basic/index.html | 57 +++++++++++++++++++ .../input/test/clear-on-edit/input.e2e.ts | 43 ++++++++++++++ .../test/clear-on-edit/textarea.e2e.ts | 37 ++++++++++++ core/src/components/textarea/textarea.tsx | 6 +- 5 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 core/src/components/input/test/basic/index.html create mode 100644 core/src/components/input/test/clear-on-edit/input.e2e.ts create mode 100644 core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 44dec367e4..6498eeffa4 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -532,7 +532,7 @@ export class Input implements ComponentInterface { * Clear the input if the control has not been previously cleared during focus. * Do not clear if the user hitting enter to submit a form. */ - if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter') { + if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') { this.value = ''; this.emitInputChange(ev); } diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html new file mode 100644 index 0000000000..9ab5c6ecab --- /dev/null +++ b/core/src/components/input/test/basic/index.html @@ -0,0 +1,57 @@ + + + + + Input - Basic + + + + + + + + + + + + + + Input - Basic + + + + +
+
+

Default

+ +
+
+ + + + diff --git a/core/src/components/input/test/clear-on-edit/input.e2e.ts b/core/src/components/input/test/clear-on-edit/input.e2e.ts new file mode 100644 index 0000000000..e668690278 --- /dev/null +++ b/core/src/components/input/test/clear-on-edit/input.e2e.ts @@ -0,0 +1,43 @@ +import { expect } from '@playwright/test'; +import { test, configs } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('input: clearOnEdit'), () => { + test('should clear when typed into', async ({ page }) => { + await page.setContent(``, config); + + const ionInput = await page.spyOnEvent('ionInput'); + + const input = page.locator('ion-input'); + await input.locator('input').type('h'); + + await ionInput.next(); + + await expect(input).toHaveJSProperty('value', 'h'); + }); + + test('should not clear when enter is pressed', async ({ page }) => { + await page.setContent(``, config); + + const input = page.locator('ion-input'); + await input.locator('input').focus(); + + await page.keyboard.press('Enter'); + await page.waitForChanges(); + + await expect(input).toHaveJSProperty('value', 'abc'); + }); + + test('should not clear when tab is pressed', async ({ page }) => { + await page.setContent(``, config); + + const input = page.locator('ion-input'); + await input.locator('input').focus(); + + await page.keyboard.press('Tab'); + await page.waitForChanges(); + + await expect(input).toHaveJSProperty('value', 'abc'); + }); + }); +}); diff --git a/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts b/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts new file mode 100644 index 0000000000..f085f46ee8 --- /dev/null +++ b/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts @@ -0,0 +1,37 @@ +import { expect } from '@playwright/test'; +import { test, configs } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('textarea: clearOnEdit'), () => { + test('should clear when typed into', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const ionInput = await page.spyOnEvent('ionInput'); + + const textarea = page.locator('ion-textarea'); + await textarea.locator('textarea').type('h'); + + await ionInput.next(); + + await expect(textarea).toHaveJSProperty('value', 'h'); + }); + + test('should not clear when tab is pressed', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const textarea = page.locator('ion-textarea'); + await textarea.locator('textarea').focus(); + + await page.keyboard.press('Tab'); + await page.waitForChanges(); + + await expect(textarea).toHaveJSProperty('value', 'abc'); + }); + }); +}); diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index b49ad7cb9d..e2bb7e1a57 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -434,7 +434,7 @@ export class Textarea implements ComponentInterface { /** * Check if we need to clear the text input if clearOnEdit is enabled */ - private checkClearOnEdit(ev: Event) { + private checkClearOnEdit(ev: KeyboardEvent) { if (!this.clearOnEdit) { return; } @@ -442,7 +442,7 @@ export class Textarea implements ComponentInterface { * Clear the textarea if the control has not been previously cleared * during focus. */ - if (!this.didTextareaClearOnEdit && this.hasValue()) { + if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') { this.value = ''; this.emitInputChange(ev); } @@ -501,7 +501,7 @@ export class Textarea implements ComponentInterface { this.ionBlur.emit(ev); }; - private onKeyDown = (ev: Event) => { + private onKeyDown = (ev: KeyboardEvent) => { this.checkClearOnEdit(ev); };