fix: now backspace no leaves special characters [ref:#692] (#832)

* fix: now backspace no leaves special characters [ref:#692] * fix: add tests [ref:#692] Co-authored-by: Igor Nepipenko <[email protected]>
JsDaddy · Nov 25, 2020 · eabc2e1 · eabc2e1
1 parent 2fa4a06
commit eabc2e1
Show file tree

Hide file tree

Showing 8 changed files with 392 additions and 625 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+<a name="11.1.3"></a>
+
+# 11.1.3 (2020-11-25)
+
+### Bug Fixes
+
+Now backspace no leaves special characters ([#692](https://github.com/JsDaddy/ngx-mask/issues/692)) ([831](https://github.com/JsDaddy/ngx-mask/pull/831))
+
 <a name="11.1.1"></a>
 
 # 11.1.2 (2020-11-24)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mask",
-  "version": "11.1.2",
+  "version": "11.1.3",
   "description": "awesome ngx mask",
   "license": "MIT",
   "angular-cli": {},
@@ -56,33 +56,33 @@
     "url": "https://github.com/JsDaddy/ngx-mask.git"
   },
   "dependencies": {
-    "@angular/animations": "11.0.0",
-    "@angular/cdk": "11.0.0",
-    "@angular/common": "11.0.0",
-    "@angular/compiler": "11.0.0",
-    "@angular/core": "11.0.0",
-    "@angular/forms": "11.0.0",
-    "@angular/platform-browser": "11.0.0",
-    "@angular/platform-browser-dynamic": "11.0.0",
-    "@angular/router": "11.0.0",
+    "@angular/animations": "11.0.2",
+    "@angular/cdk": "11.0.1",
+    "@angular/common": "11.0.2",
+    "@angular/compiler": "11.0.2",
+    "@angular/core": "11.0.2",
+    "@angular/forms": "11.0.2",
+    "@angular/platform-browser": "11.0.2",
+    "@angular/platform-browser-dynamic": "11.0.2",
+    "@angular/router": "11.0.2",
     "bootstrap": "4.5.3",
     "intl": "1.2.5",
-    "npm-check-updates": "10.0.0",
+    "npm-check-updates": "10.2.2",
     "rxjs": "6.6.3",
     "tslib": "^2.0.3",
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.0",
-    "@angular/cli": "11.0.0",
-    "@angular/compiler-cli": "11.0.0",
-    "@angular/language-service": "^11.0.0",
-    "@angular/material": "11.0.0",
+    "@angular-devkit/build-angular": "~0.1100.2",
+    "@angular/cli": "11.0.2",
+    "@angular/compiler-cli": "11.0.2",
+    "@angular/language-service": "^11.0.2",
+    "@angular/material": "11.0.1",
     "@commitlint/cli": "~11.0.0",
     "@commitlint/config-conventional": "~11.0.0",
     "@types/highlight.js": "9.12.4",
-    "@types/jasmine": "3.6.1",
-    "@types/node": "^14.14.7",
+    "@types/jasmine": "3.6.2",
+    "@types/node": "^14.14.10",
     "angular-cli-ghpages": "0.6.2",
     "angular-http-server": "~1.9.0",
     "codelyzer": "^6.0.1",
@@ -98,12 +98,12 @@
     "karma-jasmine": "4.0.1",
     "karma-jasmine-html-reporter": "1.5.4",
     "karma-mocha-reporter": "^2.2.5",
-    "markdownlint-cli": "~0.24.0",
-    "ng-packagr": "^11.0.1",
+    "markdownlint-cli": "~0.25.0",
+    "ng-packagr": "^11.0.3",
     "node-sass": "^5.0.0",
     "pre-commit": "1.2.2",
-    "prettier": "2.1.2",
-    "puppeteer": "^5.4.1",
+    "prettier": "2.2.0",
+    "puppeteer": "^5.5.0",
     "ts-node": "9.0.0",
     "tslint": "6.1.3",
     "typescript": "4.0.5"

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

diff --git a/projects/ngx-mask-lib/src/lib/mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/mask-applier.service.ts
@@ -59,6 +59,7 @@ export class MaskApplierService {
     maskExpression: string,
     position: number = 0,
     justPasted: boolean = false,
+    backspaced: boolean = false,
     cb: Function = () => {}
   ): string {
     if (inputValue === undefined || inputValue === null || maskExpression === undefined) {
@@ -380,7 +381,11 @@ export class MaskApplierService {
     if (shift < 0) {
       this._shift.clear();
     }
-    let res = `${this.prefix}${result}${this.suffix}`;
+    let onlySpecial = false;
+    if (backspaced) {
+      onlySpecial = inputArray.every((char) => this.maskSpecialCharacters.includes(char));
+    }
+    let res = `${this.prefix}${onlySpecial ? '' : result}${this.suffix}`;
     if (result.length === 0) {
       res = `${this.prefix}${result}`;
     }

diff --git a/projects/ngx-mask-lib/src/lib/mask.directive.ts b/projects/ngx-mask-lib/src/lib/mask.directive.ts
@@ -259,11 +259,16 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
         : (el.selectionStart as number);
     let caretShift = 0;
     let backspaceShift = false;
-    this._maskService.applyValueChanges(position, this._justPasted, (shift: number, _backspaceShift: boolean) => {
-      this._justPasted = false;
-      caretShift = shift;
-      backspaceShift = _backspaceShift;
-    });
+    this._maskService.applyValueChanges(
+      position,
+      this._justPasted,
+      this._code === 'Backspace',
+      (shift: number, _backspaceShift: boolean) => {
+        this._justPasted = false;
+        caretShift = shift;
+        backspaceShift = _backspaceShift;
+      }
+    );
     // only set the selection if the element is active
     if (this.document.activeElement !== el) {
       return;
@@ -483,14 +488,6 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
     this._maskService.formElementProperty = ['disabled', isDisabled];
   }
 
-  @HostListener('ngModelChange', ['$event'])
-  // tslint:disable-next-line: no-any
-  public onModelChange(e: any): void {
-    if (!e) {
-      this._maskService.actualValue = '';
-    }
-  }
-
   private _repeatPatternSymbols(maskExp: string): string {
     return (
       (maskExp.match(/{[0-9]+}/) &&
@@ -502,8 +499,8 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
           }
           this._end = index;
           const repeatNumber: number = Number(maskExp.slice(this._start + 1, this._end));
-          const repaceWith: string = new Array(repeatNumber + 1).join(maskExp[this._start - 1]);
-          return accum + repaceWith;
+          const replaceWith: string = new Array(repeatNumber + 1).join(maskExp[this._start - 1]);
+          return accum + replaceWith;
         }, '')) ||
       maskExp
     );

diff --git a/projects/ngx-mask-lib/src/lib/mask.service.ts b/projects/ngx-mask-lib/src/lib/mask.service.ts
@@ -36,6 +36,7 @@ export class MaskService extends MaskApplierService {
     maskExpression: string,
     position: number = 0,
     justPasted = false,
+    backspaced = false,
     cb: Function = () => {}
   ): string {
     if (!maskExpression) {
@@ -72,7 +73,7 @@ export class MaskService extends MaskApplierService {
       newInputValue = this.actualValue.length ? this.shiftTypedSymbols(actualResult.join('')) : inputValue;
     }
     newInputValue = Boolean(newInputValue) && newInputValue.length ? newInputValue : inputValue;
-    const result: string = super.applyMask(newInputValue, maskExpression, position, justPasted, cb);
+    const result: string = super.applyMask(newInputValue, maskExpression, position, justPasted, backspaced, cb);
     this.actualValue = this.getActualValue(result);
 
     // handle some separator implications:
@@ -118,9 +119,14 @@ export class MaskService extends MaskApplierService {
     return countSkipedSymbol;
   }
 
-  public applyValueChanges(position: number = 0, justPasted: boolean, cb: Function = () => {}): void {
+  public applyValueChanges(
+    position: number = 0,
+    justPasted: boolean,
+    backspaced: boolean,
+    cb: Function = () => {}
+  ): void {
     const formElement = this._elementRef.nativeElement;
-    formElement.value = this.applyMask(formElement.value, this.maskExpression, position, justPasted, cb);
+    formElement.value = this.applyMask(formElement.value, this.maskExpression, position, justPasted, backspaced, cb);
     if (formElement === this.document.activeElement) {
       return;
     }

diff --git a/projects/ngx-mask-lib/src/test/basic-logic.spec.ts b/projects/ngx-mask-lib/src/test/basic-logic.spec.ts
@@ -441,4 +441,15 @@ describe('Directive: Mask', () => {
       done();
     });
   });
+
+  it('should return empty string if input consist only special symbols', () => {
+    component.mask = '(000) 000-00-00';
+    fixture.detectChanges();
+    equal('0', '(0', fixture);
+    equal('(', '(', fixture);
+    const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
+    const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
+    debugElement.triggerEventHandler('keydown', { code: 'Backspace', keyCode: 8, target: inputTarget });
+    equal('(', '', fixture);
+  });
 });