[Issue with Phone number component][<Maz ui Phone number>]

[hadelnasr]

Describe the bug

Reference to the old hotfix for auto formatting issue here https://github.com/LouisMazel/maz-ui/issues/1139

it produces another issue when setting the :auto-format="false" option, in the edit mode it's not displaying the phone number

To Reproduce

Steps to reproduce the behavior:

add this logic in your vuejs code <MazPhoneNumberInput v-model="localPhoneNumber" :auto-format="false" /> const localPhoneNumber = props.phoneNumber;

where the props.phoneNumber equals: +201000000000 (egypt mobile number)

Expected behavior

Should render this way

Actual behavior

shown this way

[LouisMazel]

This code is not correct

const localPhoneNumber = props.phoneNumber

localPhoneNumber is not reactive and can't be modify.

Use it instead

const localPhoneNumber = ref(props.phoneNumber)

[hadelnasr]

Dear @LouisMazel

i tried adding your code and it's the same bug behavior const localPhoneNumber = ref(props.phoneNumber)

[hadelnasr]

@LouisMazel any recommendations?

[LouisMazel]

Can you provide a reproduction link with stackblitz or any other ?

I can't help you like this. All is fine with others users

[LouisMazel]

Working example: https://stackblitz.com/edit/maz-ui-vue3-phonenumber?file=src/App.vue

[hadelnasr]

Working example: https://stackblitz.com/edit/maz-ui-vue3-phonenumber?file=src/App.vue

will you provide a quick example with a default phone number not empty string?

try the below one const phoneNumber = ref<string>('01224647411') const countryCode = ref<CountryCode>('EG')

the phone number will not preloaded

[LouisMazel]

Hi,

I released a beta version with the fix, can you try it and tell me if it's good?

The beta version is: 3.47.2-beta.14

Install it:

npm install maz-ui@3.47.2-beta.14

Thanks for your feedback :)

[hadelnasr]

@LouisMazel ok will give it a try and get back to you soon thanks

[Ziad-Ashraf-0]

@LouisMazel using the following reproduction link the described bug seems to be fixed https://stackblitz.com/edit/maz-ui-vue3-phonenumber-kmzvzz?file=src%2FApp.vue

However, I came across another bug related to this fix I think

• When autoFormat is set to false:

  • The input locks up after I input a valid phone number.
  • It doesn’t allow editing the number or changing the country code afterward.

• When autoFormat is set to true:

  • If I select a country with a +1 dialing code (like the US or Canada), I can’t switch to another +1 country.
  • The country code selector becomes restricted to the initial +1 region unless I manually delete the number.

[LouisMazel]

@Ziad-Ashraf-0

Thank you a lot for the details.

• It's now fixed

• For the second case (country with the same dialCode), it's because I deduce the country code based on the number. I change this so that it only happens when the phone number changes and not when the country code changes.

A new beta version is available if you want test it : 3.47.2-beta.18

[Ziad-Ashraf-0]

@LouisMazel

Thank you for the quick response—it's resolved now!

However, I noticed some weird behavior with countries with a dialing code of +1. Some work fine, but others do not. For example, try a country like Bermuda, and input the example number 370-1234. When you delete it, the "4" and "3" will get deleted as expected, but when you press backspace at "2," a strange behavior occurs—it duplicates the dialing code. Also, if I try to input the example phone with the dialing code ( input 4413701 ), it duplicates the dialing code after I type the last "1".

I think it might be an issue with the parsePhoneNumberFromString function from libphonenumber-js.

Here is a link to reproduction indicating more examples https://stackblitz.com/edit/maz-ui-vue3-phonenumber-kmzvzz?file=src%2FApp.vue

[hadelnasr]

@LouisMazel thanks to provide us with your quick response as usual regarding the reported issue from @Ziad-Ashraf-0

[LouisMazel]

After much investigation and time spent, to fix all the issues the only solution I found is to only display the formatted number ("as you type") at the time of blur. When the input is focused, the number entered by the user is displayed.

So that you can see what it looks like, it is almost the same UX as the MazInputPrice component.

This allows me only to use the value entered by the user to validate the phone number, not the formatted value, and therefore avoid errors that can happen with libphonenumber-js during formatting or validation and avoid unwanted behaviors.

I release it in the beta v3.47.2-beta.22 And you can test it here : https://stackblitz.com/edit/maz-ui-vue3-phonenumber?file=src/App.vue