International numbers not displaying correctly for some countries if enabledCountryCode is set to true

[TheGreenAirplane]

For some combination of countries and number types (usually mobile in my experience) if you need the number in international format, you need to drop some leading digits from the number (usually a leading 0)

For example, a UK mobile phone number looks like this:

07911 123456

but in the international format, it looks like this:

+44 7911 123456

(the leading zero is gone).

If I have the country code enabled (which I would like to do) the input field looks like this:

+44▼ |

which suggests to the user they should put in the number without the leading zero (fill in the number in international format). This works, but there is one problem:

if the user fills in "7911123456", the text changes to 07911 123456. The number is formatted, but the leading zero is put back in.

The component still returns a correct international number ( +44 7911 123465) but to the user it looks like the number is "+44 07911 123465" which is incorrect.

I can get around this by binding to the "significant" field, but that one doesn't get formatted. The normal "number" field gets formatted once it becomes valid, (for example for US numbers if you type "2025550120", it becomes "(202) 555-0120") This is a very useful visual cue that tells the user their number is correct, and I would like to keep it if possible.

[ondrejrohon]

Same thing happens with Slovak phone numbers. Choose Slovak, then type in number 905111111 and then it gets autoformatted to 0905 111 111. I'm afraid this would cause a lot of confusion to users.

[5hanth]

happens for 🇮🇳 too.

[5hanth]

did anyone manage to find a workaround here?

[cansuari]

Set the autoFormat attribute as false in component. Here is:

<vue-tel-input
      :autoFormat="false"
      ... other options ...
>