intl-tel-input 25.4.7 → 25.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.4.7",
+  "version": "25.5.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -146,14 +146,12 @@
       "import": "./vue/build/IntlTelInputWithUtils.mjs"
     },
     "./angular": {
-      "types": "./angular/build/IntlTelInput.d.ts",
-      "require": "./angular/build/IntlTelInput.cjs",
-      "default": "./angular/build/IntlTelInput.js"
+      "types": "./angular/build/types/intl-tel-input/angular.d.ts",
+      "default": "./angular/build/intl-tel-input/angular.js"
     },
     "./angularWithUtils": {
-      "types": "./angular/build/IntlTelInput.d.ts",
-      "require": "./angular/build/IntlTelInputWithUtils.cjs",
-      "default": "./angular/build/IntlTelInputWithUtils.js"
+      "types": "./angular/build/types/intl-tel-input/angularWithUtils.d.ts",
+      "default": "./angular/build/intl-tel-input/angularWithUtils.js"
     },
     "./i18n": {
       "types": "./build/js/intlTelInput.d.ts",

package/react/README.md

@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.4.7/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput React component.

package/react/build/IntlTelInput.cjs

@@ -2334,12 +2334,8 @@ var Iti = class {
             const newFullNumber = this._getFullNumber(newValue);
             const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
             const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
-            let isChangingDialCode = false;
-            if (alreadyHasPlus) {
-              const currentCountry = this.selectedCountryData.iso2;
-              const newCountry = this._getCountryFromNumber(newFullNumber);
-              isChangingDialCode = newCountry !== currentCountry;
-            }
+            const newCountry = this._getNewCountryFromNumber(newFullNumber);
+            const isChangingDialCode = newCountry !== null;
             if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
               e.preventDefault();
             }
@@ -2498,16 +2494,45 @@ var Iti = class {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
     const normalisedQuery = normaliseString(query);
+    const queryLength = normalisedQuery.length;
+    const iso2Matches = [];
+    const nameStartWith = [];
+    const nameContains = [];
+    const dialCodeMatches = [];
+    const dialCodeContains = [];
+    const initialsMatches = [];
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const normalisedCountryName = normaliseString(c.name);
       const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-      const fullDialCode = `+${c.dialCode}`;
-      if (isReset || normalisedCountryName.includes(normalisedQuery) || fullDialCode.includes(normalisedQuery) || c.iso2.includes(normalisedQuery) || countryInitials.includes(normalisedQuery)) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-        }
+      if (isReset || queryLength === 0) {
+        nameContains.push(c);
+      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+        iso2Matches.push(c);
+      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+        nameStartWith.push(c);
+      } else if (normalisedCountryName.includes(normalisedQuery)) {
+        nameContains.push(c);
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+        dialCodeMatches.push(c);
+      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+        dialCodeContains.push(c);
+      } else if (countryInitials.includes(normalisedQuery)) {
+        initialsMatches.push(c);
+      }
+    }
+    const matchedCountries = [
+      ...iso2Matches.sort((a, b) => a.priority - b.priority),
+      ...nameStartWith.sort((a, b) => a.priority - b.priority),
+      ...nameContains.sort((a, b) => a.priority - b.priority),
+      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+      ...initialsMatches.sort((a, b) => a.priority - b.priority)
+    ];
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
         if (noCountriesAddedYet) {
           this._highlightListItem(listItem, false);
           noCountriesAddedYet = false;
@@ -2575,7 +2600,7 @@ var Iti = class {
   //* Check if need to select a new country based on the given number
   //* Note: called from _setInitialState, keyup handler, setNumber.
   _updateCountryFromNumber(fullNumber) {
-    const iso2 = this._getCountryFromNumber(fullNumber);
+    const iso2 = this._getNewCountryFromNumber(fullNumber);
     if (iso2 !== null) {
       return this._setCountry(iso2);
     }
@@ -2591,7 +2616,10 @@ var Iti = class {
     const cleanNumber = hasPrefix ? number.substring(1) : number;
     return `+${dialCode}${cleanNumber}`;
   }
-  _getCountryFromNumber(fullNumber) {
+  // Get the country ISO2 code from the given number
+  // BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
+  // NOTE: consider refactoring this to be more clear
+  _getNewCountryFromNumber(fullNumber) {
     const plusIndex = fullNumber.indexOf("+");
     let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
     const selectedIso2 = this.selectedCountryData.iso2;
@@ -2605,7 +2633,8 @@ var Iti = class {
       if (!selectedIso2 && this.defaultCountry && iso2Codes.includes(this.defaultCountry)) {
         return this.defaultCountry;
       }
-      const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && (numeric.length === dialCodeMatchNumeric.length || !this.selectedCountryData.areaCodes);
+      const hasAreaCodesButNoneMatched = this.selectedCountryData.areaCodes && numeric.length > dialCodeMatchNumeric.length;
+      const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && !hasAreaCodesButNoneMatched;
       const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
       if (!isRegionlessNanpNumber && !alreadySelected) {
         for (let j = 0; j < iso2Codes.length; j++) {
@@ -3173,7 +3202,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.4.7"
+    version: "25.5.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -448,7 +448,7 @@ declare module "intl-tel-input" {
         private _updateValFromNumber;
         private _updateCountryFromNumber;
         private _ensureHasDialCode;
-        private _getCountryFromNumber;
+        private _getNewCountryFromNumber;
         private _highlightListItem;
         private _getCountryData;
         private _setCountry;

package/react/build/IntlTelInput.js

@@ -2298,12 +2298,8 @@ var Iti = class {
             const newFullNumber = this._getFullNumber(newValue);
             const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
             const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
-            let isChangingDialCode = false;
-            if (alreadyHasPlus) {
-              const currentCountry = this.selectedCountryData.iso2;
-              const newCountry = this._getCountryFromNumber(newFullNumber);
-              isChangingDialCode = newCountry !== currentCountry;
-            }
+            const newCountry = this._getNewCountryFromNumber(newFullNumber);
+            const isChangingDialCode = newCountry !== null;
             if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
               e.preventDefault();
             }
@@ -2462,16 +2458,45 @@ var Iti = class {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
     const normalisedQuery = normaliseString(query);
+    const queryLength = normalisedQuery.length;
+    const iso2Matches = [];
+    const nameStartWith = [];
+    const nameContains = [];
+    const dialCodeMatches = [];
+    const dialCodeContains = [];
+    const initialsMatches = [];
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const normalisedCountryName = normaliseString(c.name);
       const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-      const fullDialCode = `+${c.dialCode}`;
-      if (isReset || normalisedCountryName.includes(normalisedQuery) || fullDialCode.includes(normalisedQuery) || c.iso2.includes(normalisedQuery) || countryInitials.includes(normalisedQuery)) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-        }
+      if (isReset || queryLength === 0) {
+        nameContains.push(c);
+      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+        iso2Matches.push(c);
+      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+        nameStartWith.push(c);
+      } else if (normalisedCountryName.includes(normalisedQuery)) {
+        nameContains.push(c);
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+        dialCodeMatches.push(c);
+      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+        dialCodeContains.push(c);
+      } else if (countryInitials.includes(normalisedQuery)) {
+        initialsMatches.push(c);
+      }
+    }
+    const matchedCountries = [
+      ...iso2Matches.sort((a, b) => a.priority - b.priority),
+      ...nameStartWith.sort((a, b) => a.priority - b.priority),
+      ...nameContains.sort((a, b) => a.priority - b.priority),
+      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+      ...initialsMatches.sort((a, b) => a.priority - b.priority)
+    ];
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
         if (noCountriesAddedYet) {
           this._highlightListItem(listItem, false);
           noCountriesAddedYet = false;
@@ -2539,7 +2564,7 @@ var Iti = class {
   //* Check if need to select a new country based on the given number
   //* Note: called from _setInitialState, keyup handler, setNumber.
   _updateCountryFromNumber(fullNumber) {
-    const iso2 = this._getCountryFromNumber(fullNumber);
+    const iso2 = this._getNewCountryFromNumber(fullNumber);
     if (iso2 !== null) {
       return this._setCountry(iso2);
     }
@@ -2555,7 +2580,10 @@ var Iti = class {
     const cleanNumber = hasPrefix ? number.substring(1) : number;
     return `+${dialCode}${cleanNumber}`;
   }
-  _getCountryFromNumber(fullNumber) {
+  // Get the country ISO2 code from the given number
+  // BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
+  // NOTE: consider refactoring this to be more clear
+  _getNewCountryFromNumber(fullNumber) {
     const plusIndex = fullNumber.indexOf("+");
     let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
     const selectedIso2 = this.selectedCountryData.iso2;
@@ -2569,7 +2597,8 @@ var Iti = class {
       if (!selectedIso2 && this.defaultCountry && iso2Codes.includes(this.defaultCountry)) {
         return this.defaultCountry;
       }
-      const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && (numeric.length === dialCodeMatchNumeric.length || !this.selectedCountryData.areaCodes);
+      const hasAreaCodesButNoneMatched = this.selectedCountryData.areaCodes && numeric.length > dialCodeMatchNumeric.length;
+      const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && !hasAreaCodesButNoneMatched;
       const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
       if (!isRegionlessNanpNumber && !alreadySelected) {
         for (let j = 0; j < iso2Codes.length; j++) {
@@ -3137,7 +3166,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.4.7"
+    version: "25.5.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -2334,12 +2334,8 @@ var Iti = class {
             const newFullNumber = this._getFullNumber(newValue);
             const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
             const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
-            let isChangingDialCode = false;
-            if (alreadyHasPlus) {
-              const currentCountry = this.selectedCountryData.iso2;
-              const newCountry = this._getCountryFromNumber(newFullNumber);
-              isChangingDialCode = newCountry !== currentCountry;
-            }
+            const newCountry = this._getNewCountryFromNumber(newFullNumber);
+            const isChangingDialCode = newCountry !== null;
             if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
               e.preventDefault();
             }
@@ -2498,16 +2494,45 @@ var Iti = class {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
     const normalisedQuery = normaliseString(query);
+    const queryLength = normalisedQuery.length;
+    const iso2Matches = [];
+    const nameStartWith = [];
+    const nameContains = [];
+    const dialCodeMatches = [];
+    const dialCodeContains = [];
+    const initialsMatches = [];
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const normalisedCountryName = normaliseString(c.name);
       const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-      const fullDialCode = `+${c.dialCode}`;
-      if (isReset || normalisedCountryName.includes(normalisedQuery) || fullDialCode.includes(normalisedQuery) || c.iso2.includes(normalisedQuery) || countryInitials.includes(normalisedQuery)) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-        }
+      if (isReset || queryLength === 0) {
+        nameContains.push(c);
+      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+        iso2Matches.push(c);
+      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+        nameStartWith.push(c);
+      } else if (normalisedCountryName.includes(normalisedQuery)) {
+        nameContains.push(c);
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+        dialCodeMatches.push(c);
+      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+        dialCodeContains.push(c);
+      } else if (countryInitials.includes(normalisedQuery)) {
+        initialsMatches.push(c);
+      }
+    }
+    const matchedCountries = [
+      ...iso2Matches.sort((a, b) => a.priority - b.priority),
+      ...nameStartWith.sort((a, b) => a.priority - b.priority),
+      ...nameContains.sort((a, b) => a.priority - b.priority),
+      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+      ...initialsMatches.sort((a, b) => a.priority - b.priority)
+    ];
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
         if (noCountriesAddedYet) {
           this._highlightListItem(listItem, false);
           noCountriesAddedYet = false;
@@ -2575,7 +2600,7 @@ var Iti = class {
   //* Check if need to select a new country based on the given number
   //* Note: called from _setInitialState, keyup handler, setNumber.
   _updateCountryFromNumber(fullNumber) {
-    const iso2 = this._getCountryFromNumber(fullNumber);
+    const iso2 = this._getNewCountryFromNumber(fullNumber);
     if (iso2 !== null) {
       return this._setCountry(iso2);
     }
@@ -2591,7 +2616,10 @@ var Iti = class {
     const cleanNumber = hasPrefix ? number.substring(1) : number;
     return `+${dialCode}${cleanNumber}`;
   }
-  _getCountryFromNumber(fullNumber) {
+  // Get the country ISO2 code from the given number
+  // BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
+  // NOTE: consider refactoring this to be more clear
+  _getNewCountryFromNumber(fullNumber) {
     const plusIndex = fullNumber.indexOf("+");
     let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
     const selectedIso2 = this.selectedCountryData.iso2;
@@ -2605,7 +2633,8 @@ var Iti = class {
       if (!selectedIso2 && this.defaultCountry && iso2Codes.includes(this.defaultCountry)) {
         return this.defaultCountry;
       }
-      const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && (numeric.length === dialCodeMatchNumeric.length || !this.selectedCountryData.areaCodes);
+      const hasAreaCodesButNoneMatched = this.selectedCountryData.areaCodes && numeric.length > dialCodeMatchNumeric.length;
+      const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && !hasAreaCodesButNoneMatched;
       const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
       if (!isRegionlessNanpNumber && !alreadySelected) {
         for (let j = 0; j < iso2Codes.length; j++) {
@@ -3173,7 +3202,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.4.7"
+    version: "25.5.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -2298,12 +2298,8 @@ var Iti = class {
             const newFullNumber = this._getFullNumber(newValue);
             const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
             const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
-            let isChangingDialCode = false;
-            if (alreadyHasPlus) {
-              const currentCountry = this.selectedCountryData.iso2;
-              const newCountry = this._getCountryFromNumber(newFullNumber);
-              isChangingDialCode = newCountry !== currentCountry;
-            }
+            const newCountry = this._getNewCountryFromNumber(newFullNumber);
+            const isChangingDialCode = newCountry !== null;
             if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
               e.preventDefault();
             }
@@ -2462,16 +2458,45 @@ var Iti = class {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
     const normalisedQuery = normaliseString(query);
+    const queryLength = normalisedQuery.length;
+    const iso2Matches = [];
+    const nameStartWith = [];
+    const nameContains = [];
+    const dialCodeMatches = [];
+    const dialCodeContains = [];
+    const initialsMatches = [];
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const normalisedCountryName = normaliseString(c.name);
       const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-      const fullDialCode = `+${c.dialCode}`;
-      if (isReset || normalisedCountryName.includes(normalisedQuery) || fullDialCode.includes(normalisedQuery) || c.iso2.includes(normalisedQuery) || countryInitials.includes(normalisedQuery)) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-        }
+      if (isReset || queryLength === 0) {
+        nameContains.push(c);
+      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+        iso2Matches.push(c);
+      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+        nameStartWith.push(c);
+      } else if (normalisedCountryName.includes(normalisedQuery)) {
+        nameContains.push(c);
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+        dialCodeMatches.push(c);
+      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+        dialCodeContains.push(c);
+      } else if (countryInitials.includes(normalisedQuery)) {
+        initialsMatches.push(c);
+      }
+    }
+    const matchedCountries = [
+      ...iso2Matches.sort((a, b) => a.priority - b.priority),
+      ...nameStartWith.sort((a, b) => a.priority - b.priority),
+      ...nameContains.sort((a, b) => a.priority - b.priority),
+      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+      ...initialsMatches.sort((a, b) => a.priority - b.priority)
+    ];
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
         if (noCountriesAddedYet) {
           this._highlightListItem(listItem, false);
           noCountriesAddedYet = false;
@@ -2539,7 +2564,7 @@ var Iti = class {
   //* Check if need to select a new country based on the given number
   //* Note: called from _setInitialState, keyup handler, setNumber.
   _updateCountryFromNumber(fullNumber) {
-    const iso2 = this._getCountryFromNumber(fullNumber);
+    const iso2 = this._getNewCountryFromNumber(fullNumber);
     if (iso2 !== null) {
       return this._setCountry(iso2);
     }
@@ -2555,7 +2580,10 @@ var Iti = class {
     const cleanNumber = hasPrefix ? number.substring(1) : number;
     return `+${dialCode}${cleanNumber}`;
   }
-  _getCountryFromNumber(fullNumber) {
+  // Get the country ISO2 code from the given number
+  // BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
+  // NOTE: consider refactoring this to be more clear
+  _getNewCountryFromNumber(fullNumber) {
     const plusIndex = fullNumber.indexOf("+");
     let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
     const selectedIso2 = this.selectedCountryData.iso2;
@@ -2569,7 +2597,8 @@ var Iti = class {
       if (!selectedIso2 && this.defaultCountry && iso2Codes.includes(this.defaultCountry)) {
         return this.defaultCountry;
       }
-      const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && (numeric.length === dialCodeMatchNumeric.length || !this.selectedCountryData.areaCodes);
+      const hasAreaCodesButNoneMatched = this.selectedCountryData.areaCodes && numeric.length > dialCodeMatchNumeric.length;
+      const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && !hasAreaCodesButNoneMatched;
       const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
       if (!isRegionlessNanpNumber && !alreadySelected) {
         for (let j = 0; j < iso2Codes.length; j++) {
@@ -3137,7 +3166,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.4.7"
+    version: "25.5.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/vue/README.md

@@ -34,7 +34,7 @@ See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master
 "vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
 ```
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.4.7/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.