diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask-parsing.service.ts b/projects/igniteui-angular/src/lib/directives/mask/mask-parsing.service.ts index 1ab4e87622a..7bfd0169e04 100644 --- a/projects/igniteui-angular/src/lib/directives/mask/mask-parsing.service.ts +++ b/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 }; 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 index cb2dd89519f..8e92a190f6f 100644 --- a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts @@ -211,6 +211,46 @@ describe('igxMask', () => { expect(input.nativeElement.value).toEqual('あんs'); })); + 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();