From 3ab6538d2a71db87cdc1941f92e4dd4a08b4704c Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 5 Jul 2024 19:15:07 +0300
Subject: [PATCH 1/2] work for #8508 [Angular] Pattern Input Mask - An invalid
 value is not always cleared

---
 .../src/questions/text.component.html         |  2 +-
 .../src/questions/text.component.ts           | 20 +++++++++-
 testCafe/questions/input_mask.ts              | 37 +++++++++++++++++++
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/packages/survey-angular-ui/src/questions/text.component.html b/packages/survey-angular-ui/src/questions/text.component.html
index 2a4892e9e9..63bc6f91f9 100644
--- a/packages/survey-angular-ui/src/questions/text.component.html
+++ b/packages/survey-angular-ui/src/questions/text.component.html
@@ -7,7 +7,7 @@
   </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)" 
     [attr.size] = "model.renderedInputSize" [attr.maxlength]= "model.getMaxLength()" [attr.min]="model.renderedMin" [readonly]="model.isReadOnlyAttr"
diff --git a/packages/survey-angular-ui/src/questions/text.component.ts b/packages/survey-angular-ui/src/questions/text.component.ts
index d2e6af0cc8..e659f47da0 100644
--- 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);
\ No newline at end of file
diff --git a/testCafe/questions/input_mask.ts b/testCafe/questions/input_mask.ts
index 62e1b03754..5b348a1422 100644
--- 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);
+  });
 });
\ No newline at end of file

From 88377370c5673eb29d8b58d592771438904f6ff0 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 8 Jul 2024 10:00:08 +0300
Subject: [PATCH 2/2] work for #8508 update template

---
 packages/survey-angular-ui/src/questions/text.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-angular-ui/src/questions/text.component.html b/packages/survey-angular-ui/src/questions/text.component.html
index 63bc6f91f9..68c8cafd51 100644
--- a/packages/survey-angular-ui/src/questions/text.component.html
+++ b/packages/survey-angular-ui/src/questions/text.component.html
@@ -9,7 +9,7 @@
   <ng-template #input>
     <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/>