diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 63a3eb04f5..9ccf042580 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1832,8 +1832,11 @@ has been modified. */ ionChange: EventEmitter>; /** - * Ths `ionInput` event fires when the `value` of an `` element -has been changed. + * The `ionInput` event fires when the `value` of an `` element +has been changed. + +When `clearOnEdit` is enabled, the `ionInput` event will be fired when +the user clears the textarea by performing a keydown event. */ ionInput: EventEmitter>; /** diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 13cd0b6063..fdc8fdd610 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -6564,9 +6564,9 @@ declare namespace LocalJSX { */ "onIonFocus"?: (event: IonTextareaCustomEvent) => void; /** - * Ths `ionInput` event fires when the `value` of an `` element has been changed. + * The `ionInput` event fires when the `value` of an `` element has been changed. When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event. */ - "onIonInput"?: (event: IonTextareaCustomEvent) => void; + "onIonInput"?: (event: IonTextareaCustomEvent) => void; /** * Emitted when the styles change. */ diff --git a/core/src/components/textarea/test/clearOnEdit/textarea.e2e.ts b/core/src/components/textarea/test/clearOnEdit/textarea.e2e.ts new file mode 100644 index 0000000000..86dff28c69 --- /dev/null +++ b/core/src/components/textarea/test/clearOnEdit/textarea.e2e.ts @@ -0,0 +1,35 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('textarea: clearOnEdit', () => { + test.beforeEach(async ({ skip }) => { + skip.rtl(); + skip.mode('md'); + }); + + test('should clear the textarea on first keystroke of textarea being focused', async ({ page }) => { + await page.setContent(``); + + const textarea = page.locator('ion-textarea'); + + await textarea.click(); + await textarea.type('h'); + + expect(await textarea.evaluate((el: HTMLIonTextareaElement) => el.value)).toBe('h'); + + await textarea.type('ello world'); + + expect(await textarea.evaluate((el: HTMLIonTextareaElement) => el.value)).toBe('hello world'); + }); + + test('should not clear the textarea if it does not have an initial value when typing', async ({ page }) => { + await page.setContent(``); + + const textarea = page.locator('ion-textarea'); + + await textarea.click(); + await textarea.type('hello world'); + + expect(await textarea.evaluate((el: HTMLIonTextareaElement) => el.value)).toBe('hello world'); + }); +}); diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 3252a25910..bb6910db8a 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -21,11 +21,17 @@ import { createColorClasses } from '../../utils/theme'; export class Textarea implements ComponentInterface { private nativeInput?: HTMLTextAreaElement; private inputId = `ion-textarea-${textareaIds++}`; - private didBlurAfterEdit = this.hasValue(); + /** + * `true` if the textarea was cleared as a result of the user typing + * with `clearOnEdit` enabled. + * + * Resets when the textarea loses focus. + */ + private didTextareaClearOnEdit = false; private textareaWrapper?: HTMLElement; private inheritedAttributes: Attributes = {}; /** - * The value of the input when the textarea is focused. + * The value of the textarea when the textarea is focused. */ private focusedValue?: string | null; @@ -176,10 +182,13 @@ export class Textarea implements ComponentInterface { @Event() ionChange!: EventEmitter; /** - * Ths `ionInput` event fires when the `value` of an `` element + * The `ionInput` event fires when the `value` of an `` element * has been changed. + * + * When `clearOnEdit` is enabled, the `ionInput` event will be fired when + * the user clears the textarea by performing a keydown event. */ - @Event() ionInput!: EventEmitter; + @Event() ionInput!: EventEmitter; /** * Emitted when the styles change. @@ -295,24 +304,18 @@ export class Textarea implements ComponentInterface { if (!this.clearOnEdit) { return; } - - // Did the input value change after it was blurred and edited? - if (this.didBlurAfterEdit && this.hasValue()) { - // Clear the input + /** + * Clear the textarea if the control has not been previously cleared + * during focus. + */ + if (!this.didTextareaClearOnEdit && this.hasValue()) { this.value = ''; + this.ionInput.emit(); } - - this.ionInput.emit(null); - - // Reset the flag - this.didBlurAfterEdit = false; + this.didTextareaClearOnEdit = true; } private focusChange() { - // If clearOnEdit is enabled and the input blurred but has a value, set a flag - if (this.clearOnEdit && !this.hasFocus && this.hasValue()) { - this.didBlurAfterEdit = true; - } this.emitStyle(); } @@ -360,7 +363,7 @@ export class Textarea implements ComponentInterface { */ this.emitValueChange(); } - + this.didTextareaClearOnEdit = false; this.ionBlur.emit(ev); };