LouisMazel / maz-ui

Vue & Nuxt library of standalone components & tools to build interfaces

Home Page:https://maz-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[FEATURE](MazPhoneNumberInput) Add option to control formatting of v-model and input value shown

idesignzone opened this issue · comments

When using "MazPhoneNumberInput", as described in the docs: "Phone number is formatted while typing".
Number is formatted as a national format. Some of these national standards have changed over time but not updated in global database it seems and its confusing for some country users. They try to correct the formatted number again!
Having an option to format the number internationally and not nationally will help this issue.

Hi,

I understand, I can add an option to do this.
I will come back here when it's done

In this example national number seems to be correct. However can't get it to work with vue3.

In this example national number seems to be correct. However can't get it to work with vue3.

Yes, it's a Vue 2 plugin.

@idesignzone

Could you give me more information about your needs? I'm not sure if I understand your request.

Can you tell me what you expect?
Which data (v-model, results[...], etc) should be changed? Wich format?

Give me an example and tell me what's happening currently and what you want to change?

Because in the @update event, you have all the data and formats.

@LouisMazel problem is with the way number is shown in the input.
for example I show country of Kazakhstan:
image
There is an 8 in the beginning that is added by auto formatter and is wrong. There is no such a digit and users from this country consider it a wrong number and try to retype it again.
in the other hand you have another example that don't have this problem.
image

so thanks to result we can get any format we need for submission, but the format as you type feature is converting some countries number to a wrong number and sometimes even removes the last digit.
This is not only for Kazakhstan. There are other countries with same formatting problem.

So the idea is to either:
disable the auto formatting.
show the correct National number inside the field.
or just show the international number inside the field instead of national number like:

image

Hope I could explain it more clearly. Please let me know if you have more question.

Ok perfect, thank you, I got it !

In the example you gave, it's an old library that uses an old version of libphonenumber-js.
I couldn't have this formatting but I will give an option to deactivate the auto-format "as you type" as you propose.

I'll let you know when all this is done (I have other developments to report as well) :)

@idesignzone

I released v3.19.0:

MazPhoneNumberInput has now no-formatting-as-you-type to disable the auto-format ;)