Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In Version 23.0.7 the intlTelInput.getCountryData() static function returns empty string value for name property. It was working fine till v20.3.0 #1628

Closed
arahanthjain160386 opened this issue May 22, 2024 · 3 comments

Comments

@arahanthjain160386
Copy link

arahanthjain160386 commented May 22, 2024

Plugin version

v23.0.7

Steps to reproduce

  1. Use intlTelInput.getCountryData() to populate a custom dropdown
  2. Since name property is empty but iso2 has value list of empty values are displayed.
  3. window.intlTelInputGlobals.getCountryData() was working fine in V20.3.0

Expected behaviour

It should return countryName in the name property like below
[{
name: "Afghanistan",
iso2: "af",
dialCode: "93"
}, ...]

Actual behaviour

PFB the code example
https://codedamn.com/playground/zd47K7toOOFlCGB6ZPkky
Current output from intlTelInput.getCountryData() method is as below
[{
name: "",
iso2: "af",
dialCode: "93"
}, ...]

Initialisation options

None

@jackocnr
Copy link
Owner

Thanks for reporting. This should be fixed in v23.0.8.

@arahanthjain160386
Copy link
Author

arahanthjain160386 commented May 24, 2024

@jackocnr Thank you for resolving this issue. I had one follow-up question.
I was importing utils in my react application as below.

import utils from 'intl-tel-input/build/js/utils.js';

But now since the v23.0.0 release utils script is an ECMA module, i tried below

import utils from 'intl-tel-input/intlTelInputWithUtils';

And the code to instantiate remains the same as below. But validations are failing and i dont see any console errors. Am i importing Utils module in a wrong way?
const initPhoneInput = (ref) => {
intlTelInput(ref, {
utilsScript: utils,
initialCountry: '',
});

I also pointed directly to the new utils script as below
import utils from 'intl-tel-input/build/js/intlTelInputWithUtils.js';
Still validations are failing.

In both the case below code for getNumber() in the intlTelInput.js file is returning ""(empty string).Due to this i implied that utils are not getting loaded.
//* Format the number to the given format.
getNumber(format) {
if (intlTelInput.utils) {
const { iso2 } = this.selectedCountryData;
return intlTelInput.utils.formatNumber(
this._getFullNumber(),
iso2,
format
);
}
return "";
}

Please correct me if i am wrong. Thank you

@jackocnr
Copy link
Owner

jackocnr commented May 24, 2024

Sorry I haven't updated the docs properly yet, but if you want to use the intlTelInputWithUtils, then you do it like this:

import intlTelInput from "intl-tel-input/intlTelInputWithUtils"

And then you don't need to use utilsScript then because it's already bundled.

EDIT: I've now added a section to the readme called Loading The Utilities Script

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants