When separateDialCode is set to true, the user sees the flag of the country and the country code. The placeholder shows the 10 digit phone number. So the user needs to enter the phone number, excluding the country code. The validation of this number returns false.
If the user enters the complete number which includes the country code, the validation is true, but the number now contains the country code two times.
Here is the console log output on entering the 10 digit phone number but returning false:
false "9886106999" Object {name: "India (भारत)", iso2: "in", dialCode: "91", priority: 0, areaCodes: null} "+91 98861 06999" null
Here is the console log on entering the country code as well, which returns true, but the number now has the country code twice:
true "+919886106999" Object {name: "India (भारत)", iso2: "in", dialCode: "91", priority: 0, areaCodes: null} "+91+919886106999" ""
I checked the code - it happens as the validation is happening using newNumber, instead it could do the isValidNumber on the output of this.getNumber(newNumber). I am a newbie in javascript, so the experts could check and correct it please.
----------->
notifyPhoneNumberChange(newNumber) {
if (typeof this.props.onPhoneNumberChange === 'function') { if (typeof this.props.onPhoneNumberChange === 'function') {
let result = this.isValidNumber(newNumber); let result = this.isValidNumber(newNumber);
-
this.props.onPhoneNumberChange(result, newNumber, this.selectedCountryData); + this.props.onPhoneNumberChange(result, newNumber, this.selectedCountryData, this.getNumber(newNumber));
} }
} }
Edit: Possibly a related issue, is when the country is changed the onPhoneNumberChange method is not called. This is for the user who for some weird reason first enters his number and then changes the flag.