autocomplete attribute for tel-country-code not working well for <select> elements

[battre]

I learned about the following difficulty with the tel-country-code autocomplete type:

1. Many websites rely on a <select> element to let users choose their telephone country code. Oftentimes the <option>s look as follows <option value="...">United States (+1)</option>.

2. The website cannot put "+1" in the <option> value because there would be a collision:

• <option value="+1">Anguilla (+1)</option>
• <option value="+1">USA (+1)</option>
  The browser would probably just use the first match of +1 (Anguilla) when trying to fill a phone number.

3. As a result, websites may prefer the following to get a better autofill experience.

<select autocomplete="country">
  <option value="AI">Anguilla (+1)</option>
  <option value="US">USA (+1)</option>
</select>

Unfortunately, using autocomplete="country" is semantically incorrect when you are trying to fill a phone number. The user might have a UK phone number associated with a US address.

I don't know whether there's a perfect way of fixing this.

I guess my preference would be to suggest that <select autocomplete="tel-country-code"> supports selecting entries via the their 2-letter ISO-3166 codes in the examples section.

Alternatively, we could introduce an autocomplete="tel-country-code-ISO-3166-1-alpha-2" which does not select countries via their calling codes but via their 2-letter ISO-3166 codes?

A challenge for implementers is that telephone number country code may not be associated with any specific country, it's just a raw number (+1). I would propose a heuristic (not for the spec):

• Given an address A that should be filled, lookup the country code (lookup_country) of A.country (e.g. "US") from a table, (which would give us "+1". for A.country == "US")
• If lookup_country lookup matches A.phone_country_code, try to select the <option value="$lookup_country">
• Else, do a reverse lookup for candidate 2-letter country codes from A.phone_country_code, select one (selected_country) using some heuristics and try to find the <option value="$selected_country">.
• If that failed, try other heuristics to find the correct <option>.