fix clearing input by focus

Author: artempohalyuk

projects/ngx-mask-lib/src/lib/mask.directive.ts

@@ -225,6 +225,7 @@ export class MaskDirective implements ControlValueAccessor, OnChanges {
       caretShift = shift;
       backspaceShift = _backspaceShift;
     });
+
     // only set the selection if the element is active
     if (this.document.activeElement !== el) {
       return;
@@ -259,8 +260,17 @@ export class MaskDirective implements ControlValueAccessor, OnChanges {
     const el: HTMLInputElement = e.target as HTMLInputElement;
     const posStart = 0;
     const posEnd = 0;
+
     if (this._maskService.showOnFocus) {
       this._maskService.showMaskTyped = true;
+
+      // Когда задано дефолтное значение
+      if ( !this._maskService.valueWithMask && el.value ) {
+        const currentValue = this._maskService.actualValue;
+        const prefNmask = this._maskService.prefix + this._maskService.maskIsShown;
+        this._maskService.valueWithMask = currentValue + prefNmask.slice( currentValue.length );
+      }
+      // this._maskService.applyValueChanges();
     }
     if (
       el !== null &&

projects/ngx-mask-lib/src/lib/mask.service.ts

@@ -168,6 +168,7 @@ export class MaskService extends MaskApplierService {
   }
 
   public showMaskInInput(inputVal?: string): string {
+    debugger
     if ((this.showMaskTyped || this.showOnFocus) && !!this.shownMaskExpression) {
       if (this.maskExpression.length !== this.shownMaskExpression.length) {
         throw new Error('Mask expression must match mask placeholder length');

src/app/app.component.html

@@ -33,6 +33,45 @@ <h1 class="title">
   </div>
 </div>
 
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <div class="mat-card-wr">
+        <mat-card>
+          <mat-card-header>
+            <mat-card-title>Phone number</mat-card-title>
+            <mat-card-subtitle>
+              You can add 'placeHolderCharacter' property to changed the placeholder character used when displaying the
+              mask.
+            </mat-card-subtitle>
+          </mat-card-header>
+          <mat-card-content>
+            <div class="flex-row">
+              <div class="flex-cell-padding">
+                <mat-form-field>
+                  <input
+                    matInput
+                    placeholder="Phone number"
+                    mask="(000) 000-0000"
+                    prefix="+5 "
+                    [(ngModel)]="test"
+                    [showOnFocus]="true"
+                  />
+                  <mat-hint><b>Mask: </b>+5 (000) 000 0000</mat-hint>
+                </mat-form-field>
+              </div>
+              <div class="flex-cell">
+                <p><b>FormControl:</b> {{ form1.value ? form1.value : 'Empty' }}</p>
+                <p><b>NgModel:</b> {{ showMaskModel ? showMaskModel : 'Empty' }}</p>
+              </div>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div class="col-12">

src/app/app.component.ts

@@ -73,6 +73,7 @@ export class AppComponent {
   public commaSeparatorForm!: FormControl;
   public commaPrecisionSeparatorForm!: FormControl;
   public commaZeroPrecisionSeparatorForm!: FormControl;
+  public test = '5435 5 345';
 
   public constructor() {
     this.form = new FormControl('');

src/app/app.module.ts

@@ -16,9 +16,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import 'hammerjs';
-import { NgxMaskModule } from 'ngx-mask';
+
 
 import { AppComponent } from './app.component';
+import { NgxMaskModule } from 'ngx-mask';
 
 @NgModule({
   declarations: [AppComponent, TestMaskComponent],