fix(mask): move the cursor to the next character if the same characte…

…r is typed - master (#13267)

* fix(mask): move the cursor to the next character if the same character is typed

* fix(mask): removed unused variable

* fix(mask): adding a variable to check if the same character is typed

* fix(mask): simplifying the deletion and replacement of characters

* fix(mask): adding the necessary spaces

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

@@ -131,11 +131,10 @@ export class MaskParsingService {
         const chars = Array.from(value);
         let cursor = start;
         end = Math.min(end, maskedValue.length);
-        const initialMaskedValue = maskedValue;
 
         for (let i = start; i < end || (chars.length && i < maskedValue.length); i++) {
             if (literalsPositions.indexOf(i) !== -1) {
-                if (chars[0] === maskedValue[i]) {
+                if (chars[0] === maskedValue[i] || value.length < 1) {
                     cursor = i + 1;
                     chars.shift();
                 }
@@ -152,24 +151,11 @@ export class MaskParsingService {
                 cursor = i + 1;
                 char = chars.shift();
             }
-            maskedValue = replaceCharAt(maskedValue, i, char);
-        }
-
-        if (value.length <= 1) {
-            let isDelete = false;
-            cursor = start;
-            for (let i = 0; i < literalsPositions.length; i++) {
-                if (value === '') {
-                    // on `delete` the cursor should move forward
-                    cursor = Math.max(cursor, end);
-                    isDelete = true;
-                } else if (cursor === literalsPositions[i]) {
-                    cursor = literalsPositions[i] + 1;
-                }
-            }
-            if (!isDelete && initialMaskedValue !== maskedValue) {
+            if (value.length < 1) {
+                // on `delete` the cursor should move forward
                 cursor++;
             }
+            maskedValue = replaceCharAt(maskedValue, i, char);
         }
 
         return { value: maskedValue, end: cursor };

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

@@ -211,6 +211,46 @@ describe('igxMask', () => {
         expect(input.nativeElement.value).toEqual('あんｓ');
     }));
 
+    it('Should move the cursor to the next character if the same character is typed', fakeAsync(() => {
+        const fixture = TestBed.createComponent(MaskComponent);
+        fixture.componentInstance.mask = '00/00/0000';
+        fixture.detectChanges();
+        tick();
+
+        const input = fixture.componentInstance.input;
+
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        tick();
+
+        input.nativeElement.value = '22222222';
+        fixture.detectChanges();
+        input.nativeElement.dispatchEvent(new Event('input'));
+        tick();
+
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        tick();
+        fixture.detectChanges();
+
+        expect(input.nativeElement.value).toEqual('22/22/2222');
+
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        tick();
+
+        const target = fixture.debugElement.query(By.css('input'));
+        target.triggerEventHandler('focus', {});
+        fixture.detectChanges();
+
+        UIInteractions.simulatePaste('2', target, 0, 1);
+        fixture.detectChanges();
+        tick();
+
+        target.triggerEventHandler('blur', { target: input.nativeElement });
+        tick();
+        fixture.detectChanges();
+
+        expect(input.nativeElement.selectionEnd).toEqual(1);
+    }));
+
     it('Should handle the input of invalid values', fakeAsync(() => {
         const fixture = TestBed.createComponent(MaskComponent);
         fixture.detectChanges();