fix(input): clearable button display

Signed-off-by: Alexandre Esteves <[email protected]>

Author: aesteves60

packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.tsx

@@ -331,12 +331,7 @@ export class OdsDatepicker implements OdsFormElement {
   }
 
   private onInput(event: InputEvent): void {
-    const value = (event.target as HTMLInputElement).value;
-    if (!value) {
-      this.showClearable = false;
-    } else {
-      this.showClearable = true;
-    }
+    this.showClearable = !(event.target as HTMLInputElement).value;
   }
 
   render(): FunctionalComponent {

packages/ods/src/components/input/src/components/ods-input/ods-input.tsx

@@ -218,6 +218,8 @@ export class OdsInput implements OdsFormElement {
     } else {
       this.value = this.inputEl?.value ?? null;
     }
+
+    this.showClearable = !this.inputEl?.validity.valid && !this.inputEl?.validity.valueMissing;
   }
 
   private onListSlotChange(event: Event): void {
@@ -258,11 +260,12 @@ export class OdsInput implements OdsFormElement {
       this.shouldUpdateIsInvalidState = false;
     }
 
-    if (!this.internals.validity?.valid && !this.internals.validity?.valueMissing) {
-      this.showClearable = true;
-    } else {
-      this.showClearable = false;
-    }
+    // console.log('this.internals.validity', this.internals.validity)
+    // if (!this.internals.validity?.valid && !this.internals.validity?.valueMissing) {
+    //   this.showClearable = true;
+    // } else {
+    //   this.showClearable = false;
+    // }
 
     this.odsChange.emit({
       name: this.name,
@@ -273,7 +276,7 @@ export class OdsInput implements OdsFormElement {
   }
 
   render(): FunctionalComponent {
-    const hasClearableIcon = this.isClearable && !this.isLoading && (!!this.showClearable || !!this.value);
+    const hasClearableIcon = this.isClearable && !this.isLoading && (this.showClearable || !!this.value);
     const hasToggleMaskIcon = this.isPassword && !this.isLoading;
     const hasSearchIcon = this.type === ODS_INPUT_TYPE.search && !this.isLoading;
 

packages/ods/src/components/input/tests/rendering/ods-input.e2e.ts

@@ -251,6 +251,29 @@ describe('ods-input rendering', () => {
 
       expect(buttonClearable).not.toBeNull();
     });
+
+    it('should render a clearable button when type', async() => {
+      await setup('<ods-input is-clearable type="number"></ods-input>');
+
+      await el.type('12');
+      await page.waitForChanges();
+      buttonClearable = await page.find('ods-input >>> ods-button[icon="xmark"]');
+      expect(buttonClearable).not.toBeNull();
+
+      await page.keyboard.press('Backspace');
+      await page.keyboard.press('Backspace');
+      await page.waitForChanges();
+
+      buttonClearable = await page.find('ods-input >>> ods-button[icon="xmark"]');
+      expect(buttonClearable).toBeNull();
+
+      // Test E2E launched with chrome. Chrome don't allow to type on input type number
+      // await page.keyboard.press('q');
+      // await page.waitForChanges();
+      // await new Promise(resolve => setTimeout(resolve, 20000));
+      // buttonClearable = await page.find('ods-input >>> ods-button[icon="xmark"]');
+      // expect(buttonClearable).not.toBeNull();
+    });
   });
 
   describe('type search', () => {