work for #8526 The value is reset when using the input type "phone" a…

…nd the pattern mask (#8533)

Co-authored-by: OlgaLarina <[email protected]>

src/mask/input_element_adapter.ts

@@ -40,6 +40,11 @@ export class InputElementAdapter {
     }
   };
 
+  changeHandler = (event: any) => {
+    const result = this.inputMaskInstance.processInput({ prevValue: "", insertedChars: event.target.value, selectionStart: 0, selectionEnd: 0 });
+    this.inputElement.value = result.value;
+  }
+
   public createArgs(event: any): ITextInputParams {
     const args: ITextInputParams = {
       insertedChars: event.data,
@@ -67,13 +72,15 @@ export class InputElementAdapter {
       this.inputElement.addEventListener("beforeinput", this.beforeInputHandler);
       this.inputElement.addEventListener("click", this.clickHandler);
       this.inputElement.addEventListener("focus", this.clickHandler);
+      this.inputElement.addEventListener("change", this.changeHandler);
     }
   }
   public removeInputEventListener(): void {
     if (!!this.inputElement) {
       this.inputElement.removeEventListener("beforeinput", this.beforeInputHandler);
       this.inputElement.removeEventListener("click", this.clickHandler);
       this.inputElement.removeEventListener("focus", this.clickHandler);
+      this.inputElement.removeEventListener("change", this.changeHandler);
     }
   }
   public dispose(): void {

tests/mask/input_mask_tests.ts

@@ -147,5 +147,20 @@ QUnit.test("Change property mask => update display value", function (assert) {
   inputMaskNumeric.thousandsSeparator = ",";
   assert.equal(testInput.value, "123,456");
 
+  testInput.remove();
+});
+
+QUnit.test("Input mask + autocomplete", function (assert) {
+  const testInput = document.createElement("input");
+  const inputMaskPattern = new InputMaskPattern();
+  inputMaskPattern.pattern = "999-99-99";
+  let adapter = new InputElementAdapter(inputMaskPattern, testInput, "");
+  assert.equal(testInput.value, "___-__-__");
+
+  testInput.focus();
+  testInput.value = "+123456789";
+  testInput.dispatchEvent(new Event("change"));
+  assert.equal(testInput.value, "123-45-67");
+
   testInput.remove();
 });