fix(mask): deleting items with the igxMask works as expected #11852 (#12302)

Author: jackofdiamond5

projects/igniteui-angular/src/lib/directives/mask/mask-parsing.service.ts

@@ -20,7 +20,7 @@ export interface Replaced {
     providedIn: 'root'
 })
 export class MaskParsingService {
-    public applyMask(inputVal: string, maskOptions: MaskOptions): string {
+    public applyMask(inputVal: string, maskOptions: MaskOptions, pos: number = 0): string {
         let outputVal = '';
         let value = '';
         const mask: string = maskOptions.format;
@@ -60,7 +60,6 @@ export class MaskParsingService {
             nonLiteralValues.splice(nonLiteralIndices.length);
         }
 
-        let pos = 0;
         for (const nonLiteralValue of nonLiteralValues) {
             const char = nonLiteralValue;
             outputVal = this.replaceCharAt(outputVal, nonLiteralIndices[pos++], char);
@@ -115,7 +114,13 @@ export class MaskParsingService {
             maskedValue = this.replaceCharAt(maskedValue, i, char);
         }
 
-        return { value: maskedValue, end: cursor };
+        if (Math.abs(end - start) >= 1) {
+            // set cursor to be max between last cursor pos and the calculated `end`
+            // since on `delete` the cursor should move forward
+            cursor = Math.max(cursor, end);
+        }
+
+        return { value: maskedValue, end: cursor};
     }
 
     public replaceCharAt(strValue: string, index: number, char: string): string {

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

@@ -27,7 +27,7 @@ describe('igxMask', () => {
                 OneWayBindComponent,
                 PipesMaskComponent,
                 PlaceholderMaskComponent,
-                EmptyMaskTestComponent,
+                MaskTestComponent,
                 ReadonlyMaskTestComponent
             ],
             imports: [
@@ -378,7 +378,7 @@ describe('igxMask', () => {
     }));
 
     it('Should display mask on dragenter and remove it on dragleave', fakeAsync(() => {
-        const fixture = TestBed.createComponent(EmptyMaskTestComponent);
+        const fixture = TestBed.createComponent(MaskTestComponent);
         fixture.detectChanges();
         const input = fixture.componentInstance.input;
 
@@ -390,6 +390,17 @@ describe('igxMask', () => {
 
         input.nativeElement.dispatchEvent(new DragEvent('dragleave'));
         expect(input.nativeElement.value).toEqual('');
+
+        // should preserve state on dragenter        
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        UIInteractions.simulatePaste('76', fixture.debugElement.query(By.css('.igx-input-group__input')), 3, 3);
+        fixture.detectChanges();
+
+        input.nativeElement.dispatchEvent(new Event('blur'));
+        expect(input.nativeElement.value).toEqual('___76_____');
+
+        input.nativeElement.dispatchEvent(new DragEvent('dragenter'));
+        expect(input.nativeElement.value).toEqual('___76_____');
     }));
 
     it('Apply display and input pipes on blur and focus.', fakeAsync(() => {
@@ -485,6 +496,29 @@ describe('igxMask', () => {
         expect(fixture.componentInstance.maskDirective.mask).toEqual('##.##');
         expect(input.nativeElement.placeholder).toEqual('##.##');
     }));
+
+    it('should update input properly on selection with DELETE', () => {
+        const fixture = TestBed.createComponent(MaskComponent);
+        fixture.detectChanges();
+        const inputElement = fixture.debugElement.query(By.css('input'));
+        inputElement.triggerEventHandler('focus');
+        UIInteractions.simulatePaste('1234567890', inputElement, 1, 1);
+        fixture.detectChanges();
+        expect(inputElement.nativeElement.value).toEqual('(123) 4567-890');
+        
+        const inputHTMLElement = inputElement.nativeElement as HTMLInputElement;
+        inputHTMLElement.setSelectionRange(6, 8);
+        fixture.detectChanges();
+        expect(inputElement.nativeElement.selectionStart).toEqual(6);
+        expect(inputElement.nativeElement.selectionEnd).toEqual(8);
+
+        UIInteractions.triggerEventHandlerKeyDown('Delete', inputElement);
+        inputElement.triggerEventHandler('input', { inputType: 'test' });
+        fixture.detectChanges();
+        expect(inputElement.nativeElement.selectionStart).toEqual(8);
+        expect(inputElement.nativeElement.selectionEnd).toEqual(8);
+        expect(inputHTMLElement.value).toEqual('(123) __67-890'); 
+    });
 });
 
 describe('igxMaskDirective ControlValueAccessor Unit', () => {
@@ -728,7 +762,7 @@ class PipesMaskComponent {
         </igx-input-group>
     `
 })
-class EmptyMaskTestComponent {
+class MaskTestComponent {
     @ViewChild('input', { static: true })
     public input: ElementRef;
 }

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

@@ -220,17 +220,19 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
                         numberOfMaskLiterals++;
                     }
                 }
-                this.inputValue = isInputComplete?
+                this.inputValue = isInputComplete ?
                 this.inputValue.substring(0, this.selectionEnd - numberOfMaskLiterals) + this.inputValue.substring(this.selectionEnd)
-                : this._compositionValue.substring(0, this._compositionStartIndex);
-
-                this._start = this.selectionStart;
-                this._end = this.selectionEnd;
-                this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
-                this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
-                this.nativeElement.selectionEnd = this._end;
-                this._start = this.selectionStart;
-                this._end = this.selectionEnd;
+                : this._compositionValue?.substring(0, this._compositionStartIndex) || this.inputValue;
+
+                if (this._compositionValue) {
+                    this._start = this.selectionStart;
+                    this._end = this.selectionEnd;
+                    this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
+                    this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
+                    this.nativeElement.selectionEnd = this._end;
+                    this._start = this.selectionStart;
+                    this._end = this.selectionEnd;
+                }
         }
 
         if (this._hasDropAction) {
@@ -281,7 +283,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     @HostListener('dragenter')
     public onDragEnter(): void {
-        if (!this._focused) {
+        if (!this._focused && !this._dataValue) {
             this.showMask(this._dataValue);
         }
     }