fix(textarea): emit odsValueChange on value change

ovh · Oct 2, 2023 · d828b4e · d828b4e
1 parent 7fe7058
commit d828b4e
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git a/packages/components/textarea/documentation/specifications/spec.md b/packages/components/textarea/documentation/specifications/spec.md
@@ -35,7 +35,7 @@
 |---|---|:---:|---|---|
 |**`odsBlur`** | `EventEmitter<void>` | ✴️ |  | Event triggered on textarea blur|
 |**`odsFocus`** | `EventEmitter<void>` | ✴️ |  | Event triggered on textarea focus|
-|**`odsValueChange`** | `EventEmitter<OdsTextAreaValueChangeEvent>` | ✴️ |  | the textarea value changed|
+|**`odsValueChange`** | `EventEmitter<OdsTextAreaValueChangeEvent>` | ✴️ |  | The textarea value changed|
 
 ### OdsTextAreaMethod
 |name | Type | Required | Default | Description|
@@ -80,4 +80,4 @@
 
 Name | Type | Description 
 ---|---|---
-**value** | _number_ |  |
+**value** | _number_ |   |
diff --git a/packages/components/textarea/src/components/osds-textarea/core/controller.ts b/packages/components/textarea/src/components/osds-textarea/core/controller.ts
@@ -19,7 +19,7 @@ class OdsTextAreaController {
    * @param newValue - value of the HTML textarea
    */
   handleTextAreaValue(newValue: HTMLTextAreaElement['value']): void {
-    if(!this.component.disabled && newValue === '') {
+    if(!this.component.disabled) {
       this.component.value = newValue;
     }
   }

diff --git a/packages/components/textarea/src/components/osds-textarea/interfaces/events.ts b/packages/components/textarea/src/components/osds-textarea/interfaces/events.ts
@@ -16,7 +16,9 @@ interface OdsTextAreaEvent {
    * Event triggered on textarea focus
    */
   odsFocus: EventEmitter<void>;
-  /** the textarea value changed */
+  /**
+   * The textarea value changed
+   */
   odsValueChange: EventEmitter<OdsTextAreaValueChangeEvent>;
 }
 

diff --git a/packages/components/textarea/src/components/osds-textarea/osds-textarea.e2e.ts b/packages/components/textarea/src/components/osds-textarea/osds-textarea.e2e.ts
@@ -98,6 +98,28 @@ describe('e2e:osds-textarea', () => {
         expect(odsValueChange).toHaveReceivedEventDetail(expected);
         expect(odsValueChange).toHaveReceivedEventTimes(1);
       });
+
+      it('should emit if we write inside the textarea', async () => {
+        const newValue = 'Lorem';
+        await setup();
+        const odsValueChange = await el.spyOnEvent('odsValueChange');
+
+        el.setProperty('value', ' ipsum');
+        await page.waitForChanges();
+
+        el.callMethod('setFocus');
+        await page.waitForChanges();
+        await page.keyboard.type(newValue);
+
+        const expected: OdsTextAreaValueChangeEvent = {
+          ...odsTextAreaValueChangeEventDetailBase,
+          oldValue: 'Lore ipsum',
+          value: 'Lorem ipsum',
+        };
+
+        expect(odsValueChange).toHaveReceivedEventDetail(expected);
+        expect(odsValueChange).toHaveReceivedEventTimes(newValue.length + 1);
+      })
     });
   });
 });

diff --git a/packages/components/textarea/src/components/osds-textarea/osds-textarea.tsx b/packages/components/textarea/src/components/osds-textarea/osds-textarea.tsx
@@ -130,39 +130,39 @@ export class OsdsTextArea implements OdsTextAreaAttribute, OdsTextAreaEvent, Ods
   /**
    * @see OdsTextAreaBehavior.beforeInit
    */
-   beforeInit(): void {
+  beforeInit(): void {
     this.controller.beforeInit();
   }
 
   /**
    * @see OdsTextAreaBehavior.emitChange
    */
-   emitChange(value: HTMLTextAreaElement['value'], oldValue?: HTMLTextAreaElement['value']): void {
+  emitChange(value: HTMLTextAreaElement['value'], oldValue?: HTMLTextAreaElement['value']): void {
     this.odsValueChange.emit({
-      value: value == null ? value : `${value}`,
       oldValue: oldValue == null ? oldValue : `${oldValue}`,
-      validity: this.controller.getTextAreaValidity()
+      validity: this.controller.getTextAreaValidity(),
+      value: value == null ? value : `${value}`,
     });
   }
 
   /**
    * @see OdsTextAreaBehavior.emitBlur
    */
-   emitBlur(): void {
+  emitBlur(): void {
     this.odsBlur.emit();
   }
 
   /**
    * @see OdsTextAreaBehavior.emitFocus
    */
-   emitFocus(): void {
+  emitFocus(): void {
     this.odsFocus.emit();
   }
 
   /**
    * @see OdsTextAreaBehavior.onBlur
    */
-   onBlur(): void {
+  onBlur(): void {
     this.controller.onBlur();
   }
 
@@ -176,7 +176,7 @@ export class OsdsTextArea implements OdsTextAreaAttribute, OdsTextAreaEvent, Ods
   /**
    * @see OdsTextAreaBehavior.onChange
    */
-   onChange(): void {
+  onChange(): void {
     this.controller.onChange();
   }