MazPhoneNumberInput & default country

[ajmas]

When I use MazPhoneNumberInput and the field is empty, the country code is showing '+44' by default. It isn't clear from the documentation how I change the default country code to be something else? I

did try putting '+1' in the v-model, but that just ends up putting '+1' in the typeable area without changing the code

note, using 3.29.9 and component maz-ui/components/MazPhoneNumberInput. Project is Quasar based.

[ajmas]

Ended up looking at the source code. Setting the property defaultCountryCode to the appropriate 'alpha-2' country code will do the job.

  <MazPhoneNumberInput
    v-model="inputVal"
    :defaultCountryCode="CA"
    :placeholder="label"
    :preferred-countries="['CA', 'US']"
    showCodeOnList
  />

Though I now see a new issue whereby if component is passed a phone number with another country prefix, then it won't update. For example, '+33493244480'.

[LouisMazel]

Hi @ajmas,

I'm sorry that the documents generated with JSDocs in the component was broken, it's fixed now. You can check out all props, events and slots : https://louismazel.github.io/maz-ui-3/components/maz-phone-number-input#props-event-slots

About your issue, the props default-country-code is deprecated, instead use country-code with v-model directive to allow the component modify the "default" country-code:

<template>
  <MazPhoneNumberInput
      v-model="inputVal"
      v-model:country-code="inputCountryCode"
      placeholder="label"
      :preferred-countries="['CA', 'US']"
      show-code-on-list
  />
</template>

<script lang="ts" setup>
  const inputCountryCode = ref('CA')
  const inputVal = ref('+33493244480')
</script>

[LouisMazel]

But, keep in mind, by default the country code is deduced from the browser language. And if you want to prefer to use the user's IP geolocation (provided by https://ipwho.is), you can use the fetch-country props.

So, in the majority of cases, it is preferable not to set a country code by default

[ajmas]

Thanks. The documentation is much more readable now.

There is certainly a mismatch between my geography and my browser language settings, though done to get preferred date and time formatting. I had kinda forgotten about that, but suspected some locale assumptions were happening.

I’ll look into the IP based approach and also check whether it works with IPv6 based addresses.

[LouisMazel]

Nice! Let me know how well it works with IPV6 and if you run into any issues!