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

IgniteUI · Feb 18, 2020 · 44a1913 · 44a1913
1 parent 08b91db
commit 44a1913
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts b/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(() => {

diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts b/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 {