fix(time-picker): set mask to editor on clear

Author: jackofdiamond5

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

@@ -1852,9 +1852,11 @@ describe('IgxTimePicker', () => {
             UIInteractions.simulateClickAndSelectEvent(clearTime);
             fixture.detectChanges();
             input.nativeElement.dispatchEvent(new Event('focus'));
+            tick();
             fixture.detectChanges();
 
             input.nativeElement.dispatchEvent(new Event('blur'));
+            tick();
             fixture.detectChanges();
 
             expect(input.nativeElement.value).toEqual('');
@@ -1866,6 +1868,21 @@ describe('IgxTimePicker', () => {
             expect(input.nativeElement.value).toBe('-- AM');
         }));
 
+        it('should allow editing of input after clear', fakeAsync(() => {
+            fixture.componentInstance.format = 'hh tt';
+            fixture.componentInstance.customDate = new Date(2018, 10, 27, 17, 45, 0, 0);
+            fixture.detectChanges();
+            spyOn(fixture.componentInstance.timePicker, 'onInput');
+
+            const clearTime = dom.queryAll(By.css('.igx-icon'))[1];
+            UIInteractions.simulateClickAndSelectEvent(clearTime);
+            fixture.detectChanges();
+            const _input = fixture.debugElement.query(By.css('input'));
+            UIInteractions.simulateTyping('12 AM', _input);
+            expect(fixture.componentInstance.timePicker.onInput).not.toThrow();
+            expect(_input.nativeElement.value).toEqual('12 AM');
+        }));
+
         it('Should navigate dropdown lists correctly when format contains only hours.', fakeAsync(() => {
             fixture.componentInstance.format = 'hh tt';
             fixture.componentInstance.customDate = new Date(2018, 10, 27, 17, 45, 0);

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

@@ -50,7 +50,7 @@ import { ITimePickerResourceStrings } from '../core/i18n/time-picker-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 import { KEYS, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { InteractionMode } from '../core/enums';
-import { IgxTextSelectionModule} from '../directives/text-selection/text-selection.directive';
+import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
 
 
 let NEXT_ID = 0;
@@ -1945,7 +1945,11 @@ export class IgxTimePickerComponent implements
 
             const oldVal = new Date(this.value);
 
-            this.displayValue = '';
+            this.displayValue = this.parseMask(false);
+            requestAnimationFrame(() => {
+                this._setCursorPosition(0);
+            });
+            // TODO: refactoring - this.value should be null #8135
             this.value.setHours(0, 0);
 
             if (oldVal.getTime() !== this.value.getTime()) {
@@ -1964,33 +1968,34 @@ export class IgxTimePickerComponent implements
      * @hidden
      */
     public onInput(event): void {
-        const val = event.target.value;
+        const inputMask = event.target.value;
         const oldVal = new Date(this.value);
 
-        this.isNotEmpty = val !== this.parseMask(false);
+        this.isNotEmpty = inputMask !== this.parseMask(false);
 
         // handle cases where all empty positions (promts) are filled and we want to update
         // timepicker own value property if it is a valid Date
-        if (val.indexOf(this.promptChar) === -1) {
-            if (this._isEntryValid(val)) {
-                const newVal = this.convertMinMaxValue(val);
+        if (inputMask.indexOf(this.promptChar) === -1) {
+            if (this._isEntryValid(inputMask)) {
+                const newVal = this.convertMinMaxValue(inputMask);
                 if (oldVal.getTime() !== newVal.getTime()) {
                     this.value = newVal;
                 }
             } else {
                 const args: IgxTimePickerValidationFailedEventArgs = {
                     timePicker: this,
-                    currentValue: val,
+                    currentValue: inputMask,
                     setThroughUI: false
                 };
                 this.onValidationFailed.emit(args);
             }
             // handle cases where the user deletes the display value (when pressing backspace or delete)
-        } else if (!this.value || !val || val === this.parseMask(false)) {
+        } else if (inputMask === this.parseMask(false)) {
             this.isNotEmpty = false;
 
+            // TODO: refactoring - this.value should be null #8135
             this.value.setHours(0, 0);
-            this.displayValue = val;
+            this.displayValue = inputMask;
 
             if (oldVal.getTime() !== this.value.getTime()) {
                 const args: IgxTimePickerValueChangedEventArgs = {