Choose country code for phone using dropdown is broken

[maxceem]

Expected behavior

We should be able to change the country and code by the dropdown next to the phone field.

Actual behavior

When we click any country in the dropdown code and country is not changed.

Steps to reproduce the problem

• Open user profile settings page https://connect.topcoder-dev.com/settings/profile
• Click the country code dropdown next to the Business Phone phone field and choose any country.
• Observe that it didn't make any effect and country and code is not changed.

Screenshot/screencast

Related issues

#3823
#3822

[maxceem]

The interesting thing, that this functionality works on the registration form page https://accounts.topcoder-dev.com/connect/registration. So the preferred way to fix it if possible is to move this logic to the PhoneIntput component, so it would work automatically in all the places instead of implementing duplicate logic in Connect App.

[maxceem]

This has been fixed via #3824 and topcoder-platform/react-components#357.

We had to make sure that react-components uses libphonenumber-js version 1.4.6 instead of the newer version 1.7.48 by updating rule in package.json from ^1.4.6 to 1.4.6.

[lakshmiathreya]

The drop down for Country code for phone seems to be working on Dev now - however, the scroll bar is not visible - so picking Country in Business Phone continues to work only via the Country field even now ... pls clarify if this is a must do for 2.8 release ...

[lakshmiathreya]

@codejamtc @coderhacker

[codejamtc]

@maxceem @lakshmiathreya I am validating this one now, still not finished yet. I have seen a bunch of issues.

Ref: https://countrycode.org/

NOTE: Two scrollbars displayed One is scrollable and the other one is disabled and not in use

1. When you select Aland Islands the code is displayed as FIN
   https://laendercode.net/en/2-letter-code/ax

2. When you select American Samoa the code is displayed as US , should be ASM

3. When you select Anguilla the code is displayed as US , should be AIA

4. Can't select Antarctica

5. When you select Antigua and Barbuda the code is displayed as US , should be ATG

[maxceem]

@lakshmiathreya could you please specify the issue with scrollbar, as I can see and use the scrollbar:

[codejamtc]

Failed because some countries are not selectable if this is due to the country list issue we can take this as QA Pass

https://www.screencast.com/t/5wOgFtTPIZMa

• Can't select Antarctica
• Can't select Bouvet Island
• Can't select Heard Island and McDonald Islands
• Can't select Pitcairn
• Can't select South Georgia and the South Sandwich island

@vikasrohit @maxceem @lakshmiathreya There are few issues in the list, like Selecting some countries will select US from the list NOT the original country, Some country codes are incorrect, Some numbers are incorrect. I think we need to refine the list completely.