fix(ref: #1298, #1306, #1307): fix issues (#1338)

* fix(ref: #1298): fix issue * fix(ref: #1306): add more information to custom pattern * fix(ref: no-ref): remove unusable code * fix(ref: no-ref): fix allowNegativeNumbers in demo
JsDaddy · Mar 28, 2024 · 779babe · 779babe
1 parent 8c1bb15
commit 779babe
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,17 @@
+# 17.0.7(2024-03-28)
+
+### Fix
+
+-   Fix ([#1298](https://github.com/JsDaddy/ngx-mask/issues/1298))
+-   Fix ([#1307](https://github.com/JsDaddy/ngx-mask/issues/1307)) 
+-   Fix ([#1306](https://github.com/JsDaddy/ngx-mask/issues/1306)) 
+
 # 17.0.6(2024-03-27)
 
 ### Fix
 
 -   Fix ([#1301](https://github.com/JsDaddy/ngx-mask/issues/1301))
 -   Fix ([#1302](https://github.com/JsDaddy/ngx-mask/issues/1302))
--   Fix ([#1298](https://github.com/JsDaddy/ngx-mask/issues/1298))
 -   Fix ([#1292](https://github.com/JsDaddy/ngx-mask/issues/1292))
 
 # 17.0.5(2024-03-25)

diff --git a/USAGE.md b/USAGE.md
@@ -107,6 +107,7 @@ Masked value: (Hel-loW)
 ### Custom pattern for this
 
 You can define custom pattern and specify symbol to be rendered in input field.
+Patterns may conflict with such letters as h, d, m, s, because we use these characters for dates.
 
 ```typescript
 pattern = {

diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "17.0.6",
+    "version": "17.0.7",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
@@ -345,7 +345,10 @@ export class NgxMaskApplierService {
                 result.indexOf(MaskExpression.COMMA) - inputValue.indexOf(MaskExpression.COMMA);
             const shiftStep: number = result.length - inputValue.length;
 
-            if (shiftStep > 0 && result[position] !== this.thousandSeparator) {
+            if (result[position - 1] === this.thousandSeparator && this.prefix && backspaced) {
+                // eslint-disable-next-line no-param-reassign
+                position = position - 1;
+            } else if (shiftStep > 0 && result[position] !== this.thousandSeparator) {
                 backspaceShift = true;
                 let _shift = 0;
                 do {
@@ -511,14 +514,16 @@ export class NgxMaskApplierService {
                             (!maskStartWithMonth &&
                                 (Number(inputValueSliceCursorPlusTwo) > daysCount ||
                                     Number(inputValueSliceMinusOnePlusOne) > daysCount ||
-                                    this.specialCharacters.includes(inputValueCursorPlusOne))) ||
+                                    (this.specialCharacters.includes(inputValueCursorPlusOne) &&
+                                        !backspaced))) ||
                             (startWithMonthInput
                                 ? Number(inputValueSliceMinusOnePlusOne) > daysCount ||
                                   (!this.specialCharacters.includes(inputValueCursor) &&
                                       this.specialCharacters.includes(inputValueCursorPlusTwo)) ||
                                   this.specialCharacters.includes(inputValueCursor)
                                 : Number(inputValueSliceCursorPlusTwo) > daysCount ||
-                                  this.specialCharacters.includes(inputValueCursorPlusOne))
+                                  (this.specialCharacters.includes(inputValueCursorPlusOne) &&
+                                      !backspaced))
                         ) {
                             // eslint-disable-next-line no-param-reassign
                             position = !this.leadZeroDateTime ? position + 1 : position;
@@ -538,11 +543,13 @@ export class NgxMaskApplierService {
                             cursor === 0 &&
                             (Number(inputSymbol) > 2 ||
                                 Number(inputValueSliceCursorPlusTwo) > monthsCount ||
-                                this.specialCharacters.includes(inputValueCursorPlusOne));
+                                (this.specialCharacters.includes(inputValueCursorPlusOne) &&
+                                    !backspaced));
                         // day<10 && month<12 for input
                         const specialChart = maskExpression.slice(cursor + 2, cursor + 3);
                         const day1monthInput: boolean =
                             inputValueSliceMinusThreeMinusOne.includes(specialChart) &&
+                            maskExpression.includes('d0') &&
                             ((this.specialCharacters.includes(inputValueCursorMinusTwo) &&
                                 Number(inputValueSliceMinusOnePlusOne) > monthsCount &&
                                 !this.specialCharacters.includes(inputValueCursor)) ||
@@ -559,7 +566,8 @@ export class NgxMaskApplierService {
                             ) &&
                             this.specialCharacters.includes(inputValueCursorMinusOne) &&
                             (Number(inputValueSliceCursorPlusTwo) > monthsCount ||
-                                this.specialCharacters.includes(inputValueCursorPlusOne));
+                                (this.specialCharacters.includes(inputValueCursorPlusOne) &&
+                                    !backspaced));
                         // cursor === 5 && without days
                         const day2monthInputDot: boolean =
                             (Number(inputValueSliceCursorPlusTwo) > monthsCount && cursor === 5) ||

diff --git a/projects/ngx-mask-lib/src/test/delete.cy-spec.ts b/projects/ngx-mask-lib/src/test/delete.cy-spec.ts
@@ -288,4 +288,91 @@ describe('Directive: Mask (Delete)', () => {
             .should('have.prop', 'selectionStart', 4)
             .should('have.value', '+32 __ ___ __ __');
     });
+
+    it('should backspace with separator and prefix', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.2',
+                thousandSeparator: ',',
+                prefix: '$ ',
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('1234567890')
+            .should('have.value', '$ 1,234,567,890')
+            .type('{leftArrow}'.repeat(3))
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 10);
+    });
+
+    it('should backspace with separator and prefix', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.2',
+                thousandSeparator: '.',
+                prefix: '$ ',
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('1234567890')
+            .should('have.value', '$ 1.234.567.890')
+            .type('{leftArrow}'.repeat(3))
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 10);
+    });
+
+    it('should backspace with showMaskTyped and leadZeroDateTime', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'M0-d0-0000',
+                leadZeroDateTime: true,
+                showMaskTyped: true,
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('12310000')
+            .should('have.value', '12-31-0000')
+            .type('{backspace}'.repeat(8))
+            .should('have.value', '__-__-____');
+    });
+
+    it('should backspace with showMaskTyped and leadZeroDateTime', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'M0/d0/0000',
+                leadZeroDateTime: true,
+                showMaskTyped: true,
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('12310000')
+            .should('have.value', '12/31/0000')
+            .type('{backspace}'.repeat(8))
+            .should('have.value', '__/__/____');
+    });
+
+    it('should backspace with showMaskTyped and leadZeroDateTime', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'M0:d0:0000',
+                leadZeroDateTime: true,
+                showMaskTyped: true,
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('12310000')
+            .should('have.value', '12:31:0000')
+            .type('{backspace}'.repeat(8))
+            .should('have.value', '__:__:____');
+    });
 });
diff --git a/src/assets/content/common-cases.ts b/src/assets/content/common-cases.ts
@@ -147,17 +147,22 @@ export const ComExamples: TExample<IMaskOptions>[] = [
     {
         _placeholder: 'allowNegativeNumbers mask',
         _allowNegativeNumbers: true,
+        _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
         _mask: '0000',
         control: { form: new UntypedFormControl(''), model: '' },
     },
     {
         _placeholder: 'allowNegativeNumbers separator',
         _allowNegativeNumbers: true,
+        _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
+        _decimalMarker: '.',
         _mask: 'separator',
         control: { form: new UntypedFormControl(''), model: '' },
     },
     {
         _placeholder: 'allowNegativeNumbers percent',
+        _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
+        _decimalMarker: '.',
         _allowNegativeNumbers: true,
         _mask: 'percent.2',
         control: { form: new UntypedFormControl(''), model: '' },