[Angular] Pattern Input Mask - An invalid value is not always cleared (…

…#8519) * work for #8508 [Angular] Pattern Input Mask - An invalid value is not always cleared * work for #8508 update template --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Jul 8, 2024 · f0c3c27 · f0c3c27
1 parent 3318b5e
commit f0c3c27
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/packages/survey-angular-ui/src/questions/text.component.html b/packages/survey-angular-ui/src/questions/text.component.html
@@ -7,9 +7,9 @@
   </div>
   <div *ngIf="model.isReadOnlyRenderDiv()" #contentElement>{{ value }}</div>
   <ng-template #input>
-    <input [style]="model.inputStyle" [class]="model.getControlClass()" [attr.list]="model.dataListId"
+    <input #inputElement [style]="model.inputStyle" [class]="model.getControlClass()" [attr.list]="model.dataListId"
     (change)="model.onChange($event)" [value]="value" [disabled]="model.isDisabledAttr" [type]="model.inputType" [id]="model.inputId" [attr.placeholder]="model.renderedPlaceholder || ''"
-    (keyup)="model.onKeyUp($event)" (keydown)="model.onKeyDown($event)" (blur)="model.onBlur($event)" (focus)="model.onFocus($event)" (compositionupdate)="model.onCompositionUpdate($event)" 
+    (keyup)="model.onKeyUp($event)" (keydown)="model.onKeyDown($event)" (blur)="blur($event)" (focus)="model.onFocus($event)" (compositionupdate)="model.onCompositionUpdate($event)" 
     [attr.size] = "model.renderedInputSize" [attr.maxlength]= "model.getMaxLength()" [attr.min]="model.renderedMin" [readonly]="model.isReadOnlyAttr"
     [attr.max]="model.renderedMax" [attr.step]="model.renderedStep" [attr.max]="model.renderedMax" [attr.aria-required]="model.a11y_input_ariaRequired"
     [attr.aria-label]="model.a11y_input_ariaLabel" [attr.aria-labelledby]="model.a11y_input_ariaLabelledBy" [attr.aria-describedby]="model.a11y_input_ariaDescribedBy"[attr.aria-invalid]="model.a11y_input_ariaInvalid" [attr.aria-errormessage]="model.a11y_input_ariaErrormessage" [attr.autocomplete]="model.autocomplete" #contentElement/>

diff --git a/packages/survey-angular-ui/src/questions/text.component.ts b/packages/survey-angular-ui/src/questions/text.component.ts
@@ -1,6 +1,6 @@
-import { Component } from "@angular/core";
+import { Component, ElementRef, ViewChild } from "@angular/core";
 import { QuestionAngular } from "../question";
-import { QuestionTextModel } from "survey-core";
+import { Helpers, QuestionTextModel } from "survey-core";
 import { AngularComponentFactory } from "../component-factory";
 
 @Component({
@@ -9,9 +9,25 @@ import { AngularComponentFactory } from "../component-factory";
   styleUrls: ["./text.component.scss"]
 })
 export class TextQuestionComponent extends QuestionAngular<QuestionTextModel> {
+  @ViewChild("inputElement") inputElementRef!: ElementRef<HTMLDivElement>;
+
   get value(): string {
     return this.model.inputValue ?? "";
   }
+
+  blur(event: any): void {
+    this.model.onBlur(event);
+    this.updateInputDomElement();
+  }
+
+  updateInputDomElement(): void {
+    if (!!this.inputElementRef?.nativeElement) {
+      const control: any = this.inputElementRef.nativeElement;
+      if (!Helpers.isTwoValueEquals(this.value, control.value, false, true, false)) {
+        control.value = this.value;
+      }
+    }
+  }
 }
 
 AngularComponentFactory.Instance.registerComponent("text-question", TextQuestionComponent);
diff --git a/testCafe/questions/input_mask.ts b/testCafe/questions/input_mask.ts
@@ -67,4 +67,41 @@ frameworks.forEach((framework) => {
       .expect(getCursor()).eql(6);
   });
 
+  test("An invalid value is not always cleared", async (t) => {
+    await initSurvey(framework, {
+      focusFirstQuestionAutomatic: true,
+      pages: [
+        {
+          name: "page1",
+          elements: [
+            {
+              type: "text",
+              name: "question1",
+              maskType: "pattern",
+              maskSettings: {
+                pattern: "99999",
+              },
+            },
+          ],
+        },
+      ],
+    });
+    const emptyValue = "_____";
+
+    await t
+      .expect(Selector("input").value).eql(emptyValue)
+
+      .pressKey("1 2 3 4")
+      .expect(Selector("input").value).eql("1234_")
+
+      .pressKey("tab")
+      .expect(Selector("input").value).eql(emptyValue)
+
+      .click("input")
+      .pressKey("1 2 3")
+      .expect(Selector("input").value).eql("123__")
+
+      .pressKey("tab")
+      .expect(Selector("input").value).eql(emptyValue);
+  });
 });