Merge pull request #8235 from IgniteUI/bpenkov/time-picker-editing

Set mask to TimePicker's editor on clear

Author: Lipata

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

@@ -3,7 +3,7 @@
 </ng-template>
 
 <ng-template #dropdownInputTemplate>
-    <igx-input-group #group (mousedown)="mouseDown($event)">
+    <igx-input-group #group (mousedown)="mouseDown($event)" [suppressInputAutofocus]="true">
         <label igxLabel *ngIf="!labelDirective">Time</label>
         <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
         <igx-prefix (click)="openDialog(group.element.nativeElement)">

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

@@ -1873,7 +1873,6 @@ describe('IgxTimePicker', () => {
             fixture.componentInstance.format = 'hh tt';
             fixture.componentInstance.customDate = new Date(2018, 10, 27, 17, 45, 0, 0);
             fixture.detectChanges();
-
             const clearTime = dom.queryAll(By.css('.igx-icon'))[1];
 
             UIInteractions.simulateClickAndSelectEvent(clearTime);
@@ -1893,6 +1892,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';
 import { IgxLabelDirective } from '../directives/label/label.directive';
 
 
@@ -1951,9 +1951,12 @@ export class IgxTimePickerComponent implements
             this.isNotEmpty = false;
 
             const oldVal = new Date(this.value);
-
-            this.displayValue = '';
-            this.value.setHours(0, 0);
+            this.displayValue = this.parseMask(false);
+            requestAnimationFrame(() => {
+                this._setCursorPosition(0);
+            });
+            // TODO: refactoring - this.value should be null #6585
+            this.value?.setHours(0, 0, 0);
 
             if (oldVal.getTime() !== this.value.getTime()) {
                 const args: IgxTimePickerValueChangedEventArgs = {
@@ -1971,35 +1974,35 @@ export class IgxTimePickerComponent implements
      * @hidden
      */
     public onInput(event): void {
-        const val = event.target.value;
+        const inputMask: string = 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: new Date(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 (!this.value || inputMask.length === 0 || !this.isNotEmpty) {
             this.isNotEmpty = false;
-
-            this.value.setHours(0, 0);
-            this.displayValue = val;
-
-            if (oldVal.getTime() !== this.value.getTime()) {
+            // TODO: refactoring - this.value should be null #6585
+            this.value?.setHours(0, 0, 0);
+            this.displayValue = inputMask;
+            if (oldVal.getTime() !== this.value?.getTime()) {
+                // TODO: Do not emit event when the editor is empty #6482
                 const args: IgxTimePickerValueChangedEventArgs = {
                     oldValue: oldVal,
                     newValue: this.value
@@ -2026,7 +2029,7 @@ export class IgxTimePickerComponent implements
             this.isNotEmpty = value !== '';
             this.displayValue = value;
 
-            if (value && value !== this.parseMask()) {
+            if (value && (value !== this.parseMask() || value !== this.parseMask(false))) {
                 if (this._isEntryValid(value)) {
                     const newVal = this.convertMinMaxValue(value);
                     if (!this.value || this.value.getTime() !== newVal.getTime()) {