fix(editor): new Date Editor input clear button wasn't working (#1487)

ghiscoding · Apr 27, 2024 · 4ac34ee · 4ac34ee
1 parent afe65b2
commit 4ac34ee
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/common/src/editors/__tests__/dateEditor.spec.ts b/packages/common/src/editors/__tests__/dateEditor.spec.ts
@@ -278,6 +278,7 @@ describe('DateEditor', () => {
         editor.calendarInstance!.actions!.clickDay!(new MouseEvent('click'), { HTMLInputElement: editorInputElm, selectedDates: [] } as unknown as VanillaCalendar);
         editor.calendarInstance!.actions!.changeToInput!(new MouseEvent('click'), { HTMLInputElement: editorInputElm, selectedDates: [], hide: jest.fn() } as unknown as VanillaCalendar);
 
+        expect(editor.calendarInstance?.settings.selected.dates).toEqual([]);
         expect(editorInputElm.value).toBe('');
         expect(editor.isValueChanged()).toBe(true);
         expect(editor.isValueTouched()).toBe(true);
@@ -298,6 +299,7 @@ describe('DateEditor', () => {
         clearBtnElm.click();
 
         expect(editorInputElm.value).toBe('');
+        expect(editor.calendarInstance?.settings.selected.dates).toEqual([]);
         expect(editor.isValueChanged()).toBe(true);
         expect(editor.isValueTouched()).toBe(true);
       });

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -196,7 +196,10 @@ export class DateEditor implements Editor {
       if (!(this.columnEditor.editorOptions as any)?.hideClearButton) {
         closeButtonGroupElm.appendChild(this._clearButtonElm);
         this._editorInputGroupElm.appendChild(closeButtonGroupElm);
-        this._bindEventService.bind(this._clearButtonElm, 'click', () => this._lastTriggeredByClearDate = true);
+        this._bindEventService.bind(this._clearButtonElm, 'click', () => {
+          this.clear();
+          this.handleOnDateChange();
+        });
       }
 
       setTimeout(() => {
@@ -230,6 +233,14 @@ export class DateEditor implements Editor {
     this._inputElm?.remove();
   }
 
+  clear() {
+    this._lastTriggeredByClearDate = true;
+    if (this.calendarInstance) {
+      this.calendarInstance.settings.selected.dates = [];
+      this._inputElm.value = '';
+    }
+  }
+
   disable(isDisabled = true) {
     const prevIsDisabled = this.disabled;
     this.disabled = isDisabled;