fix(phone): Phone should accept incomplete phone number of selected country (even with strict=true) (#1982)

Author: nsbarsukov

projects/demo-integrations/src/tests/addons/phone/phone-strict.cy.ts

@@ -0,0 +1,67 @@
+import {DemoPath} from '@demo/constants';
+
+describe('Phone [strict]=true', () => {
+    describe('[countryIsoCode]=KZ', () => {
+        beforeEach(() => {
+            cy.visit(`/${DemoPath.PhonePackage}/API?countryIsoCode=KZ&strict=true`);
+            cy.get('#demo-content input')
+                .should('be.visible')
+                .first()
+                .focus()
+                .should('have.value', '+7 ')
+                .as('input');
+        });
+
+        it('Paste +7 777 (+7 is treated as country prefix => no prefix duplication)', () => {
+            cy.get('@input')
+                .paste('+7 777')
+                .should('have.value', '+7 777')
+                .should('have.prop', 'selectionStart', '+7 777'.length)
+                .should('have.prop', 'selectionEnd', '+7 777'.length);
+        });
+
+        it('Paste +7777 (+7 is treated as country prefix => no prefix duplication)', () => {
+            cy.get('@input')
+                .paste('+7777')
+                .should('have.value', '+7 777')
+                .should('have.prop', 'selectionStart', '+7 777'.length)
+                .should('have.prop', 'selectionEnd', '+7 777'.length);
+        });
+
+        it('Paste 7777 (no plus sign => all 4 sevens are treated as of incomplete value (+7 is added automatically))', () => {
+            cy.get('@input')
+                .paste('7777')
+                .should('have.value', '+7 777 7')
+                .should('have.prop', 'selectionStart', '+7 777 7'.length)
+                .should('have.prop', 'selectionEnd', '+7 777 7'.length);
+        });
+    });
+
+    describe('[countryIsoCode]=RU', () => {
+        beforeEach(() => {
+            cy.visit(`/${DemoPath.PhonePackage}/API?countryIsoCode=RU&strict=true`);
+            cy.get('#demo-content input')
+                .should('be.visible')
+                .first()
+                .focus()
+                .should('have.value', '+7 ')
+                .as('input');
+        });
+
+        [
+            '+7 912 345-67-89',
+            '+79123456789',
+            '79123456789', // even without plus sign => no country prefix duplication
+            '89123456789', // 8 should be replaced by +7 automatically
+            '9123456789',
+        ].forEach((value) => {
+            it(`Paste ${value}`, () => {
+                cy.get('@input')
+                    .paste(value)
+                    .should('have.value', '+7 912 345-67-89')
+                    .should('have.prop', 'selectionStart', '+7 912 345-67-89'.length)
+                    .should('have.prop', 'selectionEnd', '+7 912 345-67-89'.length);
+            });
+        });
+    });
+});

projects/phone/src/lib/masks/phone/phone-mask-non-strict.ts

@@ -41,13 +41,13 @@ export function maskitoPhoneNonStrictOptionsGenerator({
                 ? ['+', /\d/]
                 : generatePhoneMask({value, template: currentTemplate, prefix});
         },
-        postprocessors: [phoneLengthPostprocessorGenerator(metadata)],
         preprocessors: [
             validatePhonePreprocessorGenerator({
                 prefix,
                 countryIsoCode: defaultIsoCode,
                 metadata,
             }),
         ],
+        postprocessors: [phoneLengthPostprocessorGenerator(metadata)],
     };
 }

projects/phone/src/lib/masks/phone/phone-mask-strict.ts

@@ -49,13 +49,13 @@ export function maskitoPhoneStrictOptionsGenerator({
                 value.length,
             ]),
         ],
-        postprocessors: [
-            maskitoPrefixPostprocessorGenerator(prefix),
-            phoneLengthPostprocessorGenerator(metadata),
-        ],
         preprocessors: [
             cutInitCountryCodePreprocessor({countryIsoCode, metadata}),
             validatePhonePreprocessorGenerator({prefix, countryIsoCode, metadata}),
         ],
+        postprocessors: [
+            maskitoPrefixPostprocessorGenerator(prefix),
+            phoneLengthPostprocessorGenerator(metadata),
+        ],
     };
 }

projects/phone/src/lib/masks/phone/processors/validate-phone-preprocessor.ts

@@ -40,7 +40,7 @@ export function validatePhonePreprocessorGenerator({
                 metadata,
             );
 
-            if (!validationError) {
+            if (!validationError || validationError === 'TOO_SHORT') {
                 // handle paste-event with different code, for example for 8 / +7
                 const phone = countryIsoCode
                     ? parsePhoneNumber(data, countryIsoCode, metadata)