Implement intelligent auto country selection

rdtome commented 1 year ago

Hello there.

Here is a code pen for reference : https://codepen.io/rdtome/pen/zYeZzOd?editors=1010

When you enter a phone number from the USA (like +1 212-206-6540) the country list switches to Antigua and Barbuda.

I've seen that a prop disableAutoCountrySelection has been introduced to avoid this behaviour. But auto country selection is a nice feature. I'd rather not disable it.

Wouldn't it be possible (and nicer) to update the country selection only when an exact match is found ?

So for example, if I type +33 I know we should switch to France (exact match) if I type +34 I know we should switch to Spain (exact match) if I type +1 then I don't know what country to switch to... so we change nothing.

So could we have a "change country on exact match" behaviour for auto country selection ?

Even better, for non unique matches could we switch to the first match only when the currently selected country dialCode is different from the typed dialCode ?

So for example, if the selected country is the U.S. and I type +1 then no change. if the selected country is France and I type +1 then switch to first matching country for +1 if the selected country is the U.S. and I type +33 then change France.

What do you think of this behaviour ?

kksilas commented 7 months ago

Hi, is there any update on this? It seems that the bug persists!

kksilas commented 7 months ago

I'm using the CDN version

HenriqueMoroziniHupp commented 4 months ago

Any solution for this problem?

I also have a validation problem for USA, an error appears even though the number is correct

CdTgr commented 1 month ago

The problem that is mentioned here is because the country code +1 is available for other countries as well. There are also similar occurrences. here are the list of such cases.

{
  "1": [
    "Antigua and Barbuda",
    "Anguilla",
    "American Samoa",
    "Bahamas",
    "Canada",
    "Dominican Republic",
    "Puerto Rico",
    "United States of America"
  ],
  "7": ["Kazakhstan", "Russian Federation"],
  "39": ["Italy", "Holy See"],
  "44": [
    "United Kingdom of Great Britain and Northern Ireland",
    "Guernsey",
    "Isle of Man",
    "Jersey"
  ],
  "47": ["Norway", "Svalbard and Jan Mayen"],
  "61": ["Australia", "Cocos (Keeling) Islands", "Christmas Island"],
  "212": ["Western Sahara", "Morocco"],
  "262": ["Réunion", "Mayotte"],
  "358": ["Åland Islands", "Finland"],
  "590": ["Saint Barthélemy", "Guadeloupe", "Saint Martin, (French part)"],
  "599": ["Bonaire, Sint Eustatius and Saba", "Curaçao"]
}

I will try to find a way around it with the area code.

CdTgr commented 1 month ago

This has been resolved in the new release v2.0.1

CdTgr / vue3-q-tel-input

Implement intelligent auto country selection #39