Input Type and Masked Input - Enable Pattern Mask Input for Phone Num…

…ber Input Type (#8447) * resolve #8431 Input Type and Masked Input - Enable Pattern Mask Input for Phone Number Input Type * work for #8431 Input Type and Masked Input - Enable Pattern Mask Input for Phone Number Input Type --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Jun 20, 2024 · 19c15d2 · 19c15d2
1 parent 3289262
commit 19c15d2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/question_text.ts b/src/question_text.ts
@@ -65,7 +65,11 @@ export class QuestionTextModel extends QuestionTextBase {
   @property() inputTextAlignment: "left" | "right" | "auto";
 
   get maskTypeIsEmpty(): boolean {
-    return this.maskType === "none" || this.inputType !== "text";
+    switch (this.inputType) {
+      case "tel":
+      case "text": return this.maskType === "none";
+      default: return true;
+    }
   }
 
   /**
@@ -773,7 +777,7 @@ Serializer.addClass(
       visibleIndex: 0,
       dependsOn: "inputType",
       visibleIf: (obj: any) => {
-        return obj.inputType === "text";
+        return obj.inputType === "text" || obj.inputType === "tel";
       }
     },
     {
@@ -782,7 +786,7 @@ Serializer.addClass(
       visibleIndex: 1,
       dependsOn: "inputType",
       visibleIf: (obj: any) => {
-        return obj.inputType === "text";
+        return obj.inputType === "text" || obj.inputType === "tel";
       },
       onGetValue: function (obj: any) {
         return obj.maskSettings.getData();

diff --git a/tests/mask/mask_settings_tests.ts b/tests/mask/mask_settings_tests.ts
@@ -95,16 +95,20 @@ QUnit.test("Switch input type", function (assert) {
   assert.ok(!q["maskInputAdapter"]);
 
   q.maskType = "pattern";
-  assert.ok(!q.maskTypeIsEmpty);
-  assert.ok(q["maskInputAdapter"]);
+  assert.ok(!q.maskTypeIsEmpty, "maskType = pattern");
+  assert.ok(q["maskInputAdapter"], "maskType = pattern");
 
   q.inputType = "date";
-  assert.ok(q.maskTypeIsEmpty);
-  assert.ok(!q["maskInputAdapter"]);
+  assert.ok(q.maskTypeIsEmpty, "inputType = date");
+  assert.ok(!q["maskInputAdapter"], "inputType = date");
 
   q.inputType = "text";
-  assert.ok(!q.maskTypeIsEmpty);
-  assert.ok(q["maskInputAdapter"]);
+  assert.ok(!q.maskTypeIsEmpty, "inputType = text");
+  assert.ok(q["maskInputAdapter"], "inputType = text");
+
+  q.inputType = "tel";
+  assert.ok(!q.maskTypeIsEmpty, "inputType = tel");
+  assert.ok(q["maskInputAdapter"], "inputType = tel");
 
   testInput.remove();
 });