Support "0" mobile prefix before area code

[danny3313]

I have an issue with the area code: when dialing, a 0 is not allowed after the country code. So + 31 010 1234567 is not possible, this should be +31 10 1234567 But ... I can enter a 0 after the country code without problems.

I could remove the 0 in the onChange, but when I reload the number again, the formatting is off, if the area code consists of 2 digits, for mobile numbers.

+31 6 1234567 is then displayed as +31 61 234567, which is an incorrect format.

So:

1. can the issue be fixed regarding the 0 after the country code?
2. if not, can the issue be fixed with the 2-digit area codes?

[bl00mber]

I don't understand what do you mean. I have tried to put 31 010, it works as expected (input received and showed 0 after the country code).

[danny3313]

Hi, thank you. The general rule is, that a zero is not allowed after a country code. so =+31 010 is invalid, this should be +31 10 another option is to display the 0 between braces: like so: +31 (0) 10, could that be an option ?

[bl00mber]

You can validate this on the application side. Why user would type invalid value? As for the option, there is an option to add custom mask.

[jhchill666]

Am also facing this issue.

In the UK, mobile numbers have the following format: 07xxx xxx xxx

When inputting a mobile number, not a landline number, people are used to just typing out their number. This has the undesired effect, of incorrectly truncating the number as the formatter is assuming the zero to be part of the actual number.

I've tried removing the zero in the onChange, but it just doesn't seem to update the PhoneInput

[jhchill666]

doesn't seem to update the PhoneInput

This statement was incorrect. I can modify the phone number to crop off the leading zero. Would be nice if this was taken care of for me.

I might be wrong, but as @danny3313 tried explaining, international numbers would not have a zero after the dial code.

[bl00mber]

@jamiehill you mean after the country code?

[jhchill666]

Yep, there'd never be a case where you'd have a country code, followed by a zero is there? I'm no expert mind you!

[cpdwyer]

I am currently working on something similar and am experiencing the same issues. I can write validation to not allow the user to enter the trunk code (leading number in the area code) but when passing it back through the value prop the new value is ignored and it keeps the value that was passed out from the onChange callback.

@jamiehill just a heads up but that is an incorrect assumption, Italy and some former USSR countries do still have the 0 trunk code after the country code. But not many.

Also countries such as Finland, Iceland and Turkey also use a 9 as a truck code which needs to be dropped.

[danny3313]

I have implemented it like this:

    handleChange = (rawValue, countryData, event) => {
        const dialCode = countryData.dialCode || '';

        const isValid = this.state.isValid;

        // parameter rawValue contains only the numbers (without formatting)
        // but I wanted the formatted phone number to be stored in the database
        //  -> get the formatted number from the control and pass it on
        const formattedPhonenumber = event && event.target ? event.target.defaultValue : '';

        if (this.props.onChange)
            this.props.onChange(formattedPhonenumber, isValid, dialCode);
    }

    handleIsValid = (value, country) => {
        const isValid = this.isValidPhoneNumber(value, country.dialCode);
        this.setState({ isValid });
        return isValid;
    }

    isValidPhoneNumber = (value, dialCode) => {
        const inputNumber = this.getNumbersOnly(value);

        let isValid = true;
        // when a dial code is present, the next number cannot be a 0
        if (dialCode &&
            inputNumber.length > dialCode.length &&
            inputNumber[dialCode.length] === '0')
            isValid = false;

        return isValid;
    }

    getNumbersOnly = (value) => {
        return value.replace(/[^0-9\.]+/g, '') || '';
    }

and then in the render code:

const rawPhonenumber = this.getNumbersOnly(value);

// Note: defaultCountry is passed from the calling component

<PhoneInput
  country={defaultCountry}
  value={rawPhonenumber || ''}
  onChange={this.handleChange}
  isValid={this.handleIsValid}
/>