fix: date editor clear/reset not working in composite editor (#1735)

* fix: date editor clear/reset not working in composite editor - add `resetDatePicker()` to correctly reset date picker and reset to today's date
ghiscoding · Nov 9, 2024 · 976bd23 · 976bd23
1 parent c2b54ba
commit 976bd23
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 19 deletions.
diff --git a/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts b/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts
@@ -35,6 +35,25 @@ export function addAutocompleteLoadingByOverridingFetch<T extends AutocompleteIt
   }
 }
 
+export function resetDatePicker(pickerInstance: VanillaCalendar): void {
+  const today = new Date();
+  pickerInstance.settings.selected = {
+    dates: [],
+    month: today.getMonth(),
+    year: today.getFullYear()
+  };
+  const dateInputElm = pickerInstance.HTMLInputElement;
+  if (dateInputElm) {
+    dateInputElm.value = '';
+  }
+  pickerInstance.update({
+    dates: true,
+    month: true,
+    year: true,
+    time: true,
+  });
+}
+
 export function setPickerDates(
   colEditorOrFilter: ColumnEditor | ColumnFilter,
   dateInputElm: HTMLInputElement,

diff --git a/packages/common/src/editors/__tests__/dateEditor.spec.ts b/packages/common/src/editors/__tests__/dateEditor.spec.ts
@@ -351,6 +351,32 @@ describe('DateEditor', () => {
         expect(editor.isValueTouched()).toBe(true);
       });
 
+      it('should clear date picker when calling the reset() method', () => {
+        mockItemData = { id: 1, startDate: '2001-01-02T11:02:02.000Z', isActive: true };
+
+        editor = new DateEditor(editorArguments);
+        vi.runAllTimers();
+
+        editor.loadValue(mockItemData);
+        editor.focus();
+
+        const today = new Date();
+        let calendarElm = document.body.querySelector('.vanilla-calendar') as HTMLDivElement;
+        let yearElm = calendarElm.querySelector('.vanilla-calendar-year') as HTMLButtonElement;
+        const clearBtnElm = divContainer.querySelector('.btn-clear') as HTMLInputElement;
+
+        expect(+yearElm.innerText).not.toBe(today.getFullYear());
+
+        clearBtnElm.click();
+        editor.reset();
+        editor.show();
+
+        calendarElm = document.body.querySelector('.vanilla-calendar') as HTMLDivElement;
+        yearElm = calendarElm.querySelector('.vanilla-calendar-year') as HTMLButtonElement;
+
+        expect(+yearElm.innerText).toBe(today.getFullYear());
+      });
+
       it('should also return True when date is reset by the clear date button even if the previous date was empty', () => {
         mockItemData = { id: 1, startDate: '', isActive: true };
 

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -20,7 +20,7 @@ import type {
 import { getDescendantProperty, } from './../services/utilities.js';
 import type { TranslaterService } from '../services/translater.service.js';
 import { SlickEventData, type SlickGrid } from '../core/index.js';
-import { setPickerDates } from '../commonEditorFilter/commonEditorFilterUtils.js';
+import { resetDatePicker, setPickerDates } from '../commonEditorFilter/commonEditorFilterUtils.js';
 import { formatDateByFieldType, mapTempoDateFormatWithFieldType } from '../services/dateUtils.js';
 
 /*
@@ -249,8 +249,7 @@ export class DateEditor implements Editor {
   clear(): void {
     this._lastTriggeredByClearDate = true;
     if (this.calendarInstance) {
-      this.calendarInstance.settings.selected.dates = [];
-      this._inputElm.value = '';
+      resetDatePicker(this.calendarInstance);
     }
   }
 
@@ -403,9 +402,13 @@ export class DateEditor implements Editor {
     if (this.calendarInstance) {
       this._originalDate = inputValue;
       this.calendarInstance.settings.selected.dates = [inputValue as FormatDateString];
-      if (!inputValue) {
-        this.calendarInstance.settings.selected.dates = [];
-        this._inputElm.value = '';
+      if (inputValue) {
+        setPickerDates(this.columnEditor, this._inputElm, this.calendarInstance, {
+          columnDef: this.columnDef,
+          newVal: inputValue,
+        });
+      } else {
+        resetDatePicker(this.calendarInstance);
       }
     }
     this._isValueTouched = false;

diff --git a/packages/common/src/filters/dateFilter.ts b/packages/common/src/filters/dateFilter.ts
@@ -24,7 +24,7 @@ import { formatDateByFieldType, mapTempoDateFormatWithFieldType } from '../servi
 import { mapOperatorToShorthandDesignation } from '../services/utilities.js';
 import type { TranslaterService } from '../services/translater.service.js';
 import type { SlickGrid } from '../core/slickGrid.js';
-import { setPickerDates } from '../commonEditorFilter/commonEditorFilterUtils.js';
+import { resetDatePicker, setPickerDates } from '../commonEditorFilter/commonEditorFilterUtils.js';
 
 export class DateFilter implements Filter {
   protected _bindEventService: BindingEventService;
@@ -162,18 +162,7 @@ export class DateFilter implements Filter {
       }
 
       if (this.calendarInstance) {
-        const now = new Date();
-        setPickerDates(this.columnFilter, this._dateInputElm, this.calendarInstance, {
-          columnDef: this.columnDef,
-          oldVal: this._currentDateOrDates,
-          newVal: '',
-          updatePickerUI: true,
-          selectedSettings: {
-            dates: [],
-            month: now.getMonth(),
-            year: now.getFullYear()
-          }
-        });
+        resetDatePicker(this.calendarInstance);
       }
     }
     this.onTriggerEvent(new Event('keyup'));

diff --git a/test/cypress/e2e/example12.cy.ts b/test/cypress/e2e/example12.cy.ts
@@ -733,6 +733,22 @@ describe('Example 12 - Composite Editor Modal', () => {
     cy.get('.slick-editor-modal-title')
       .should('contain', 'Clone - Task 3');
 
+    // start date shouldn't be today's month/year
+    const today = new Date();
+    cy.get('.editor-start .vanilla-picker input').click();
+
+    cy.get('.vanilla-calendar:visible .vanilla-calendar-year')
+      .should('not.contain', today.getFullYear());
+
+    // clear start date
+    cy.get('.editor-start .vanilla-picker .btn-clear').click();
+
+    // reopen start date and expect today's year
+    cy.get('.editor-start .vanilla-picker input').click();
+
+    cy.get('.vanilla-calendar:visible .vanilla-calendar-year')
+      .should('contain', today.getFullYear());
+
     cy.get('.slick-editor-modal-footer .btn-cancel')
       .click();
   });