Is it possible to use the MazPhoneNumberInput component as two separate fields?

[amoza3]

Is it possible to use the MazPhoneNumberInput component as two separate fields? For example, one field for country selection (which is mandatory) that can also be used to determine the user's location, and another field for the phone number (which is optional and dependent on the selected country)?

I would like to split the functionality into:

A required field for selecting the country code (to be used for both phone number formatting and user location).
An optional field for entering the phone number, which depends on the selected country.

Is this kind of customization supported by the MazPhoneNumberInput component?

[LouisMazel]

Hello @amoza3,

Yes, you can do it by using the no-country-selector property.

But for the moment, there is no option not to render the phone number input (maybe in a future version), so you have to implement the country selector by yourself.

Follow this example:

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

The code :

<script setup lang="ts">
import { ref } from 'vue'
import MazPhoneNumberInput, { type CountryCode } from 'maz-ui/components/MazPhoneNumberInput'
import MazSelect from 'maz-ui/components/MazSelect'

const phoneNumber = ref<string>('+12015551234')
const countryCode = ref<CountryCode>()

const options = [
  { label: 'France', value: 'FR', flag: 'https://flagcdn.com/h20/fr.png', dialCode: '+33' },
  { label: 'Deutschland', value: 'DE', flag: 'https://flagcdn.com/h20/de.png', dialCode: '+49' },
  { label: 'Belgium', value: 'BE', flag: 'https://flagcdn.com/h20/be.png', dialCode: '+32' },
  { label: 'United States', value: 'US', flag: 'https://flagcdn.com/h20/us.png', dialCode: '+1' },
]
</script>

<template>
  <h1>MazPhoneNumberInput</h1>

  <div style="display: inline-flex; gap: 1rem">
    <MazSelect v-model="countryCode" :options label="Select country" v-slot="{ option }">
      <div style="display: flex; width: 100%; gap: 1rem; align-items: center">
        <img size="0.8rem" :src="option.flag" loading="lazy" style="height: 20px; width: 20px; border-radius: 20px" />
        <span style="color: #5f5f5f; font-size: 0.875rem">
          {{ option.dialCode }}
        </span>
        <span>
          {{ option.label }}
        </span>
      </div>
    </MazSelect>

    <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" no-country-selector />
  </div>
</template>

[LouisMazel]

If it's really needed, I can add a property like no-phone-number-input to simplify the implementation.

Something like :

<script setup lang="ts">
import { ref } from 'vue'
import MazPhoneNumberInput, { type CountryCode } from 'maz-ui/components/MazPhoneNumberInput'

const phoneNumber = ref<string>('+12015551234')
const countryCode = ref<CountryCode>()
</script>

<template>
  <h1>MazPhoneNumberInput</h1>

  <div style="display: inline-flex; gap: 1rem">
    <MazPhoneNumberInput :model-value="phoneNumber" v-model:country-code="countryCode" no-phone-number-input />

    <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" no-country-selector />
  </div>
</template>

[amoza3]

Thank you for your response and the proposed solution! The addition of the no-phone-number-input property is a great step towards achieving the desired functionality. However, I would like to request a slight enhancement to ensure that both fields (country selector and phone number input) behave independently but remain consistent with each other.

Desired Behavior:

1. Country Selector Field:

   • This field should allow users to select a country without requiring them to enter a phone number.
   • It should display the country flag, name, and dial code as it currently does.
   • The selected country code should be updated dynamically and made available for use in other parts of the application (e.g., determining user location).

2. Phone Number Input Field:

   • This field should only accept the phone number and format it based on the selected country code.
   • It should be optional and not require the user to select a country if no phone number is provided.
   • If the country code changes, the phone number input should automatically adjust its formatting rules accordingly.

Example Code:

Here’s an example of how this could work:

<script setup lang="ts">
import { ref } from 'vue'
import MazPhoneNumberInput, { type CountryCode } from 'maz-ui/components/MazPhoneNumberInput'

const phoneNumber = ref<string>('')
const countryCode = ref<CountryCode>('US') // Default country code
</script>

<template>
  <h1>MazPhoneNumberInput</h1>
  <div style="display: inline-flex; gap: 1rem">
    <!-- Country Selector -->
    <MazPhoneNumberInput
      v-model:country-code="countryCode"
      no-phone-number-input
      placeholder="Select Country"
    />

    <!-- Phone Number Input -->
    <MazPhoneNumberInput
      v-model="phoneNumber"
      :country-code="countryCode"
      no-country-selector
      placeholder="Enter Phone Number"
    />
  </div>
</template>


Key Points: 

    The no-phone-number-input property disables the phone number input in the country selector field.
    The no-country-selector property disables the country selector in the phone number input field.
    Both fields are bound to the same countryCode variable, ensuring consistency between them.
    The phone number input dynamically adjusts its formatting based on the selected country code.
     

Request: 

Could you please enhance the implementation so that: 

    The country selector field remains fully functional even when the phone number input is disabled.
    The phone number input field adjusts its behavior (e.g., validation and formatting) dynamically based on the selected country code.
     

This approach will provide a more flexible and user-friendly experience while maintaining the integrity of the component's functionality. 

Thank you for your attention and support! 

[amoza3]

If it's really needed, I can add a property like no-phone-number-input to simplify the implementation.

Something like :

when it possible ?

[LouisMazel]

Not now, it's just a potential future feature.

I'm currently working on V4. Then I might add this feature but no date

For the moment, you have to use the first solution.

[LouisMazel]

Hi @amoza3,

You can do it now with v4!

You can enable the prop hide-country-select of the MazInputPhoneNumber component and connect it with the new component MazSelectCountry

Tell me if you have any questions 😊