fix(kit): InputPhone should erase value on blur if it's just countr…

…y code (#6214)

projects/demo-playwright/tests/kit/input-phone/input-phone.spec.ts

@@ -1,27 +1,85 @@
 import {TuiDocumentationPagePO, tuiGoto, TuiInputPhonePO} from '@demo-playwright/utils';
-import {expect, test} from '@playwright/test';
+import {expect, Locator, test} from '@playwright/test';
 
-const {describe} = test;
+const {beforeEach, describe} = test;
 
 describe(`InputPhone`, () => {
-    test(`Don't duplicate Code 52 When Inputting Digit '2' After Clearing`, async ({
-        page,
-    }) => {
-        await tuiGoto(
+    describe(`API page`, () => {
+        let example: Locator;
+        let inputPhone: TuiInputPhonePO;
+
+        beforeEach(({page}) => {
+            example = new TuiDocumentationPagePO(page).apiPageExample;
+            inputPhone = new TuiInputPhonePO(example.locator(`tui-input-phone`));
+        });
+
+        test(`Don't duplicate Code 52 When Inputting Digit '2' After Clearing`, async ({
             page,
-            `components/input-phone/API?countryCode=%2B52&tuiTextfieldCleaner=true`,
-        );
+        }) => {
+            await tuiGoto(
+                page,
+                `components/input-phone/API?countryCode=%2B52&tuiTextfieldCleaner=true`,
+            );
+
+            await inputPhone.textfield.fill(`52`);
+            await expect(inputPhone.textfield).toHaveValue(`+52 (52`);
+
+            await inputPhone.cleaner.click();
+            await expect(inputPhone.textfield).toHaveValue(`+52 `);
+
+            await inputPhone.textfield.fill(`52`);
+            await expect(inputPhone.textfield).toHaveValue(`+52 (52`);
+        });
+
+        test(`Remove country prefix on blur if textfield does not contains any other symbols`, async ({
+            page,
+        }) => {
+            await tuiGoto(
+                page,
+                `components/input-phone/API?countryCode=%2B1&tuiTextfieldCleaner=true`,
+            );
+
+            await inputPhone.textfield.focus();
+            await expect(inputPhone.textfield).toHaveValue(`+1 `);
+
+            await inputPhone.textfield.blur();
+            await expect(inputPhone.textfield).toHaveValue(``);
+
+            await inputPhone.textfield.pressSequentially(`2125552368`);
+            await expect(inputPhone.textfield).toHaveValue(`+1 (212) 555-23-68`);
+            await inputPhone.textfield.blur();
+            await expect(inputPhone.textfield).toHaveValue(`+1 (212) 555-23-68`);
+
+            await inputPhone.textfield.focus();
+            await inputPhone.cleaner.click();
+            await expect(inputPhone.textfield).toHaveValue(`+1 `);
+            await inputPhone.textfield.blur();
+            await expect(inputPhone.textfield).toHaveValue(``);
+        });
 
-        const {apiPageExample} = new TuiDocumentationPagePO(page);
-        const input = new TuiInputPhonePO(apiPageExample.locator(`tui-input-phone`));
+        describe(`Angular form control is empty is textfield's value is just country code`, () => {
+            beforeEach(async ({page}) => {
+                await tuiGoto(
+                    page,
+                    `components/input-phone/API?countryCode=%2B1&tuiTextfieldCleaner=true&sandboxExpanded=true`,
+                );
+            });
 
-        await input.textfield.fill(`52`);
-        await expect(input.textfield).toHaveValue(`+52 (52`);
+            test(`Empty textfield => focus => textfield value is country code & form control is empty`, async () => {
+                await inputPhone.textfield.focus();
+                await expect(inputPhone.textfield).toHaveValue(`+1 `);
+                await expect(example).toContainText(`"testValue": ""`);
+            });
 
-        await input.cleaner.click();
-        await expect(input.textfield).toHaveValue(`+52 `);
+            test(`Click on cleaner => => textfield value is country code & form control is empty`, async () => {
+                await inputPhone.textfield.pressSequentially(`2345`);
+                await expect(inputPhone.textfield).toHaveValue(`+1 (234) 5`);
+                await expect(example).toContainText(`"testValue": "+12345"`);
 
-        await input.textfield.fill(`52`);
-        await expect(input.textfield).toHaveValue(`+52 (52`);
+                await inputPhone.cleaner.click();
+                await expect(inputPhone.textfield).toHaveValue(`+1 `);
+                await expect(example).toContainText(`"testValue": ""`);
+            });
+        });
     });
 });

projects/kit/components/input-phone/input-phone.component.ts

@@ -181,6 +181,8 @@ export class TuiInputPhoneComponent
         if (this.nativeValue === this.nonRemovablePrefix || this.isTextValue) {
             this.updateSearch('');
             this.nativeValue = '';
+
+            return;
         }
 
         if (!active && !this.allowText && this.nativeFocusableElement) {
@@ -194,11 +196,12 @@ export class TuiInputPhoneComponent
             : value.replace(TUI_MASK_SYMBOLS_REGEXP, '').slice(0, this.maxPhoneLength);
 
         this.updateSearch(parsed);
-
-        const prepared = parsed === this.countryCode || isText(parsed) ? '' : parsed;
-
-        this.value = prepared === '' && !this.allowText ? this.countryCode : prepared;
+        this.value = parsed === this.countryCode || isText(parsed) ? '' : parsed;
         this.open = true;
+
+        if (!this.value && !this.allowText) {
+            this.nativeValue = this.nonRemovablePrefix;
+        }
     }
 
     handleOption(item: string): void {

projects/kit/components/input-phone/test/input-phone.component.spec.ts

@@ -240,7 +240,7 @@ describe(`InputPhone`, () => {
                 fixture.detectChanges();
 
                 expect(inputPO.value).toBe(`+7 `);
-                expect(testComponent.control.value).toBe(`+7`);
+                expect(testComponent.control.value).toBe(``);
             });
 
             it(`allowText is true`, async () => {