Some countries like US and UK, which share country codes with other countries.
Eg: US and Canada share the same country code which is 1. Similarly UK shares the code 44 with other countries.
When using AsYouType formatter for entering international numbers for such countries, the country returned is undefined even after entering digits more than the country code.
Observed behavior :
As you type
+1 267 315
Default country:
US
Template:xx xxx xxx
Number:+1267315
Country—
National:267315
International:+1 267315
URItel:+1267315
Type:—
Possible:false
Valid:false
Expected Behavior:
As you type
+1 267 315
Default country:
US
Template:xx xxx xxx
Number:+1267315
Country:US
National:267315
International:+1 267315
URItel:+1267315
Type:—
Possible:false
Valid:false
At this point, the formatter knows that +1 is the calling code and it cannot belong to Canada as 267 is not a valid prefix code for Canadian number. Yet, it does not return US as the country. The country only updates when the complete phone number is entered, which is very late.
AsYouType.js maintain a callingCountryCode variable which is updated as soon as it identifies a valid country code but country is not.
It seems that this was a design decision by the authors after reading the following comment in AsYouType.js :
// `this.country` could be `undefined`,
// for instance, when there is ambiguity
// in a form of several different countries
// each corresponding to the same country phone code
// (e.g. NANPA: USA, Canada, etc),
// and there's not enough digits entered
// to reliably determine the country
// the phone number belongs to.
// Therefore, in cases of such ambiguity,
// each time something is input,
// try to determine the country
// (if it's not determined yet).
While this might be expected behavior, there should be an option to access the new country as soon as a different countryCode is identified for a better experience even if inaccurate.
Suggested solution : If the declaration file could expose the callingCountryCode variable in the exported AsYouType class, this would solve the problem.
Some countries like US and UK, which share country codes with other countries. Eg: US and Canada share the same country code which is 1. Similarly UK shares the code 44 with other countries. When using AsYouType formatter for entering international numbers for such countries, the country returned is undefined even after entering digits more than the country code.
Observed behavior : As you type +1 267 315 Default country: US Template:xx xxx xxx Number:+1267315 Country— National:267315 International:+1 267315 URItel:+1267315 Type:— Possible:false Valid:false
Expected Behavior: As you type +1 267 315 Default country: US Template:xx xxx xxx Number:+1267315 Country:US National:267315 International:+1 267315 URItel:+1267315 Type:— Possible:false Valid:false
At this point, the formatter knows that +1 is the calling code and it cannot belong to Canada as 267 is not a valid prefix code for Canadian number. Yet, it does not return US as the country. The country only updates when the complete phone number is entered, which is very late.
AsYouType.js maintain a
callingCountryCode
variable which is updated as soon as it identifies a valid country code butcountry
is not. It seems that this was a design decision by the authors after reading the following comment in AsYouType.js :While this might be expected behavior, there should be an option to access the new country as soon as a different countryCode is identified for a better experience even if inaccurate. Suggested solution : If the declaration file could expose the
callingCountryCode
variable in the exported AsYouType class, this would solve the problem.