French domestic numbers with leading 0 get truncated

[marcelopbg]

French numbers with leading 0 get truncated when using react-international-phone

Hi,

I’ve run into an issue when using French phone numbers with the react-international-phone component.

Problem

• In France, domestic numbers always start with a leading 0 (trunk prefix).
  Example: 06 12 34 56 78.
• The component enforces the international format, where the same number is written as +33 6 12 34 56 78.
• The issue: when users enter the domestic format (0X…), the component assumes the same length as the international format and cuts off the last digit.
• As a result, many of my French users have ended up saving an incorrect number.

Expected behavior

• French numbers entered with a leading 0 should be fully supported without truncation.
• The component should properly handle both:
  • Domestic: 06 12 34 56 78
  • International: +33 6 12 34 56 78

Possible solutions

• Allow one extra character in the French mask to account for the leading 0.
• Or treat the leading zero as an exception in the parsing logic.

Workarounds?

Is there anything I can configure on my side to handle this (e.g., custom mask, custom parsing)?

Screenshot

Thanks for your help!

[timblackwell]

I am also having this issue. I assume you have not found a solution with this library?

[marcelopbg]

I am also having this issue. I assume you have not found a solution with this library?

No... unfortunately not.

[timblackwell]

@marcelopbg I think I have found a solution. You can modify the countries that are passed into the component.
If you add an extra . to the format string, it will accept another digit.

I have this code in a util file to give me all the countries with extra digits. Im my use case though I add digits for the length of countries dial code as I have the forceDialCode prop enabled and don't want to loose any digits if international number is pasted in.

I hope this helps.

/**
 * Extended phone countries with extra digits in the format pattern.
 * This adds dots for each char in countries dial code to the end of each countries phone number format.
 * This is to make sure we don't lose any digits if a customer pastes local number with international format.
 */
export const extendedPhoneCountries = defaultCountries.map(country => {
  if (country.length < 4) {
    return country
  }

  const countryFormat = country[3]
  if (!countryFormat) {
    return country
  }

  const dialCodeLength = country[2].length
  const extraDots = '.'.repeat(dialCodeLength)

  const extendedCountry = [...country] as typeof country
  switch (typeof countryFormat) {
    case 'string': {
      extendedCountry[3] = countryFormat + extraDots
      break
    }
    case 'object': {
      extendedCountry[3] = {
        ...countryFormat,
        default: countryFormat.default + extraDots,
      }
      break
    }
  }

  return extendedCountry
})

example usage

    usePhoneInput({
      countries: extendedPhoneCountries,
      ...
    })