fix(IgxTimePicker): set displayValue to mask if no value is present #6494

Author: jackofdiamond5

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

@@ -186,8 +186,8 @@ describe('IgxTimePicker', () => {
     it('Should not throw Validation Failed event with null value passed in', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
         fixture.componentInstance.dateValue = null;
+        fixture.componentInstance.mode = 'dropdown';
         fixture.detectChanges();
-
         const timePicker = fixture.componentInstance.timePicker;
         const dom = fixture.debugElement;
         const timePickerTarget = dom.query(By.directive(IgxInputDirective));
@@ -203,12 +203,12 @@ describe('IgxTimePicker', () => {
         fixture.detectChanges();
 
         expect(timePicker.onValidationFailed.emit).not.toHaveBeenCalled();
+        expect(timePicker.displayValue).toEqual('--:--:-- --');
     }));
 
     it('TimePicker cancel button', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
         fixture.detectChanges();
-
         const timePicker = fixture.componentInstance.timePicker;
         const dom = fixture.debugElement;
         const initialTime = dom.query(By.directive(IgxInputDirective)).nativeElement.value;
@@ -2046,12 +2046,13 @@ export class IgxTimePickerWithPassedTimeComponent {
 
 @Component({
     template: `
-        <igx-time-picker [value]="dateValue" [format]="customFormat"></igx-time-picker>
+        <igx-time-picker [mode]="mode" [value]="dateValue" [format]="customFormat"></igx-time-picker>
     `
 })
 export class IgxTimePickerWithPmTimeComponent {
     public dateValue: Date = new Date(2017, 7, 7, 12, 27, 23);
     public customFormat = 'h:mm:ss tt';
+    public mode = 'dialog';
     @ViewChild(IgxTimePickerComponent, { static: true }) public timePicker: IgxTimePickerComponent;
 }
 

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

@@ -1477,7 +1477,7 @@ 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)) {
+        if (this.displayValue === this.parseMask(false)) {
             return;
         }
 
@@ -1795,8 +1795,8 @@ export class IgxTimePickerComponent implements
      * ```
      */
     public cancelButtonClick(): void {
-        if (this.mode === InteractionMode.DropDown && this.value) {
-            this.displayValue = this._formatTime(this.value, this.format);
+        if (this.mode === InteractionMode.DropDown) {
+            this.displayValue = this.value ? this._formatTime(this.value, this.format) : this.parseMask(false);
         }
 
         this.close();

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

@@ -7,7 +7,7 @@
             <h4 class="sample-title">Time Picker with Dropdown</h4>
             <div class="sample-description">{{showDate(date)}}</div>
             <div class="preview" style="width: 280px">
-                <igx-time-picker #tp (onValueChanged)="valueChanged($event)"
+                <igx-time-picker #tp (onValueChanged)="valueChanged($event)" [minValue]="'9:15 AM'" [maxValue]="'10:15 PM'"
                     (onValidationFailed)="validationFailed($event)" [mode]="mode" [isSpinLoop]="isSpinLoop"
                     [(ngModel)]="date" [itemsDelta]="itemsDelta" [format]="format">
                 </igx-time-picker>