💡 Feature Request - Option for simplified countries list

[arzatskis]

Implementation PR

No response

Reference Issues

No response

Summary

At the moment countriesList includes multiple options with different area codes for same country (e.g. Canada has options with patterns +1 (204) ..., +1 (226) ..., +1 (236) ... etc.) I believe it would be great to have an option for "basic" countries list, where there's one option per country (for Canada this would be single option with only country code in pattern+1 (...) ... ....)

I'd say for end users such list would be less overwhelming and easier to browse / find option with typing in focused <select />

Basic Example

At the moment you can do filtering / mapping on your own, something like, but it's quite cumbersome

const map = new Map<string, string[]>();

countriesList.forEach(([code, name, dial, pattern]) =>
  map.set(code, [
    code,
    name,
    dial,
    pattern.replace(
      /\((\d+)\)/,
      (_, digits) => `(${'.'.repeat(digits.length)})`
    )
  ])
);

const list = Array.from(map.values());

// additional, you'll need to extract country code from `pattern`,
// when rendering <select /> options in case you want to display it,
// as `dial` contains country code with area code

Drawbacks

The only drawback I can think of is overhead for maintainers generating / maintaining two separate .json lists

Unresolved questions

No response

[ArtyomVancyan]

Hi @arzatskis, thanks for sharing your thoughts. The thing is that the +1 (...) ... ....) phone mask is not only for Canada but +1 (204) ..., +1 (226) ..., +1 (236) ... etc. are.

• +1 (340) – United States Virgin Islands.
• +1 (670) – Northern Mariana Islands.
• +1 (671) – Guam.
• +1 (684) – American Samoa.
• +1 (787, 939) – Puerto Rico.

This allows us to identify the country and so perform corresponding restrictions and validations based on that.

[arzatskis]

Yeah, I understand that, but it may still return first match from list and refine matched country as user types in more digits?

[ArtyomVancyan]

Yeah, I understand that, but it may still return first match from list and refine matched country as user types in more digits?

Sorry @arzatskis, but I don't see any issues with this. With the current implementation, it reidentifies the country's metadata, while with the suggested feature, it will always be the first matched country. For example, if the phone number starts with +1, it will identify the first country satisfying the +1 mask, and if the area code doesn't belong to the country it matched first, it will cause validation issues for that user.

[arzatskis]

When typing everything seems to work ok. What i had in mind, that lots of options in the dropdown are not very easy to browse and I'd say quite overwhelming.

---

Did some mapping of original countriesList, things seem to work fine. Just thought maybe this come out of the box / or as an option

Some work in progress :)

[ArtyomVancyan]

@arzatskis I forgot to notify you that this issue has been fixed in #68 in the scope of the antd-phone-input/115 feature request. You can use the distinct argument of the usePhone hook. So, I am closing the issue, but you're free to reopen this or create others if you have any concerns.