Hello, I have a canadian phone number with canadian area code (403) but Phone Input shows selected country as US. Is there a way to fix that behaviour?
Hi @Daniel_Zhuchkov!
You can click the three dots next to Interaction
then check the box for Lock selected country
. This will then allow you to pick a specific country code for the phone input component.
Hope this helps!
Hello @mitchmess ,
Iβve encountered a similar issue before. The problem with locking the country code is that it prevents dynamic assignment when the data is fetched from the database. In my case, I have phone numbers stored from multiple countries, each with different country codes.
For example, the +1
country code is used for both the US and Canada, but you can distinguish between them based on their specific area codes. So simply locking the country code doesn't work well when you're dealing with such shared codes β as also pointed out by @Daniel_Zhuchkov.
To handle this properly, I needed a way to dynamically set the country based on the phone numberβs full context.
The problem is I am still looking for dynamic country selection because my app works with multiple countries
Hi @Daniel_Zhuchkov, right now the phone number input does have an international option in which it can detect what country it is, but it doesn't work for countries that share a country code. Since the +1 code works for the US, Canada, and many Caribbean islands, it ends up defaulting to the US if you don't lock the country in.
I haven't tried it but it may be possible to create a custom component that uses this: GitHub - jackocnr/intl-tel-input: A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
Just wanted to update here that I put a feature request in for this, for those who don't want to go through making a custom component.