refactor(igxMask): show/hide mask on dragenter/dragleave

Author: jackofdiamond5

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

@@ -318,19 +318,25 @@ describe('igxMask', () => {
         expect(input.nativeElement.value).toEqual('(457) 6___-___');
     }));
 
-    it('Should display mask on dragover', fakeAsync(() => {
+    it('Should display mask on dragenter and remove it on dragleave', fakeAsync(() => {
         const fixture = TestBed.createComponent(EmptyMaskTestComponent);
         fixture.detectChanges();
         const input = fixture.componentInstance.input;
 
         expect(input.nativeElement.value).toEqual('');
         expect(input.nativeElement.placeholder).toEqual('CCCCCCCCCC');
 
-        input.nativeElement.dispatchEvent(new DragEvent('dragover'));
+        input.nativeElement.dispatchEvent(new DragEvent('dragenter'));
         fixture.detectChanges();
         tick();
 
         expect(input.nativeElement.value).toEqual('__________');
+
+        input.nativeElement.dispatchEvent(new DragEvent('dragleave'));
+        fixture.detectChanges();
+        tick();
+
+        expect(input.nativeElement.value).toEqual('');
     }));
 
     it('Apply display and input pipes on blur and focus.', fakeAsync(() => {

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

@@ -225,11 +225,17 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     }
 
     /** @hidden */
-    @HostListener('dragover')
-    public onDragOver(): void {
+    @HostListener('dragenter')
+    public onDragEnter(): void {
         this.showMask('');
     }
 
+    /** @hidden */
+    @HostListener('dragleave')
+    public onDragLeave(): void {
+        this.inputValue = '';
+    }
+
     /** @hidden */
     @HostListener('drop', ['$event'])
     public onDrop(event: DragEvent): void {