AAE-27984 Fix fieldValueChanged called on init and blur for date widgets (#10621)

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -21,7 +21,6 @@
                    (keydown.enter)="datetimePicker.open()"
                    [placeholder]="field.placeholder"
                    [title]="field.tooltip"
-                   (blur)="updateField()"
                    [min]="minDate"
                    [max]="maxDate">
             <mat-datetimepicker-toggle matSuffix [for]="datetimePicker"

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts

@@ -61,6 +61,28 @@ describe('DateTimeWidgetComponent', () => {
         TestBed.resetTestingModule();
     });
 
+    it('should not call onFieldChanged on init', () => {
+        spyOn(widget, 'onFieldChanged').and.callThrough();
+        expect(widget.onFieldChanged).not.toHaveBeenCalled();
+    });
+
+    it('should call onFieldChanged when datetime changes', () => {
+        const spy = spyOn(widget, 'onFieldChanged').and.callThrough();
+        const field = new FormFieldModel(form, {
+            id: 'date-id',
+            name: 'date-name',
+            type: FormFieldTypes.DATETIME
+        });
+        const newDate = new Date('1982-03-13T10:00:00.000Z');
+
+        widget.field = field;
+        fixture.detectChanges();
+        widget.datetimeInputControl.setValue(newDate);
+
+        expect(spy).toHaveBeenCalled();
+        expect(spy.calls.mostRecent().args[0].value).toBe(newDate);
+    });
+
     it('should setup min value for date picker', () => {
         const minValue = '1982-03-13T10:00:00Z';
         widget.field = new FormFieldModel(form, {

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts

@@ -63,12 +63,7 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
         this.initDateAdapter();
         this.initDateRange();
         this.subscribeToDateChanges();
-        this.updateField();
-    }
-
-    updateField(): void {
         this.validateField();
-        this.onFieldChanged(this.field);
     }
 
     updateReactiveFormControl(): void {
@@ -96,6 +91,11 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
         });
     }
 
+    private updateField(): void {
+        this.validateField();
+        this.onFieldChanged(this.field);
+    }
+
     private validateField(): void {
         if (this.datetimeInputControl?.invalid) {
             this.handleErrors(this.datetimeInputControl.errors);

lib/core/src/lib/form/components/widgets/date/date.widget.html

@@ -12,7 +12,7 @@
                [placeholder]="field.placeholder"
                [min]="minDate"
                [max]="maxDate"
-               (blur)="updateField()">
+        />
         <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
         <mat-datepicker #datePicker
                         [startAt]="startAt"

lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts

@@ -42,6 +42,29 @@ describe('DateWidgetComponent', () => {
         testingUtils = new UnitTestingUtils(fixture.debugElement);
     });
 
+    it('should not call onFieldChanged on init', () => {
+        spyOn(widget, 'onFieldChanged').and.callThrough();
+        expect(widget.onFieldChanged).not.toHaveBeenCalled();
+    });
+
+    it('should call onFieldChanged when date changes', () => {
+        const spy = spyOn(widget, 'onFieldChanged').and.callThrough();
+        const field = new FormFieldModel(form, {
+            id: 'date-field-id',
+            name: 'date-name',
+            value: '9-9-9999',
+            type: 'date'
+        });
+        const newDate = new Date('12/12/2012');
+
+        widget.field = field;
+        fixture.detectChanges();
+        widget.dateInputControl.setValue(newDate);
+
+        expect(spy).toHaveBeenCalled();
+        expect(spy.calls.mostRecent().args[0].value).toBe(newDate);
+    });
+
     it('[C310333] - should be able to set a placeholder', () => {
         widget.field = new FormFieldModel(form, {
             id: 'date-id',

lib/core/src/lib/form/components/widgets/date/date.widget.ts

@@ -75,12 +75,7 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, Reac
         this.initDateRange();
         this.initStartAt();
         this.subscribeToDateChanges();
-        this.updateField();
-    }
-
-    updateField(): void {
         this.validateField();
-        this.onFieldChanged(this.field);
     }
 
     updateReactiveFormControl(): void {
@@ -108,6 +103,11 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, Reac
         });
     }
 
+    private updateField(): void {
+        this.validateField();
+        this.onFieldChanged(this.field);
+    }
+
     private validateField(): void {
         if (this.dateInputControl.invalid) {
             this.handleErrors(this.dateInputControl.errors);

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html

@@ -15,7 +15,7 @@
                 [min]="minDate"
                 [max]="maxDate"
                 [title]="field.tooltip"
-                (blur)="updateField()">
+            />
             <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
             <mat-datepicker #datePicker
                 [startAt]="startAt"

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts

@@ -43,6 +43,29 @@ describe('DateCloudWidgetComponent', () => {
         element = fixture.nativeElement;
     });
 
+    it('should not call onFieldChanged on init', () => {
+        spyOn(widget, 'onFieldChanged').and.callThrough();
+        expect(widget.onFieldChanged).not.toHaveBeenCalled();
+    });
+
+    it('should call onFieldChanged when date changes', () => {
+        const spy = spyOn(widget, 'onFieldChanged').and.callThrough();
+        const field = new FormFieldModel(form, {
+            id: 'date-field-id',
+            name: 'date-name',
+            value: '9-9-9999',
+            type: 'date'
+        });
+        const newDate = new Date('12/12/2012');
+
+        widget.field = field;
+        fixture.detectChanges();
+        widget.dateInputControl.setValue(newDate);
+
+        expect(spy).toHaveBeenCalled();
+        expect(spy.calls.mostRecent().args[0].value).toBe(newDate);
+    });
+
     it('should setup min value for date picker', () => {
         const minValue = '1982-03-13';
         widget.field = new FormFieldModel(null, {

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts

@@ -83,12 +83,7 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
         this.initRangeSelection();
         this.initStartAt();
         this.subscribeToDateChanges();
-        this.updateField();
-    }
-
-    updateField(): void {
         this.validateField();
-        this.onFieldChanged(this.field);
     }
 
     updateReactiveFormControl(): void {
@@ -116,6 +111,11 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
         });
     }
 
+    private updateField(): void {
+        this.validateField();
+        this.onFieldChanged(this.field);
+    }
+
     private validateField(): void {
         if (this.dateInputControl.invalid) {
             this.handleErrors(this.dateInputControl.errors);