diff --git a/projects/experimental/components/input-phone-international/input-phone-international.component.ts b/projects/experimental/components/input-phone-international/input-phone-international.component.ts index 5cda76322dce..961eb2e7d53f 100644 --- a/projects/experimental/components/input-phone-international/input-phone-international.component.ts +++ b/projects/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 { 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 { } } - 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/projects/experimental/components/input-phone-international/test/input-phone-international.component.spec.ts b/projects/experimental/components/input-phone-international/test/input-phone-international.component.spec.ts index f3d78a3b76c2..fa34d2581788 100644 --- a/projects/experimental/components/input-phone-international/test/input-phone-international.component.spec.ts +++ b/projects/experimental/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')); } });