refactor(mask): ignore self drag events

Author: damyanpetev

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

@@ -125,6 +125,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     private _key: number;
     private _oldText = '';
     private _dataValue = '';
+    private _focused = false;
     private _droppedData: string;
     private _hasDropAction: boolean;
     private _stopPropagation: boolean;
@@ -222,26 +223,32 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     @HostListener('focus')
     public onFocus(): void {
+        this._focused = true;
         this.showMask(this._dataValue);
     }
 
     /** @hidden */
     @HostListener('blur', ['$event.target.value'])
     public onBlur(value: string): void {
+        this._focused = false;
         this.showDisplayValue(value);
         this._onTouchedCallback();
     }
 
     /** @hidden */
     @HostListener('dragenter')
     public onDragEnter(): void {
-        this.showMask(this._dataValue);
+        if (!this._focused) {
+            this.showMask(this._dataValue);
+        }
     }
 
     /** @hidden */
     @HostListener('dragleave')
     public onDragLeave(): void {
-        this.showDisplayValue(this.inputValue);
+        if (!this._focused) {
+            this.showDisplayValue(this.inputValue);
+        }
     }
 
     /** @hidden */
@@ -257,6 +264,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
             if (isIE()) {
                 this._stopPropagation = true;
             }
+            // TODO(D.P.): focusedValuePipe should be deprecated or force-checked to match mask format
             this.inputValue = this.focusedValuePipe.transform(value);
         } else {
             this.inputValue = this.maskParser.applyMask(this.inputValue, this.maskOptions);

src/app/mask/mask.sample.html

@@ -12,17 +12,17 @@ <h4>Personal Data</h4>
           <label igxLabel for="name">Name</label>
         </igx-input-group>
         <igx-input-group>
-          <input igxInput #dateInput name="birthday" type="text" [igxMask]="'00/00/0000'" [(ngModel)]="person.birthday"
+          <input igxInput #dateInput name="birthday" type="text" [igxMask]="'00/00/0000'" [igxTextSelection]="true" [(ngModel)]="person.birthday"
             (blur)="validateDate(dateInput, snackbar)" />
           <label igxLabel for="email">Birthday</label>
         </igx-input-group>
         <igx-input-group>
-          <input igxInput #ssn name="socialSecurityNumber" type="text" [igxMask]="'###-##-####'"
+          <input igxInput #ssn name="socialSecurityNumber" type="text" [igxMask]="'###-##-####'" [igxTextSelection]="true"
             [(ngModel)]="person.socialSecurityNumber" (blur)="validateSSN(ssn, snackbar)" />
           <label igxLabel for="socialSecurityNumber">Social Security Number</label>
         </igx-input-group>
         <igx-input-group>
-          <input igxInput #phone name="phone" type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'"
+          <input igxInput #phone name="phone" type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'" [igxTextSelection]="true"
             [(ngModel)]="person.phone" />
           <label igxLabel for="phone">Phone</label>
         </igx-input-group>