Canada flag switches to US flag on submit

[Jcg408]

Issue Description When switching to Canada and inputting a valid phone number with Canadian area code, the number is registered as a US number. This is due to the fact that North American countries all have +1 as the calling code. I

This issue doesn't happen with Puerto Rico (although a separate problem is changing the code for Puerto Rico with 2 area codes) because the code is appended with area codes.

Steps to Reproduce / Code Snippets Select Canada in the modal and input a phone number. Refresh and the flag has switched to US flag.

Expected Results Select Canada in the modal and input a phone number. Refresh and the flag should remain as Canada. This should occur if the number is not on the Canadian area code as well. If the Country Code is set as "CA" it should not change to something else!

[zyaanbookee]

I am facing the same issue, but vice versa.. If i select United state and refresh, Canada is shown as selected. Any solution to this?

[Jcg408]

The reason this happens is because US and Canada are both part of the NANPA and have +1 as a country code. So does Puerto Rico but in this dropdown they display the 2 area codes (which cause a different problem). I was able to use a work around using Google libphonenumber with it and set a method and pass to the PhoneInput component you will need to import PhoneNumberUtil from google-libphonenumber

const phoneUtil = PhoneNumberUtil.getInstance();

const setNANPAcountry = (country: string) => { phoneUtil.isNANPACountry(country) ? phoneInput.current?.setState({ code: '1', }) : null; };

onChangeCountry={(country) => { setNANPAcountry(country.cca2);

    }}

I also noticed that the default kept going to India if the phone number wasn't created yet so I used the following and placed it in a useEffect

const setDefaultUS = () => { phoneInput.current?.setState({ countryCode: 'US', code: '1', }); };

useEffect(() => { if (!phoneNumber) { setDefaultUS(); } }, []); Hope this helps - they should do something about this - they already use google libphonenumber so they should fix it.