Merge pull request #8394 from IgniteUI/bpenkov/date-picker-focusing

Prevent IE from focusing DatePicker onload

Author: Lipata

angular.json

@@ -69,6 +69,9 @@
                   "with": "src/environments/environment.hmr.ts"
                 }
               ]
+            },
+            "es5": {
+              "tsConfig": "src/tsconfig-es5.app.json"
             }
           }
         },
@@ -85,6 +88,9 @@
               "hmr": true,
               "hmrWarning": false,
               "browserTarget": "igniteui-dev-demos:build:hmr"
+            },
+            "es5": {
+              "browserTarget": "igniteui-dev-demos:build:es5"
             }
           }
         },

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open --configuration hmr",
+    "start-es5": "ng serve --configuration es5 -o",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

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

@@ -426,7 +426,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         private _moduleRef: NgModuleRef<any>,
         private _injector: Injector,
         private _renderer: Renderer2) {
-        }
+    }
 
 
     /**
@@ -827,7 +827,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         return this._inputGroup || this._inputGroupUserTemplate || null;
     }
 
-     /** @hidden @internal */
+    /** @hidden @internal */
     public get inputDirective(): IgxInputDirective {
         return this._inputDirective || this._inputDirectiveUserTemplates.first || null;
     }
@@ -922,7 +922,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
         this._inputDirectiveUserTemplates.changes.subscribe(() => {
             this.attachTemplateBlur();
-         });
+        });
         this.attachTemplateBlur();
     }
 
@@ -938,8 +938,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                     this.rawDateString = (res.target as HTMLInputElement).value;
                     this.onBlur(res, false);
                 });
-                // TODO: Refactor custom template handling.
-                // Revise blur handling when custom template is passed
+            // TODO: Refactor custom template handling.
+            // Revise blur handling when custom template is passed
         }
     }
 
@@ -1178,6 +1178,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
     /** @hidden @internal */
     public onInput(event) {
+        /**
+         * Fix for #8165 until refactoring (#6483).
+         * The IgxDateTimeEditor will be used to handle all inputs, i.e. this handler will be removed.
+         * It extends the IgxMaskDirective which contains logic that handles this issue.
+         */
+        if (isIE() && !this._isInEditMode && !this.inputGroup.isFocused) { return; }
         const targetValue = event.target.value;
         const cursorPosition = this._getCursorPosition();
         const checkInput = DatePickerUtil.checkForCompleteDateInput(this.dateFormatParts, targetValue);

projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts

@@ -154,7 +154,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     public ngOnInit(): void {
         if (!this.nativeElement.placeholder) {
-          this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
+            this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
         }
     }
 
@@ -188,7 +188,15 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     @HostListener('input')
     public onInputChanged(): void {
-        if (isIE() && this._stopPropagation) {
+        /**
+         * '!this._focused' is a fix for #8165
+         * On page load IE triggers input events before focus events and
+         * it does so for every single input on the page.
+         * The mask needs to be prevented from doing anything while this is happening because
+         * the end user will be unable to blur the input.
+         * https://stackoverflow.com/questions/21406138/input-event-triggered-on-internet-explorer-when-placeholder-changed
+         */
+        if (isIE() && (this._stopPropagation || !this._focused)) {
             this._stopPropagation = false;
             return;
         }

src/tsconfig-es5.app.json

@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "target": "es5"
+    }
+}