chore: fix

taiga-family · Dec 26, 2024 · ae73c30 · ae73c30
1 parent ef67736
commit ae73c30
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/.../experimental/components/input-phone-international/input-phone-international.component.ts b/.../experimental/components/input-phone-international/input-phone-international.component.ts
@@ -100,7 +100,7 @@ const NOT_FORM_CONTROL_SYMBOLS = /[^+\d]/g;
         '[disabled]': 'disabled()',
         '[value]': 'masked()',
         '(blur)': 'onTouched()',
-        '(input)': 'onInput()',
+        '(input)': 'onChange(unmasked)',
         '(click)': 'open.set(false)',
         '(beforeinput.capture)': 'onPaste($event)',
     },
@@ -184,12 +184,10 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
         this.dropdown.set(template);
     }
 
-    protected onInput(): void {
+    protected get unmasked(): string {
         const value = this.el.value.replaceAll(NOT_FORM_CONTROL_SYMBOLS, '');
 
-        this.onChange(
-            value === tuiGetCallingCode(this.code(), this.metadata()) ? '' : value,
-        );
+        return value === tuiGetCallingCode(this.code(), this.metadata()) ? '' : value;
     }
 
     protected onPaste(event: Event): void {
@@ -212,12 +210,17 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
         }
     }
 
-    protected onItemClick(isoCode: TuiCountryIsoCode): void {
+    protected onItemClick(code: TuiCountryIsoCode): void {
         this.el.focus();
-        this.el.value = this.el.value || tuiGetCallingCode(this.code(), this.metadata());
+        this.el.value = this.unmasked;
         this.open.set(false);
-        this.code.set(isoCode);
+        this.code.set(code);
         this.search.set('');
+        this.el.value = maskitoTransform(
+            this.el.value || tuiGetCallingCode(code, this.metadata()),
+            this.mask() || MASKITO_DEFAULT_OPTIONS,
+        );
+        this.onChange(this.unmasked);
     }
 
     private computeMask(

diff --git a/...tal/components/input-phone-international/test/input-phone-international.component.spec.ts b/...tal/components/input-phone-international/test/input-phone-international.component.spec.ts
@@ -1,4 +1,3 @@
-import type {DebugElement} from '@angular/core';
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
@@ -189,7 +188,7 @@ describe('InputPhoneInternational', () => {
             initializeTestModule(TUI_RUSSIAN_LANGUAGE);
 
             it('displays country names in Russian inside dropdown', () => {
-                getCountrySelector().nativeElement.click();
+                clickCountrySelector();
                 fixture.detectChanges();
 
                 expect(getDropdownCountryNames()).toEqual([
@@ -207,7 +206,7 @@ describe('InputPhoneInternational', () => {
             initializeTestModule(TUI_ENGLISH_LANGUAGE);
 
             it('displays country names in English inside dropdown', () => {
-                getCountrySelector().nativeElement.click();
+                clickCountrySelector();
                 fixture.detectChanges();
 
                 expect(getDropdownCountryNames()).toEqual([
@@ -245,7 +244,9 @@ describe('InputPhoneInternational', () => {
         );
     }
 
-    function getCountrySelector(): DebugElement {
-        return fixture.debugElement.query(By.css('.t-ipi-select'));
+    function clickCountrySelector(): void {
+        return fixture.debugElement
+            .query(By.css('.t-ipi-select'))
+            .nativeElement.dispatchEvent(new Event('mousedown'));
     }
 });