Mismatch between mask length and max length on input

[mkhbragg]

I am performing a basic check to determine the validity of a phone number in my app: making sure that the number of digits entered by the user matches the expected length given by format on the country object in the isValid callback.

For example, the screenshot below shows that the expected length for Algerian numbers is 17:

In the demo (and in my app) the maximum number of digits I can enter is 15:

Ignoring for now that this is not in fact the correct mask for Algeria, the mismatch between the expected mask length and the enforced pattern on the input field is causing the length comparison to fail for countries whose format length is greater than 15 digits.

Thank you!

[SaraHasan224]

Did you find solution for this issue?

[mmustafau]

is there any solution?

[Kerhael]

Hi,

The pb is present for a lot of countries.
I did not try them all but I found at last antigua-and-barbuda, bahamas, armenia, croatia, erythrea, fidji, egypt, georgia, guadalupe... and many others!

[Kerhael]

OK found the solution: just use enableLongNumbers option

[mkhbragg]

enableLongNumbers allows you to enter an arbitrarily long number. This doesn't help with enforcing any kind of length check per country.

[zanona]

It looks like that enableLongNumbers also accepts a number with the number of digits allowed. https://github.com/bl00mber/react-phone-input-2/blob/8228cfec6ca751bf1034a2e61af005b6533a9600/src/index.js#L536-L542

However, it will be counted only in case the number of digits is greater than the default (15). With that, we could store the format into a variable and apply the enabledLongNumbers accordingly as:

const [format, setFormat] = useState("");
const formatDigits = format.replace(/[ +]/g, "").length;
return (
        <PhoneInput
            enableLongNumbers={formatDigits > 15 ? formatDigits : false}
            onMount={(_, d) => setFormat(d.format)}
            onChange={(_, d) => setFormat(d.format)}
        />
);

This way, enableLongNumbers is only activated past the 15 default digits. Of course, this is a hack and would need to be addressed in the source, but it seems to work around the current issue.

[shoaib9121]

Great solution (Y). Below worked for me.

enableLongNumbers={formatDigits > 15 ? formatDigits : false}