Fix updating selected flag when typing area codes

jackocnr · Dec 7, 2024 · 1139404 · 1139404
1 parent d3bde3d
commit 1139404
Show file tree

Hide file tree

Showing 20 changed files with 1,053 additions and 684 deletions.
diff --git a/build/js/data.js b/build/js/data.js
@@ -1354,6 +1354,7 @@ var factoryOutput = (() => {
       dialCode: c[1],
       priority: c[2] || 0,
       areaCodes: c[3] || null,
+      partialAreaCodes: null,
       nodeById: {}
     };
   }

diff --git a/build/js/data.min.js b/build/js/data.min.js
diff --git a/build/js/intlTelInput.d.ts b/build/js/intlTelInput.d.ts
@@ -5,6 +5,7 @@ declare module "intl-tel-input/data" {
         dialCode: string;
         priority: number;
         areaCodes: string[] | null;
+        partialAreaCodes: string[] | null;
         nodeById: object;
     };
     const allCountries: Country[];
@@ -324,10 +325,12 @@ declare module "intl-tel-input" {
         numberType: object;
     };
     type NumberType = "FIXED_LINE_OR_MOBILE" | "FIXED_LINE" | "MOBILE" | "PAGER" | "PERSONAL_NUMBER" | "PREMIUM_RATE" | "SHARED_COST" | "TOLL_FREE" | "UAN" | "UNKNOWN" | "VOICEMAIL" | "VOIP";
