intl-tel-input 19.2.17 → 19.2.19

package/src/js/intlTelInput.js

@@ -258,9 +258,9 @@ class Iti {
   // Translate Countries by object literal provided on config
   _translateCountryNames() {
     for (let i = 0; i < this.countries.length; i++) {
-      const iso = this.countries[i].iso2.toLowerCase();
-      if (this.options.i18n.hasOwnProperty(iso)) {
-        this.countries[i].name = this.options.i18n[iso];
+      const iso2 = this.countries[i].iso2.toLowerCase();
+      if (this.options.i18n.hasOwnProperty(iso2)) {
+        this.countries[i].name = this.options.i18n[iso2];
       }
     }
   }
@@ -325,7 +325,7 @@ class Iti {
     this.preferredCountries = [];
     for (let i = 0; i < this.options.preferredCountries.length; i++) {
       const countryCode = this.options.preferredCountries[i].toLowerCase();
-      const countryData = this._getCountryData(countryCode, false, true);
+      const countryData = this._getCountryData(countryCode, true);
       if (countryData) {
         this.preferredCountries.push(countryData);
       }
@@ -520,6 +520,12 @@ class Iti {
         name: hiddenInputName
       });
       wrapper.appendChild(this.hiddenInput);
+      // add a 2nd hidden input for the selected country code - this is useful for handling invalid numbers with server-side validation, as getNumber does not always include the international dial code for invalid numbers
+      this.hiddenInputCountry = this._createEl("input", {
+        type: "hidden",
+        name: `${hiddenInputName}_country`
+      });
+      wrapper.appendChild(this.hiddenInputCountry);
     }
   }
 
@@ -563,7 +569,7 @@ class Iti {
   // 2. using explicit initialCountry
   // 3. picking the first preferred country
   // 4. picking the first country
-  _setInitialState() {
+  _setInitialState(overrideAutoCountry = false) {
     // fix firefox bug: when first load page (with input with value set to number with intl dial
     // code) and initialising plugin removes the dial code from the input, then refresh page,
     // and we try to init plugin again but this time on number without dial code so get grey flag
@@ -582,8 +588,8 @@ class Iti {
     // flag, else fall back to the default country
     if (dialCode && !isRegionlessNanp) {
       this._updateFlagFromNumber(val);
-    } else if (initialCountry !== "auto") {
-      const isValidInitialCountry = initialCountry && this._getCountryData(initialCountry, false, true);
+    } else if (initialCountry !== "auto" || overrideAutoCountry) {
+      const isValidInitialCountry = initialCountry && !!this._getCountryData(initialCountry, true);
       // see if we should select a flag
       if (isValidInitialCountry) {
         this._setFlag(initialCountry.toLowerCase());
@@ -633,6 +639,7 @@ class Iti {
   _initHiddenInputListener() {
     this._handleHiddenInputSubmit = () => {
       this.hiddenInput.value = this.getNumber();
+      this.hiddenInputCountry.value = this.getSelectedCountryData().iso2;
     };
     if (this.telInput.form) {
       this.telInput.form.addEventListener(
@@ -719,7 +726,8 @@ class Iti {
       this.resolveUtilsScriptPromise();
     }
 
-    if (this.options.initialCountry === "auto") {
+    // dont bother with IP lookup if we already have a selected country
+    if (this.options.initialCountry === "auto" && !this.selectedCountryData.iso2) {
       this._loadAutoCountry();
     } else {
       this.resolveAutoCountryPromise();
@@ -740,15 +748,22 @@ class Iti {
 
       if (typeof this.options.geoIpLookup === "function") {
         this.options.geoIpLookup(
-          (countryCode) => {
-            window.intlTelInputGlobals.autoCountry = countryCode.toLowerCase();
-            // tell all instances the auto country is ready
-            // TODO: this should just be the current instances
-            // UPDATE: use setTimeout in case their geoIpLookup function calls this callback straight
-            // away (e.g. if they have already done the geo ip lookup somewhere else). Using
-            // setTimeout means that the current thread of execution will finish before executing
-            // this, which allows the plugin to finish initialising.
-            setTimeout(() => forEachInstance("handleAutoCountry"));
+          (countryCode = "") => {
+            const lowerCountryCode = countryCode.toLowerCase();
+            const isValid = !!this._getCountryData(lowerCountryCode, true);
+            if (isValid) {
+              window.intlTelInputGlobals.autoCountry = lowerCountryCode;
+              // tell all instances the auto country is ready
+              // TODO: this should just be the current instances
+              // UPDATE: use setTimeout in case their geoIpLookup function calls this callback straight
+              // away (e.g. if they have already done the geo ip lookup somewhere else). Using
+              // setTimeout means that the current thread of execution will finish before executing
+              // this, which allows the plugin to finish initialising.
+              setTimeout(() => forEachInstance("handleAutoCountry"));
+            } else {
+              this._setInitialState(true);
+              forEachInstance("rejectAutoCountryPromise");
+            }
           },
           () => forEachInstance("rejectAutoCountryPromise")
         );
@@ -1253,8 +1268,8 @@ class Iti {
       // Note: use getNumeric here because the number has not been formatted yet, so could contain
       // bad chars
       countryCode = "";
-    } else if (!number || number === "+") {
-      // empty, or just a plus, so default
+    } else if ((!number || number === "+") && !this.selectedCountryData.iso2) {
+      // if no selected flag, and user either clears the input, or just types a plus, then show default
       countryCode = this.defaultCountry;
     }
 
@@ -1295,13 +1310,10 @@ class Iti {
 
   // find the country data for the given country code
   // the ignoreOnlyCountriesOption is only used during init() while parsing the onlyCountries array
-  _getCountryData(countryCode, ignoreOnlyCountriesOption, allowFail) {
-    const countryList = ignoreOnlyCountriesOption
-      ? allCountries
-      : this.countries;
-    for (let i = 0; i < countryList.length; i++) {
-      if (countryList[i].iso2 === countryCode) {
-        return countryList[i];
+  _getCountryData(countryCode, allowFail) {
+    for (let i = 0; i < this.countries.length; i++) {
+      if (this.countries[i].iso2 === countryCode) {
+        return this.countries[i];
       }
     }
     if (allowFail) {
@@ -1321,7 +1333,7 @@ class Iti {
 
     // do this first as it will throw an error and stop if countryCode is invalid
     this.selectedCountryData = countryCode
-      ? this._getCountryData(countryCode, false, false)
+      ? this._getCountryData(countryCode, false)
       : {};
     // update the defaultCountry - we only need the iso2 from now on, so just store that
     if (this.selectedCountryData.iso2) {