defaultCountry: `Country not found: undefined`

[baptisteArno]

Hello,

I'm implementing the component like this:

<PhoneInput
  placeholder={placeholder}
  value={inputValue}
  onChange={(value: string) => setInputValue(value)}
  defaultCountry={chatbotLang === "fr" ? "FR" : undefined}
/>;

When I'm switching from "FR" to undefined it throws Country not found: undefined. This is probably a bug?

I'd like to switch to Internationnal. How can I achieve this?

[catamphetamine]

Hi. It's most certainly a bug in your code. You could provide an online demo somewhere on codesandbox.io, for example.

[baptisteArno]

It's most certainly a bug in your code.

I'm pretty sure it's not! chatbotLang switches from "fr" to "en". Thus, defaultCountry switches from "FR" to undefined and it throws an error.

If defaultCountry is set to undefined it should set the select input to "international", right?

[catamphetamine]

Unless you provide an online demo, this issue won't be considered.

[baptisteArno]

Sorry for the trouble @catamphetamine. It looks like the lib is broken on codesandbox... #356 Do you have an alternative in mind?

[catamphetamine]

@baptisteArnaud I see. That's funny.

Currently, there's this piece of code that watches the changes in defaultCountry property:

        // If the default country changed.
        // (e.g. in case of ajax GeoIP detection after page loaded)
        // then select it but only if the user hasn't already manually
        // selected a country and no phone number has been entered so far.
        // Because if the user has already started inputting a phone number
        // then he's okay with no country being selected at all ("International")
        // and doesn't want to be disturbed, doesn't want his input to be screwed, etc.
        if (newDefaultCountry !== prevDefaultCountry &&
            !hasUserSelectedACountry && (
                (!value && !newValue) ||
                (international &&
                    value === getInitialParsedInput(undefined, prevDefaultCountry, international, metadata) &&
                    value === getInitialParsedInput(undefined, newDefaultCountry, international, metadata)
                )
            )
        ) {
            return {
                ...newState,
                country: isCountrySupportedWithError(newDefaultCountry, metadata) ? newDefaultCountry : prevDefaultCountry,
                // If `parsedInput` is empty, then automatically select the new `country`
                // and set `parsedInput` to `+{getCountryCallingCode(newCountry)}`.
                parsedInput: generateInitialParsedInput(newValue, undefined, props)
                // `value` is `undefined`.
                // `parsedInput` is `undefined` because `value` is `undefined`.
            }
        }

And I guess that's where it throws an error in your case. So, if defaultCountry did change, and the user hasn't manually selected another country using the country select, and no value has been set, then it executes the return statement. Looks like this is indeed a bug in the library. I can see it now. I'll fix it then.

[catamphetamine]

Or maybe not: isCountrySupportedWithError() doesn't actually throw anything.

[catamphetamine]

When I'm switching from "FR" to undefined it throws Country not found: undefined. This is probably a bug?

Well, I guess in reality it doesn't "throw" anything: it just logs an error message. This is still a bug though. Will fix.

[catamphetamine]

Fixed in react-phone-number-input@3.0.26

[kriyazhao]

@catamphetamine Looks like the issue re-occurred in the latest version v3.1.6...from a valid value to undefined for defaultCountry

[catamphetamine]

@kriyazhao Fixed in react-phone-number-input@3.1.7

[kriyazhao]

@catamphetamine thank you for the quick fix!