-    type SelectedCountryData = Country | {
+    type SelectedCountryData = {
         name?: string;
         iso2?: string;
         dialCode?: string;
+        areaCodes?: string[];
+        partialAreaCodes?: string[];
     };
     interface AllOptions {
         allowDropdown: boolean;
@@ -438,6 +441,7 @@ declare module "intl-tel-input" {
         private _handleEnterKey;
         private _updateValFromNumber;
         private _updateCountryFromNumber;
+        private _isAreaCodeMatch;
         private _getCountryFromNumber;
         private _highlightListItem;
         private _getCountryData;

diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -1357,6 +1357,7 @@ var factoryOutput = (() => {
       dialCode: c[1],
       priority: c[2] || 0,
       areaCodes: c[3] || null,
+      partialAreaCodes: null,
       nodeById: {}
     };
   }
@@ -1881,7 +1882,7 @@ var factoryOutput = (() => {
         }
       }
     }
-    //* Generate this.dialCodes and this.dialCodeToIso2Map.
+    //* Generate this.dialCodes and this.dialCodeToIso2Map and country.partialAreaCodes.
     _processDialCodes() {
       this.dialCodes = {};
       this.dialCodeMaxLen = 0;
@@ -1900,9 +1901,16 @@ var factoryOutput = (() => {
           for (let j = 0; j < c.areaCodes.length; j++) {
             const areaCode = c.areaCodes[j];
             for (let k = 1; k < areaCode.length; k++) {
-              const partialDialCode = c.dialCode + areaCode.substr(0, k);
+              const partialAreaCode = areaCode.substr(0, k);
+              const partialDialCode = c.dialCode + partialAreaCode;
               this._addToDialCodeMap(rootIso2Code, partialDialCode);
               this._addToDialCodeMap(c.iso2, partialDialCode);
+              if (!c.partialAreaCodes) {
+                c.partialAreaCodes = [];
+              }
+              if (!c.partialAreaCodes.includes(partialAreaCode)) {
+                c.partialAreaCodes.push(partialAreaCode);
+              }
             }
             this._addToDialCodeMap(c.iso2, c.dialCode + areaCode);
           }
@@ -2560,6 +2568,19 @@ var factoryOutput = (() => {
       }
       return false;
     }
+    //* Check if the given number matches an area code from the selected country.
+    _isAreaCodeMatch(numeric, dialCodeNumerics) {
+      const { areaCodes, partialAreaCodes, dialCode } = this.selectedCountryData;
+      const typedNumber = numeric.substring(dialCode.length);
+      const typedAreaCode = dialCodeNumerics.substring(dialCode.length);
+      if (areaCodes.includes(typedAreaCode)) {
+        return true;
+      }
+      if (partialAreaCodes.includes(typedNumber)) {
+        return true;
+      }
+      return false;
+    }
     _getCountryFromNumber(fullNumber) {
       const plusIndex = fullNumber.indexOf("+");
       let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
@@ -2577,10 +2598,19 @@ var factoryOutput = (() => {
       const dialCode = this._getDialCode(number, true);
       const numeric = getNumeric(number);
       if (dialCode) {
-        const iso2Codes = this.dialCodeToIso2Map[getNumeric(dialCode)];
-        const alreadySelected = iso2Codes.indexOf(this.selectedCountryData.iso2) !== -1 && numeric.length <= dialCode.length - 1;
+        const dialCodeNumerics = getNumeric(dialCode);
+        const iso2Codes = this.dialCodeToIso2Map[dialCodeNumerics];
+        const alreadySelected = iso2Codes.includes(this.selectedCountryData.iso2);
+        let areaCodeMatch = false;
+        if (alreadySelected) {
+          if (this.selectedCountryData.areaCodes && numeric.length > selectedDialCode.length) {
+            areaCodeMatch = this._isAreaCodeMatch(numeric, dialCodeNumerics);
+          } else {
+            areaCodeMatch = true;
+          }
+        }
         const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
-        if (!isRegionlessNanpNumber && !alreadySelected) {
+        if (!isRegionlessNanpNumber && (!alreadySelected || !areaCodeMatch)) {
           for (let j = 0; j < iso2Codes.length; j++) {
             if (iso2Codes[j]) {
               return iso2Codes[j];

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/build/js/intlTelInputWithUtils.js b/build/js/intlTelInputWithUtils.js
@@ -1356,6 +1356,7 @@ var factoryOutput = (() => {
       dialCode: c[1],
       priority: c[2] || 0,
       areaCodes: c[3] || null,
+      partialAreaCodes: null,
       nodeById: {}
     };
   }
@@ -1880,7 +1881,7 @@ var factoryOutput = (() => {
         }
       }
     }
-    //* Generate this.dialCodes and this.dialCodeToIso2Map.
+    //* Generate this.dialCodes and this.dialCodeToIso2Map and country.partialAreaCodes.
     _processDialCodes() {
       this.dialCodes = {};
       this.dialCodeMaxLen = 0;
@@ -1899,9 +1900,16 @@ var factoryOutput = (() => {
           for (let j = 0; j < c.areaCodes.length; j++) {
             const areaCode = c.areaCodes[j];
             for (let k = 1; k < areaCode.length; k++) {
-              const partialDialCode = c.dialCode + areaCode.substr(0, k);
+              const partialAreaCode = areaCode.substr(0, k);
+              const partialDialCode = c.dialCode + partialAreaCode;
               this._addToDialCodeMap(rootIso2Code, partialDialCode);
               this._addToDialCodeMap(c.iso2, partialDialCode);
+              if (!c.partialAreaCodes) {
+                c.partialAreaCodes = [];
+              }
+              if (!c.partialAreaCodes.includes(partialAreaCode)) {
+                c.partialAreaCodes.push(partialAreaCode);
+              }
             }
             this._addToDialCodeMap(c.iso2, c.dialCode + areaCode);
           }
@@ -2559,6 +2567,19 @@ var factoryOutput = (() => {
       }
       return false;
     }
+    //* Check if the given number matches an area code from the selected country.
+    _isAreaCodeMatch(numeric, dialCodeNumerics) {
+      const { areaCodes, partialAreaCodes, dialCode } = this.selectedCountryData;
+      const typedNumber = numeric.substring(dialCode.length);
+      const typedAreaCode = dialCodeNumerics.substring(dialCode.length);
+      if (areaCodes.includes(typedAreaCode)) {
+        return true;
+      }
+      if (partialAreaCodes.includes(typedNumber)) {
+        return true;
+      }
+      return false;
+    }
     _getCountryFromNumber(fullNumber) {
       const plusIndex = fullNumber.indexOf("+");
       let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
@@ -2576,10 +2597,19 @@ var factoryOutput = (() => {
       const dialCode = this._getDialCode(number, true);
       const numeric = getNumeric(number);
       if (dialCode) {
-        const iso2Codes = this.dialCodeToIso2Map[getNumeric(dialCode)];
-        const alreadySelected = iso2Codes.indexOf(this.selectedCountryData.iso2) !== -1 && numeric.length <= dialCode.length - 1;
+        const dialCodeNumerics = getNumeric(dialCode);
+        const iso2Codes = this.dialCodeToIso2Map[dialCodeNumerics];
+        const alreadySelected = iso2Codes.includes(this.selectedCountryData.iso2);
+        let areaCodeMatch = false;
+        if (alreadySelected) {
+          if (this.selectedCountryData.areaCodes && numeric.length > selectedDialCode.length) {
+            areaCodeMatch = this._isAreaCodeMatch(numeric, dialCodeNumerics);
+          } else {
+            areaCodeMatch = true;
+          }
+        }
         const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
-        if (!isRegionlessNanpNumber && !alreadySelected) {
+        if (!isRegionlessNanpNumber && (!alreadySelected || !areaCodeMatch)) {
           for (let j = 0; j < iso2Codes.length; j++) {
             if (iso2Codes[j]) {
               return iso2Codes[j];

diff --git a/build/js/intlTelInputWithUtils.min.js b/build/js/intlTelInputWithUtils.min.js