Error when countryCallingCodeEditable={false} and value is empty

[Ke1sy]

Error when countryCallingCodeEditable={false} and initial value is undefined. The first country is selected by default in country select, but the code is not applied. When you try to type some value into input, it is not possible and you get the error "Unknown country: undefined"

 const [value, setValue] = useState();
 <PhoneInput
                            value={value}
                            onChange={setValue}
                            international
                            countryCallingCodeEditable={false}
                        />

[catamphetamine]

Not clear

[Ke1sy]

@catamphetamine I added an example in sandbox, take please a look: https://codesandbox.io/s/simple-react-phone-number-input-example-forked-eizb5h?file=/index.js The first option "Afghanistan" is not selectable right after page loading and you cannot type any value into the input. Thanks!

[catamphetamine]

Maybe it was a bug. See if the latest version works. Your sandbox uses an older version.

[Ke1sy]

@catamphetamine I use latest version 3.2.7 in a project and face the same issue, unfortunately I cannot update it in a sandbox because of this https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/141

[catamphetamine]

I cannot update it in a sandbox because of this

I see. Well, I don't look into ES Modules import issues in non-standard cases, and this seems to be one.

[d-slabunov]

+1

[Jack-Barry]

Piggy-backing on this since we're seeing the same error albeit triggered by a slightly different scenario, I'll open a separate issue if needed. Repro link: https://codesandbox.io/s/simple-react-phone-number-input-example-forked-jkv19x

Scenario:

1. User has a phone number stored in backend that gets rendered on page load
2. The phone number renders fine, with correct country code selected
3. The user clicks the reset button, nothing changes, country code is still selected
4. The user edits their number in the input, something like changing the last digit
5. The user decides to reset the field to the original value and clicks the reset button

At this point, the error gets thrown for the country selected being undefined

index.js:27 Warning: Failed prop type: The prop `label` is marked as required in `CountryIcon`, but its value is `undefined`.
    in CountryIcon (created by CountrySelectWithIcon)
    in CountrySelectWithIcon (created by PhoneNumberInput_)
    in div (created by PhoneNumberInput_)
    in PhoneNumberInput_ (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (at index.js:13)
    in Demo (at index.js:31)

Is there something we need to pass in to prevent the country code from being reset to undefined, or is this an unintended behavior?

[catamphetamine]

@Jack-Barry I can see that the error is reproducible in the sandbox you've provided but it also contains a non-latest version of react-phone-number-input as a dependency.

But when updating react-phone-number-input to the latest version, it throws an error:

Cannot read properties of undefined (reading 'US')

The error means that countries property is not found in metadata.min.json.js.

That means that codesandbox.io doesn't properly support importing "ES module" modules.

So the sandbox doesn't really tell if there's a bug in the latest version of the library.

[Jack-Barry]

@catamphetamine Think I've tracked down where our country gets set to undefined

When getCountryFromPossiblyIncompleteInternationalPhoneNumber is called with a number like +15555555555, it returns undefined. This happens here: https://github.com/catamphetamine/react-phone-number-input/blob/708f2cdbadff074fd9755b15fcdf1792421363e3/source/helpers/phoneInputHelpers.js#L371

Is there some other format that the number has to be in for it to be parsed and return an inferred country?

I could be reading it wrong, but from what I can tell it would have to be passed in as a National (significant) number, so the +1 would have to be dropped, 5555555555. I don't think there's a clean way to do chop that prefix off here though

[catamphetamine]

@Jack-Barry I did replicate the issue locally on my machine using the code you've posted in that sandbox. Your gess about the line of code where the bug is manifested was also correct. Published react-phone-number-input@3.2.21. I'm closing the issue assuming it's resolved.

[Jack-Barry]

@catamphetamine thanks for the quick response, unfortunately I'm still seeing the error crop up on 3.2.21. I'll try to throw together a demo repo to facilitate better testing than Codesandbox is allowing for right now

[catamphetamine]

Ok. Since s sandbox doesn’t seem to be working with the latest version, simply post your code and steps to reproduce.

On Fri, 5 May 2023 at 00:59, Jack Barry @.***> wrote:

@catamphetamine https://github.com/catamphetamine thanks for the quick response, unfortunately I'm still seeing the error crop up on 3.2.21. I'll try to throw together a demo repo to facilitate better testing than Codesandbox is allowing for right now

— Reply to this email directly, view it on GitHub https://github.com/catamphetamine/react-phone-number-input/issues/413#issuecomment-1535462735, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADUP327LHTB6UJT5ITNYK3XEQRCJANCNFSM565PY66Q . You are receiving this because you were mentioned.Message ID: @.***>

[Jack-Barry]

Found a site that'll allow it to work on latest: https://stackblitz.com/edit/vitejs-vite-ozkrcn?file=index.jsx

[catamphetamine]

Found a site that'll allow it to work on latest:

I can see that the demo is working. What issue're you having with its operation?

[Jack-Barry]

Scenario:

1. User has a phone number stored in backend that gets rendered on page load
2. The phone number renders fine, with correct country code selected
3. The user clicks the reset button, nothing changes, country code is still selected
4. The user edits their number in the input, something like changing the last digit
5. The user decides to reset the field to the original value and clicks the reset button

At this point the country selector reverts to international instead of having a selected country, even though the country should be the same as it was before since the value didn't actually change

[catamphetamine]

@Jack-Barry I see. Published react-phone-number-input@3.2.22

[Jack-Barry]

Version 3.2.22 did the trick, thanks!