fix: Composite Editor should reapply original when exist & form is re…

…set (#1739)
ghiscoding · Nov 12, 2024 · f709b56 · f709b56
1 parent 02c938b
commit f709b56
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/packages/common/src/editors/__tests__/dateEditor.spec.ts b/packages/common/src/editors/__tests__/dateEditor.spec.ts
@@ -397,6 +397,27 @@ describe('DateEditor', () => {
         expect(editor.isValueTouched()).toBe(true);
       });
 
+      it('should return the first loaded date when date is loaded multiple times then reset', () => {
+        mockItemData = { id: 1, startDate: '02/25/2020', isActive: true };
+        mockColumn.type = FieldType.dateUs;
+        const dateMock = '02/25/2020';
+
+        editor = new DateEditor(editorArguments);
+        vi.runAllTimers();
+
+        editor.loadValue(mockItemData);
+        const editorInputElm = divContainer.querySelector('input.date-picker') as HTMLInputElement;
+        editorInputElm.value = dateMock;
+        editor.calendarInstance!.actions!.clickDay!(new MouseEvent('click'), { HTMLInputElement: editorInputElm, selectedDates: [dateMock] } as unknown as VanillaCalendar);
+        editor.calendarInstance!.actions!.changeToInput!(new MouseEvent('click'), { HTMLInputElement: editorInputElm, selectedDates: [dateMock], hide: vi.fn() } as unknown as VanillaCalendar);
+        editor.reset();
+
+        expect(editorInputElm.value).toBe(dateMock);
+        expect(editor.calendarInstance?.settings.selected.dates).toEqual(['2020-02-25']); // picker only deals with ISO formatted dates
+        expect(editor.isValueChanged()).toBe(false);
+        expect(editor.isValueTouched()).toBe(false);
+      });
+
       it('should return False when date in the picker is the same as the current date', () => {
         mockItemData = { id: 1, startDate: '2001-01-02', isActive: true };
         mockColumn.type = FieldType.dateIso;

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -388,8 +388,9 @@ export class DateEditor implements Editor {
       const inputFieldType = this.columnEditor.type || this.columnDef?.type || FieldType.dateIso;
       const outputFieldType = this.columnDef.outputType || this.columnEditor.type || this.columnDef.type || FieldType.dateIso;
 
-      this._originalDate = formatDateByFieldType(value, inputFieldType, outputFieldType);
-      this._inputElm.value = this._originalDate;
+      const formattedDate = formatDateByFieldType(value, inputFieldType, outputFieldType);
+      this._originalDate = formattedDate !== '' ? value : '';
+      this._inputElm.value = formattedDate;
     }
   }
 

diff --git a/test/cypress/e2e/example12.cy.ts b/test/cypress/e2e/example12.cy.ts
@@ -718,6 +718,17 @@ describe('Example 12 - Composite Editor Modal', () => {
 
     cy.get('.slick-editor-modal-title')
       .should('contain', 'Editing - Task 3');
+  });
+
+  it('should change Start date and reset to previous value when resetting the form', () => {
+    cy.get('.editor-start .vanilla-picker input').invoke('val').should('not.be.empty');
+    cy.get('.editor-start .vanilla-picker [data-clear] button.btn-clear').click();
+    cy.get('.editor-start .vanilla-picker input').invoke('val').should('be.empty');
+
+    cy.get('.item-details-container .modified').should('have.length', 1);
+    cy.get('.reset-form').contains('Reset Form').click();
+    cy.get('.item-details-container .modified').should('have.length', 0);
+    cy.get('.editor-start .vanilla-picker input').invoke('val').should('not.be.empty');
 
     cy.get('.slick-editor-modal-footer .btn-cancel')
       .click();