fix(IgxTimePicker): determine initial min-max value #6494

Author: jackofdiamond5

projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

@@ -198,6 +198,28 @@ describe('IgxTimePicker', () => {
         expect(timePicker.onValidationFailed.emit).toHaveBeenCalled();
     }));
 
+    it('Should not throw Validation Failed event with null value passed in', fakeAsync(() => {
+        const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
+        fixture.componentInstance.dateValue = null;
+        fixture.detectChanges();
+
+        const timePicker = fixture.componentInstance.timePicker;
+        const dom = fixture.debugElement;
+        const timePickerTarget = dom.query(By.directive(IgxInputDirective));
+        spyOn(timePicker.onValidationFailed, 'emit');
+
+        UIInteractions.clickElement(timePickerTarget);
+        tick();
+        fixture.detectChanges();
+
+        const cancelButton = dom.query(By.css('.igx-button--flat'));
+        UIInteractions.clickElement(cancelButton);
+        tick();
+        fixture.detectChanges();
+
+        expect(timePicker.onValidationFailed.emit).not.toHaveBeenCalled();
+    }));
+
     it('TimePicker cancel button', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
         fixture.detectChanges();
@@ -1542,34 +1564,34 @@ describe('IgxTimePicker', () => {
         }));
 
         it('When timepicker is closed via outside click, the focus should NOT remain on the input',
-        fakeAsync(() => {
-            fixture.detectChanges();
-            input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
-            let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            fakeAsync(() => {
+                fixture.detectChanges();
+                input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+                let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
 
-            expect(overlayToggle.length).toEqual(0);
+                expect(overlayToggle.length).toEqual(0);
 
-            const iconTime = dom.queryAll(By.css('.igx-icon'))[0];
-            UIInteractions.clickElement(iconTime);
-            tick();
-            fixture.detectChanges();
+                const iconTime = dom.queryAll(By.css('.igx-icon'))[0];
+                UIInteractions.clickElement(iconTime);
+                tick();
+                fixture.detectChanges();
 
-            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-            expect(overlayToggle[0]).not.toBeNull();
-            expect(overlayToggle[0]).not.toBeUndefined();
+                overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+                expect(overlayToggle[0]).not.toBeNull();
+                expect(overlayToggle[0]).not.toBeUndefined();
 
-            const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
-            dummyInput.focus();
-            dummyInput.click();
-            tick();
-            fixture.detectChanges();
+                const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
+                dummyInput.focus();
+                dummyInput.click();
+                tick();
+                fixture.detectChanges();
 
-            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-            input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
-            expect(overlayToggle[0]).toEqual(undefined);
-            expect(input).not.toEqual(document.activeElement);
-            expect(dummyInput).toEqual(document.activeElement);
-        }));
+                overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+                input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+                expect(overlayToggle[0]).toEqual(undefined);
+                expect(input).not.toEqual(document.activeElement);
+                expect(dummyInput).toEqual(document.activeElement);
+            }));
     });
 
     describe('Timepicker with outlet', () => {

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -1112,7 +1112,7 @@ export class IgxTimePickerComponent implements
     }
 
     private _convertMinMaxValue(value: string): Date {
-        const date = this.value ? new Date(this.value) : this._dateFromModel ? new Date(this._dateFromModel) : new Date();
+        const date = this._dateFromModel ? new Date(this._dateFromModel) : this.value ? new Date(this.value) : new Date();
         const sections = value.split(/[\s:]+/);
         let hour, minutes, amPM;
 
@@ -1153,9 +1153,9 @@ export class IgxTimePickerComponent implements
             return false;
         } else if (this.minValue && value < this._convertMinMaxValue(this.minValue)) {
             return false;
-        } else {
-            return true;
         }
+
+        return true;
     }
 
     private _isEntryValid(val: string): boolean {
@@ -1294,6 +1294,10 @@ export class IgxTimePickerComponent implements
         const oldValue = this.value;
         const newVal = this._convertMinMaxValue(this.displayValue);
 
+        if (!this.displayValue && this.displayValue === this._formatTime(this.value, this.format)) {
+            return;
+        }
+
         if (this._isValueValid(newVal)) {
             if (!this.value || oldValue.getTime() !== newVal.getTime()) {
                 this.value = newVal;
@@ -1331,7 +1335,6 @@ export class IgxTimePickerComponent implements
         // use this flag to make sure that min/maxValue are checked (in _convertMinMaxValue() method)
         // against the real value when initializing the component and value is bound via ngModel
         this._dateFromModel = value;
-
         this.value = value;
 
         if (this.mode === InteractionMode.DropDown) {
@@ -1563,7 +1566,7 @@ export class IgxTimePickerComponent implements
      * ```
      */
     public cancelButtonClick(): void {
-        if (this.mode === InteractionMode.DropDown) {
+        if (this.mode === InteractionMode.DropDown && this.value) {
             this.displayValue = this._formatTime(this.value, this.format);
         }
 
@@ -1795,8 +1798,8 @@ export class IgxTimePickerComponent implements
         }
 
         // minor hack for preventing cursor jumping in IE
-        this._displayValue = this.inputFormat.transform(displayVal);
-        this.input.nativeElement.value = this._displayValue;
+        this.displayValue = this.inputFormat.transform(displayVal);
+        this.input.nativeElement.value = this.displayValue;
         this._setCursorPosition(cursor);
 
         requestAnimationFrame(() => {

src/app/time-picker/time-picker.sample.ts

@@ -17,8 +17,8 @@ export class TimePickerSampleComponent implements AfterViewInit {
     mode = InteractionMode.DropDown;
 
     date1 = new Date(2018, 10, 27, 17, 45, 0, 0);
-    date = new Date(2018, 10, 27, 17, 45, 0, 0);
-    val = new Date(0, 0, 0, 19, 35, 0, 0);
+    date = new Date(2018, 10, 27, 21, 55, 0, 0);
+    val = new Date(0, 0, 0, 19, 35, 30, 0);
     today = new Date(Date.now());
 
     isRequired = true;