diff --git a/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts b/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts index 9459e2ef7..8de886c9f 100644 --- a/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts +++ b/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts @@ -35,6 +35,25 @@ export function addAutocompleteLoadingByOverridingFetch { 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 index 7886800eb..7c92752c9 100644 --- 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 index 693beb255..f67a7cedf 100644 --- 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 index ecc30ce1f..41dab2565 100644 --- 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(); });