[NG] fix input reset on datepicker/refactor (vmware-archive#3050)

* [NG] refactor date input, add tests Signed-off-by: Cory Rylan <[email protected]> * [NG] fix input reset on datepicker When using clrDate, setting input to null would not clear the input. closes vmware-archive#3012 Signed-off-by: Cory Rylan <[email protected]>
jacobbutton · Jan 22, 2019 · 1d115f8 · 1d115f8
1 parent 66c1e49
commit 1d115f8
Show file tree

Hide file tree

Showing 9 changed files with 239 additions and 251 deletions.
diff --git a/golden/clr-angular.d.ts b/golden/clr-angular.d.ts
@@ -511,18 +511,18 @@ export declare class ClrDateContainer implements DynamicWrapper, OnDestroy {
 }
 
 export declare class ClrDateInput extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
-    _dateUpdated: EventEmitter<Date>;
     clrNewLayout: boolean;
     protected control: NgControl;
     date: Date;
+    dateChange: EventEmitter<Date>;
     protected el: ElementRef;
     protected index: number;
     readonly inputType: string;
     newFormsLayout: boolean;
     placeholder: string;
     readonly placeholderText: string;
     protected renderer: Renderer2;
-    constructor(vcr: ViewContainerRef, injector: Injector, el: ElementRef, renderer: Renderer2, control: NgControl, container: ClrDateContainer, _dateIOService: DateIOService, _dateNavigationService: DateNavigationService, _datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, platformId: Object, focusService: FocusService, newFormsLayout: boolean, datepickerFocusService: DatepickerFocusService);
+    constructor(viewContainerRef: ViewContainerRef, injector: Injector, el: ElementRef, renderer: Renderer2, control: NgControl, container: ClrDateContainer, dateIOService: DateIOService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, platformId: Object, focusService: FocusService, newFormsLayout: boolean, datepickerFocusService: DatepickerFocusService);
     ngAfterViewInit(): void;
     ngOnInit(): void;
     onValueChange(target: HTMLInputElement): void;

diff --git a/src/clr-angular/forms/datepicker/date-input.spec.ts b/src/clr-angular/forms/datepicker/date-input.spec.ts
@@ -580,6 +580,29 @@ export default function() {
 
         expect(fixture.componentInstance.date).toBeNull();
       });
+
+      it('preserves input value from user when date is invalid', () => {
+        dateInputDebugElement.nativeElement.value = '01/02/201';
+        dateInputDebugElement.nativeElement.dispatchEvent(new Event('change'));
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.date).toBe(null);
+        expect(dateInputDebugElement.nativeElement.value).toBe('01/02/201');
+      });
+
+      it('updates the HTML input with value from clrDate input', () => {
+        expect(fixture.componentInstance.date).toBeUndefined();
+        fixture.detectChanges();
+        expect(dateInputDebugElement.nativeElement.value).toBe('');
+
+        fixture.componentInstance.date = new Date(2019, 2, 1);
+        fixture.detectChanges();
+        expect(dateInputDebugElement.nativeElement.value).toBe('03/01/2019');
+
+        fixture.componentInstance.date = null;
+        fixture.detectChanges();
+        expect(dateInputDebugElement.nativeElement.value).toBe('');
+      });
     });
   });
 }