intl-tel-input 27.0.0 → 27.0.2

package/dist/js/intlTelInputWithUtils.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v27.0.0
+ * International Telephone Input v27.0.2
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -300,7 +300,63 @@ var _factory = (() => {
       // Canada
       "1",
       1,
-      ["204", "226", "236", "249", "250", "257", "263", "289", "306", "343", "354", "365", "367", "368", "382", "403", "416", "418", "428", "431", "437", "438", "450", "468", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "683", "705", "709", "742", "753", "778", "780", "782", "807", "819", "825", "867", "873", "879", "902", "905", "942"],
+      [
+        "204",
+        "226",
+        "236",
+        "249",
+        "250",
+        "257",
+        "263",
+        "289",
+        "306",
+        "343",
+        "354",
+        "365",
+        "367",
+        "368",
+        "382",
+        "403",
+        "416",
+        "418",
+        "428",
+        "431",
+        "437",
+        "438",
+        "450",
+        "468",
+        "474",
+        "506",
+        "514",
+        "519",
+        "548",
+        "579",
+        "581",
+        "584",
+        "587",
+        "604",
+        "613",
+        "639",
+        "647",
+        "672",
+        "683",
+        "705",
+        "709",
+        "742",
+        "753",
+        "778",
+        "780",
+        "782",
+        "807",
+        "819",
+        "825",
+        "867",
+        "873",
+        "879",
+        "902",
+        "905",
+        "942"
+      ],
       "1"
     ],
     [
@@ -1959,9 +2015,10 @@ var _factory = (() => {
     console.warn(`[intl-tel-input] ${message}`);
   };
   var warnOption = (optionName, expectedType, actualValue) => {
-    warn(`Option '${optionName}' must be ${expectedType}; got ${toString(actualValue)}. Ignoring.`);
+    warn(
+      `Option '${optionName}' must be ${expectedType}; got ${toString(actualValue)}. Ignoring.`
+    );
   };
-  var hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
   var validateIso2Array = (key, value) => {
     const expectedType = "an array of ISO2 country code strings";
     if (!Array.isArray(value)) {
@@ -1994,7 +2051,7 @@ var _factory = (() => {
     }
     const validatedOptions = {};
     for (const [key, value] of Object.entries(customOptions)) {
-      if (!hasOwn(defaults, key)) {
+      if (!Object.hasOwn(defaults, key)) {
         warn(`Unknown option '${key}'. Ignoring.`);
         continue;
       }
@@ -2088,8 +2145,12 @@ var _factory = (() => {
             break;
           }
           const lower = value.toLowerCase();
-          if (lower && (lower !== INITIAL_COUNTRY.AUTO && !isIso2(lower))) {
-            warnOption("initialCountry", "a valid ISO2 country code or 'auto'", value);
+          if (lower && lower !== INITIAL_COUNTRY.AUTO && !isIso2(lower)) {
+            warnOption(
+              "initialCountry",
+              "a valid ISO2 country code or 'auto'",
+              value
+            );
             break;
           }
           validatedOptions[key] = value;
@@ -2106,14 +2167,22 @@ var _factory = (() => {
         case "allowedNumberTypes":
           if (value !== null) {
             if (!Array.isArray(value)) {
-              warnOption("allowedNumberTypes", "an array of number types or null", value);
+              warnOption(
+                "allowedNumberTypes",
+                "an array of number types or null",
+                value
+              );
               break;
             }
             let allValid = true;
             for (const v of value) {
               if (typeof v !== "string" || !NUMBER_TYPE_SET.has(v)) {
                 const validTypes = Array.from(NUMBER_TYPE_SET).join(", ");
-                warnOption("allowedNumberTypes", `an array of valid number types (${validTypes})`, v);
+                warnOption(
+                  "allowedNumberTypes",
+                  `an array of valid number types (${validTypes})`,
+                  v
+                );
                 allValid = false;
                 break;
               }
@@ -2282,6 +2351,7 @@ var _factory = (() => {
     #searchResultsA11yText;
     #dropdownForContainer;
     #selectedItem = null;
+    #viewportHandler = null;
     // public
     telInput;
     countryContainer;
@@ -2332,16 +2402,12 @@ var _factory = (() => {
       const wrapper = this.#createWrapperAndInsert();
       this.#maybeBuildCountryContainer(wrapper);
       wrapper.appendChild(this.telInput);
+      this.#maybeEnsureDropdownWidthSet();
       this.#maybeUpdateInputPaddingAndReveal();
       this.#maybeBuildHiddenInputs(wrapper);
     }
     #createWrapperAndInsert() {
-      const {
-        allowDropdown,
-        showFlags,
-        containerClass,
-        useFullscreenPopup
-      } = this.#options;
+      const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.#options;
       const parentClasses = buildClassNames({
         iti: true,
         "iti--allow-dropdown": allowDropdown,
@@ -2358,72 +2424,74 @@ var _factory = (() => {
     }
     #maybeBuildCountryContainer(wrapper) {
       const { allowDropdown, separateDialCode, showFlags } = this.#options;
-      if (allowDropdown || showFlags || separateDialCode) {
-        this.countryContainer = createEl(
-          "div",
-          // visibly hidden until we measure it's width to set the input padding correctly
-          { class: `iti__country-container ${CLASSES.V_HIDE}` },
-          wrapper
+      if (!allowDropdown && !showFlags && !separateDialCode) {
+        return;
+      }
+      this.countryContainer = createEl(
+        "div",
+        // visibly hidden until we measure its width to set the input padding correctly
+        { class: `iti__country-container ${CLASSES.V_HIDE}` },
+        wrapper
+      );
+      if (allowDropdown) {
+        this.selectedCountry = createEl(
+          "button",
+          {
+            type: "button",
+            class: "iti__selected-country",
+            [ARIA.EXPANDED]: "false",
+            [ARIA.LABEL]: this.#options.i18n.noCountrySelected,
+            [ARIA.HASPOPUP]: "dialog",
+            [ARIA.CONTROLS]: `iti-${this.#id}__dropdown-content`
+          },
+          this.countryContainer
         );
-        if (allowDropdown) {
-          this.selectedCountry = createEl(
-            "button",
-            {
-              type: "button",
-              class: "iti__selected-country",
-              [ARIA.EXPANDED]: "false",
-              [ARIA.LABEL]: this.#options.i18n.noCountrySelected,
-              [ARIA.HASPOPUP]: "dialog",
-              [ARIA.CONTROLS]: `iti-${this.#id}__dropdown-content`
-            },
-            this.countryContainer
-          );
-          if (this.telInput.disabled) {
-            this.selectedCountry.setAttribute("disabled", "true");
-          }
-        } else {
-          this.selectedCountry = createEl(
-            "div",
-            { class: "iti__selected-country" },
-            this.countryContainer
-          );
+        if (this.telInput.disabled) {
+          this.selectedCountry.setAttribute("disabled", "true");
         }
-        const selectedCountryPrimary = createEl(
+      } else {
+        this.selectedCountry = createEl(
           "div",
-          { class: "iti__selected-country-primary" },
-          this.selectedCountry
+          { class: "iti__selected-country" },
+          this.countryContainer
         );
-        this.selectedCountryInner = createEl(
+      }
+      const selectedCountryPrimary = createEl(
+        "div",
+        { class: "iti__selected-country-primary" },
+        this.selectedCountry
+      );
+      this.selectedCountryInner = createEl(
+        "div",
+        { class: CLASSES.FLAG },
+        selectedCountryPrimary
+      );
+      if (allowDropdown) {
+        this.#dropdownArrow = createEl(
           "div",
-          { class: CLASSES.FLAG },
+          { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
           selectedCountryPrimary
         );
-        if (allowDropdown) {
-          this.#dropdownArrow = createEl(
-            "div",
-            { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
-            selectedCountryPrimary
-          );
-        }
-        if (separateDialCode) {
-          this.#selectedDialCode = createEl(
-            "div",
-            { class: "iti__selected-dial-code" },
-            this.selectedCountry
-          );
-        }
-        if (allowDropdown) {
-          this.#buildDropdownContent();
-        }
+      }
+      if (separateDialCode) {
+        this.#selectedDialCode = createEl(
+          "div",
+          { class: "iti__selected-dial-code" },
+          this.selectedCountry
+        );
+      }
+      if (allowDropdown) {
+        this.#buildDropdownContent();
       }
     }
     #maybeEnsureDropdownWidthSet() {
-      const { fixDropdownWidth } = this.#options;
-      if (fixDropdownWidth && !this.#dropdownContent.style.width) {
-        const inputWidth = this.telInput.offsetWidth;
-        if (inputWidth > 0) {
-          this.#dropdownContent.style.width = `${inputWidth}px`;
-        }
+      const { fixDropdownWidth, allowDropdown } = this.#options;
+      if (!allowDropdown || !fixDropdownWidth || this.#dropdownContent.style.width) {
+        return;
+      }
+      const inputWidth = this.telInput.offsetWidth;
+      if (inputWidth > 0) {
+        this.#dropdownContent.style.width = `${inputWidth}px`;
       }
     }
     #buildDropdownContent() {
@@ -2463,7 +2531,6 @@ var _factory = (() => {
         this.#updateSearchResultsA11yText();
       }
       if (!useFullscreenPopup) {
-        this.#maybeEnsureDropdownWidthSet();
         this.#inlineDropdownHeight = this.#getHiddenInlineDropdownHeight();
         if (countrySearch) {
           this.#dropdownContent.style.height = `${this.#inlineDropdownHeight}px`;
@@ -2545,43 +2612,45 @@ var _factory = (() => {
       this.#searchNoResults.textContent = i18n.searchEmptyState ?? null;
     }
     #maybeUpdateInputPaddingAndReveal() {
-      if (this.countryContainer) {
-        this.#updateInputPadding();
-        this.countryContainer.classList.remove(CLASSES.V_HIDE);
+      if (!this.countryContainer) {
+        return;
       }
+      this.#updateInputPadding();
+      this.countryContainer.classList.remove(CLASSES.V_HIDE);
     }
     #maybeBuildHiddenInputs(wrapper) {
       const { hiddenInput } = this.#options;
-      if (hiddenInput) {
-        const telInputName = this.telInput.getAttribute("name") || "";
-        const names = hiddenInput(telInputName);
-        if (names.phone) {
-          const existingInput = this.telInput.form?.querySelector(
-            `input[name="${names.phone}"]`
-          );
-          if (existingInput) {
-            this.hiddenInputPhone = existingInput;
-          } else {
-            this.hiddenInputPhone = createEl("input", {
-              type: "hidden",
-              name: names.phone
-            });
-            wrapper.appendChild(this.hiddenInputPhone);
-          }
+      if (!hiddenInput) {
+        return;
+      }
+      const telInputName = this.telInput.getAttribute("name") || "";
+      const names = hiddenInput(telInputName);
+      if (names.phone) {
+        const existingInput = this.telInput.form?.querySelector(
+          `input[name="${names.phone}"]`
+        );
+        if (existingInput) {
+          this.hiddenInputPhone = existingInput;
+        } else {
+          this.hiddenInputPhone = createEl("input", {
+            type: "hidden",
+            name: names.phone
+          });
+          wrapper.appendChild(this.hiddenInputPhone);
         }
-        if (names.country) {
-          const existingInput = this.telInput.form?.querySelector(
-            `input[name="${names.country}"]`
-          );
-          if (existingInput) {
-            this.hiddenInputCountry = existingInput;
-          } else {
-            this.hiddenInputCountry = createEl("input", {
-              type: "hidden",
-              name: names.country
-            });
-            wrapper.appendChild(this.hiddenInputCountry);
-          }
+      }
+      if (names.country) {
+        const existingInput = this.telInput.form?.querySelector(
+          `input[name="${names.country}"]`
+        );
+        if (existingInput) {
+          this.hiddenInputCountry = existingInput;
+        } else {
+          this.hiddenInputCountry = createEl("input", {
+            type: "hidden",
+            name: names.country
+          });
+          wrapper.appendChild(this.hiddenInputCountry);
         }
       }
     }
@@ -2640,30 +2709,32 @@ var _factory = (() => {
     //* To get the right styling to apply, all we need is a shallow clone of the container,
     //* and then to inject a deep clone of the selectedCountry element.
     #getHiddenSelectedCountryWidth() {
-      if (this.telInput.parentNode) {
-        const body = _UI.#getBody();
-        const containerClone = this.telInput.parentNode.cloneNode(
-          false
-        );
-        containerClone.style.visibility = "hidden";
-        body.appendChild(containerClone);
-        const countryContainerClone = this.countryContainer.cloneNode();
-        containerClone.appendChild(countryContainerClone);
-        const selectedCountryClone = this.selectedCountry.cloneNode(
-          true
-        );
-        countryContainerClone.appendChild(selectedCountryClone);
-        const width = selectedCountryClone.offsetWidth;
-        body.removeChild(containerClone);
-        return width;
+      if (!this.telInput.parentNode) {
+        return 0;
       }
-      return 0;
+      const body = _UI.#getBody();
+      const containerClone = this.telInput.parentNode.cloneNode(
+        false
+      );
+      containerClone.style.visibility = "hidden";
+      body.appendChild(containerClone);
+      const countryContainerClone = this.countryContainer.cloneNode();
+      containerClone.appendChild(countryContainerClone);
+      const selectedCountryClone = this.selectedCountry.cloneNode(
+        true
+      );
+      countryContainerClone.appendChild(selectedCountryClone);
+      const width = selectedCountryClone.offsetWidth;
+      body.removeChild(containerClone);
+      return width;
     }
-    // this is run before we add the dropdown to the DOM
+    // Get the dropdown height (before it is added to the DOM)
     #getHiddenInlineDropdownHeight() {
       const body = _UI.#getBody();
       this.#dropdownContent.classList.remove(CLASSES.HIDE);
-      const tempContainer = createEl("div", { class: "iti iti--inline-dropdown" });
+      const tempContainer = createEl("div", {
+        class: "iti iti--inline-dropdown"
+      });
       tempContainer.appendChild(this.#dropdownContent);
       tempContainer.style.visibility = "hidden";
       body.appendChild(tempContainer);
@@ -2736,7 +2807,10 @@ var _factory = (() => {
         this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
         if (this.#options.countrySearch) {
           const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-          this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
+          this.searchInput.setAttribute(
+            ARIA.ACTIVE_DESCENDANT,
+            activeDescendant
+          );
         }
         if (shouldFocus) {
           this.highlightedItem.focus();
@@ -2817,11 +2891,7 @@ var _factory = (() => {
     }
     // UI: Open the dropdown (DOM only).
     openDropdown() {
-      const {
-        countrySearch,
-        dropdownAlwaysOpen,
-        dropdownContainer
-      } = this.#options;
+      const { countrySearch, dropdownAlwaysOpen, dropdownContainer } = this.#options;
       this.#maybeEnsureDropdownWidthSet();
       if (dropdownContainer) {
         this.#handleDropdownContainer();
@@ -2836,15 +2906,22 @@ var _factory = (() => {
       }
       this.#dropdownContent.classList.remove(CLASSES.HIDE);
       this.selectedCountry.setAttribute(ARIA.EXPANDED, "true");
-      if (countrySearch) {
-        const itemToHighlight = this.#selectedItem ?? this.countryList.firstElementChild;
-        if (itemToHighlight) {
-          this.highlightListItem(itemToHighlight, false);
-          this.scrollCountryListToItem(itemToHighlight);
-        }
-        if (!dropdownAlwaysOpen) {
-          this.searchInput.focus();
-        }
+      const itemToHighlight = this.#selectedItem ?? this.countryList.firstElementChild;
+      if (itemToHighlight) {
+        this.highlightListItem(itemToHighlight, false);
+        this.scrollCountryListToItem(itemToHighlight);
+      }
+      if (countrySearch && !dropdownAlwaysOpen) {
+        this.searchInput.focus();
+      }
+      if (this.#options.useFullscreenPopup && this.#dropdownForContainer && window.visualViewport) {
+        this.#viewportHandler = () => {
+          this.#adjustFullscreenPopupToViewport();
+          if (this.highlightedItem) {
+            this.scrollCountryListToItem(this.highlightedItem);
+          }
+        };
+        window.visualViewport.addEventListener("resize", this.#viewportHandler);
       }
       this.#dropdownArrow.classList.add(CLASSES.ARROW_UP);
     }
@@ -2863,6 +2940,13 @@ var _factory = (() => {
         }
       }
       this.#dropdownArrow.classList.remove(CLASSES.ARROW_UP);
+      if (this.#viewportHandler && window.visualViewport) {
+        window.visualViewport.removeEventListener(
+          "resize",
+          this.#viewportHandler
+        );
+        this.#viewportHandler = null;
+      }
       if (dropdownContainer) {
         this.#dropdownForContainer.remove();
         this.#dropdownForContainer.style.top = "";
@@ -2905,6 +2989,16 @@ var _factory = (() => {
       }
       dropdownContainer.appendChild(this.#dropdownForContainer);
     }
+    // Adjust the fullscreen popup dimensions to match the visual viewport,
+    // so it stays above the virtual keyboard on mobile devices.
+    #adjustFullscreenPopupToViewport() {
+      const vv = window.visualViewport;
+      if (!vv || !this.#dropdownForContainer) {
+        return;
+      }
+      const virtualKeyboardHeight = window.innerHeight - vv.height;
+      this.#dropdownForContainer.style.bottom = `${virtualKeyboardHeight}px`;
+    }
     // UI: Whether the dropdown is currently closed (hidden).
     isDropdownClosed() {
       return this.#dropdownContent.classList.contains(CLASSES.HIDE);
@@ -2954,7 +3048,7 @@ var _factory = (() => {
         (country) => !excludeCountries.includes(country.iso2)
       );
     }
-    return data_default;
+    return [...data_default];
   };
   var generateCountryNames = (countries, options) => {
     const { countryNameLocale, i18n } = options;
@@ -2987,7 +3081,7 @@ var _factory = (() => {
       if (dialCode.length > dialCodeMaxLen) {
         dialCodeMaxLen = dialCode.length;
       }
-      if (!dialCodeToIso2Map.hasOwnProperty(dialCode)) {
+      if (!Object.hasOwn(dialCodeToIso2Map, dialCode)) {
         dialCodeToIso2Map[dialCode] = [];
       }
       const iso2List = dialCodeToIso2Map[dialCode];
@@ -2996,7 +3090,9 @@ var _factory = (() => {
       }
       iso2List.push(iso2);
     };
-    const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
+    const countriesSortedByPriority = [...countries].sort(
+      (a, b) => a.priority - b.priority
+    );
     for (const c of countriesSortedByPriority) {
       if (!dialCodes.has(c.dialCode)) {
         dialCodes.add(c.dialCode);
@@ -3065,15 +3161,12 @@ var _factory = (() => {
 
   // src/js/format/formatting.ts
   var beforeSetNumber = (fullNumber, hasValidDialCode, separateDialCode, selectedCountryData) => {
-    let number = fullNumber;
-    if (separateDialCode) {
-      if (hasValidDialCode) {
-        const dialCode = `+${selectedCountryData.dialCode}`;
-        const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
-        number = number.substring(start);
-      }
+    if (!separateDialCode || !hasValidDialCode) {
+      return fullNumber;
     }
-    return number;
+    const dialCode = `+${selectedCountryData.dialCode}`;
+    const start = fullNumber[dialCode.length] === " " || fullNumber[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
+    return fullNumber.substring(start);
   };
   var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) => {
     const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData?.iso2) : fullNumber;
@@ -3172,7 +3265,10 @@ var _factory = (() => {
       }
       const base = this.#userNumeralSet === "arabic-indic" ? 1632 : 1776;
       const regex = this.#userNumeralSet === "arabic-indic" ? /[\u0660-\u0669]/g : /[\u06F0-\u06F9]/g;
-      return str.replace(regex, (ch) => String.fromCharCode(48 + (ch.charCodeAt(0) - base)));
+      return str.replace(
+        regex,
+        (ch) => String.fromCharCode(48 + (ch.charCodeAt(0) - base))
+      );
     }
     isAscii() {
       return !this.#userNumeralSet || this.#userNumeralSet === "ascii";
@@ -3183,7 +3279,9 @@ var _factory = (() => {
   var id = 0;
   var ensureUtils = (methodName) => {
     if (!intlTelInput.utils) {
-      throw new Error(`intlTelInput.utils is required for ${methodName}(). See: https://intl-tel-input.com/docs/utils`);
+      throw new Error(
+        `intlTelInput.utils is required for ${methodName}(). See: https://intl-tel-input.com/docs/utils`
+      );
     }
   };
   var createDeferred = () => {
@@ -3338,9 +3436,13 @@ var _factory = (() => {
           this.#ui.hiddenInputCountry.value = this.#selectedCountryData?.iso2 || "";
         }
       };
-      this.#ui.telInput.form?.addEventListener("submit", handleHiddenInputSubmit, {
-        signal: this.#abortController.signal
-      });
+      this.#ui.telInput.form?.addEventListener(
+        "submit",
+        handleHiddenInputSubmit,
+        {
+          signal: this.#abortController.signal
+        }
+      );
     }
     //* initialise the dropdown listeners.
     #initDropdownListeners() {
@@ -3369,7 +3471,12 @@ var _factory = (() => {
         }
       );
       const handleCountryContainerKeydown = (e) => {
-        const allowedKeys = [KEYS.ARROW_UP, KEYS.ARROW_DOWN, KEYS.SPACE, KEYS.ENTER];
+        const allowedKeys = [
+          KEYS.ARROW_UP,
+          KEYS.ARROW_DOWN,
+          KEYS.SPACE,
+          KEYS.ENTER
+        ];
         if (this.#ui.isDropdownClosed() && allowedKeys.includes(e.key)) {
           e.preventDefault();
           e.stopPropagation();
@@ -3387,8 +3494,8 @@ var _factory = (() => {
     }
     //* Init requests: utils script / geo ip lookup.
     #initRequests() {
-      const { loadUtils, initialCountry, geoIpLookup } = this.#options;
-      if (loadUtils && !intlTelInput.utils) {
+      if (this.#utilsScriptDeferred) {
+        const { loadUtils } = this.#options;
         const doAttachUtils = () => {
           intlTelInput.attachUtils(loadUtils)?.catch(() => {
           });
@@ -3400,13 +3507,10 @@ var _factory = (() => {
             signal: this.#abortController.signal
           });
         }
-      } else {
-        this.#utilsScriptDeferred?.resolve();
       }
-      const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
-      if (isAutoCountry) {
+      if (this.#autoCountryDeferred) {
         if (this.#selectedCountryData) {
-          this.#autoCountryDeferred?.resolve();
+          this.#autoCountryDeferred.resolve();
         } else {
           this.#loadAutoCountry();
         }
@@ -3416,28 +3520,29 @@ var _factory = (() => {
     #loadAutoCountry() {
       if (intlTelInput.autoCountry) {
         this.#handleAutoCountry();
-      } else {
-        this.#ui.selectedCountryInner.classList.add(CLASSES.LOADING);
-        if (!intlTelInput.startedLoadingAutoCountry) {
-          intlTelInput.startedLoadingAutoCountry = true;
-          if (typeof this.#options.geoIpLookup === "function") {
-            const successCallback = (iso2 = "") => {
-              this.#ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
-              const iso2Lower = iso2.toLowerCase();
-              if (isIso2(iso2Lower)) {
-                intlTelInput.autoCountry = iso2Lower;
-                setTimeout(() => _Iti.forEachInstance("handleAutoCountry"));
-              } else {
-                _Iti.forEachInstance("handleAutoCountryFailure");
-              }
-            };
-            const failureCallback = () => {
-              this.#ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
-              _Iti.forEachInstance("handleAutoCountryFailure");
-            };
-            this.#options.geoIpLookup(successCallback, failureCallback);
+        return;
+      }
+      this.#ui.selectedCountryInner.classList.add(CLASSES.LOADING);
+      if (intlTelInput.startedLoadingAutoCountry) {
+        return;
+      }
+      intlTelInput.startedLoadingAutoCountry = true;
+      if (typeof this.#options.geoIpLookup === "function") {
+        const successCallback = (iso2 = "") => {
+          this.#ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
+          const iso2Lower = iso2.toLowerCase();
+          if (isIso2(iso2Lower)) {
+            intlTelInput.autoCountry = iso2Lower;
+            setTimeout(() => _Iti.forEachInstance("handleAutoCountry"));
+          } else {
+            _Iti.forEachInstance("handleAutoCountryFailure");
           }
-        }
+        };
+        const failureCallback = () => {
+          this.#ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
+          _Iti.forEachInstance("handleAutoCountryFailure");
+        };
+        this.#options.geoIpLookup(successCallback, failureCallback);
       }
     }
     #openDropdownWithPlus() {
@@ -3487,10 +3592,7 @@ var _factory = (() => {
         const isAscii = this.#numerals.isAscii();
         if (formatAsYouType && !userOverrideFormatting && !isSetNumber && isAscii) {
           const currentCaretPos = this.#ui.telInput.selectionStart || 0;
-          const valueBeforeCaret = inputValue.substring(
-            0,
-            currentCaretPos
-          );
+          const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
           const relevantCharsBeforeCaret = valueBeforeCaret.replace(
             REGEX.NON_PLUS_NUMERIC_GLOBAL,
             ""
@@ -3533,96 +3635,100 @@ var _factory = (() => {
     }
     #maybeBindKeydownListener() {
       const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
-      if (strictMode || separateDialCode) {
-        const handleKeydownEvent = (e) => {
-          if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-            if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
-              e.preventDefault();
-              this.#openDropdownWithPlus();
-              return;
-            }
-            if (strictMode) {
-              const inputValue = this.#getTelInputValue();
-              const alreadyHasPlus = inputValue.startsWith("+");
-              const isInitialPlus = !alreadyHasPlus && this.#ui.telInput.selectionStart === 0 && e.key === "+";
-              const normalisedKey = this.#numerals.normalise(e.key);
-              const isNumeric = /^[0-9]$/.test(normalisedKey);
-              const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-              const input = this.#ui.telInput;
-              const selStart = input.selectionStart;
-              const selEnd = input.selectionEnd;
-              const before = inputValue.slice(0, selStart ?? void 0);
-              const after = inputValue.slice(selEnd ?? void 0);
-              const newValue = before + e.key + after;
-              const newFullNumber = this.#getFullNumber(newValue);
-              let hasExceededMaxLength = false;
-              if (intlTelInput.utils && this.#maxCoreNumberLength) {
-                const coreNumber = intlTelInput.utils.getCoreNumber(
-                  newFullNumber,
-                  this.#selectedCountryData?.iso2
-                );
-                hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
-              }
-              const newCountry = this.#getNewCountryFromNumber(newFullNumber);
-              const isChangingDialCode = newCountry !== null;
-              if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
-                e.preventDefault();
-              }
-            }
-          }
-        };
-        this.#ui.telInput.addEventListener("keydown", handleKeydownEvent, {
-          signal: this.#abortController.signal
-        });
+      if (!strictMode && !separateDialCode) {
+        return;
       }
+      const handleKeydownEvent = (e) => {
+        if (!e.key || e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) {
+          return;
+        }
+        if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
+          e.preventDefault();
+          this.#openDropdownWithPlus();
+          return;
+        }
+        if (!strictMode) {
+          return;
+        }
+        const inputValue = this.#getTelInputValue();
+        const alreadyHasPlus = inputValue.startsWith("+");
+        const isInitialPlus = !alreadyHasPlus && this.#ui.telInput.selectionStart === 0 && e.key === "+";
+        const normalisedKey = this.#numerals.normalise(e.key);
+        const isNumeric = /^[0-9]$/.test(normalisedKey);
+        const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
+        const input = this.#ui.telInput;
+        const selStart = input.selectionStart;
+        const selEnd = input.selectionEnd;
+        const before = inputValue.slice(0, selStart ?? void 0);
+        const after = inputValue.slice(selEnd ?? void 0);
+        const newValue = before + e.key + after;
+        const newFullNumber = this.#getFullNumber(newValue);
+        let hasExceededMaxLength = false;
+        if (intlTelInput.utils && this.#maxCoreNumberLength) {
+          const coreNumber = intlTelInput.utils.getCoreNumber(
+            newFullNumber,
+            this.#selectedCountryData?.iso2
+          );
+          hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
+        }
+        const newCountry = this.#getNewCountryFromNumber(newFullNumber);
+        const isChangingDialCode = newCountry !== null;
+        if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
+          e.preventDefault();
+        }
+      };
+      this.#ui.telInput.addEventListener("keydown", handleKeydownEvent, {
+        signal: this.#abortController.signal
+      });
     }
     #maybeBindPasteListener() {
-      if (this.#options.strictMode) {
-        const handlePasteEvent = (e) => {
-          e.preventDefault();
-          const input = this.#ui.telInput;
-          const selStart = input.selectionStart;
-          const selEnd = input.selectionEnd;
-          const inputValue = this.#getTelInputValue();
-          const before = inputValue.slice(0, selStart ?? void 0);
-          const after = inputValue.slice(selEnd ?? void 0);
-          const iso2 = this.#selectedCountryData?.iso2;
-          const pastedRaw = e.clipboardData.getData("text");
-          const pasted = this.#numerals.normalise(pastedRaw);
-          const initialCharSelected = selStart === 0 && selEnd > 0;
-          const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
-          const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
-          const hasLeadingPlus = allowedChars.startsWith("+");
-          const numerics = allowedChars.replace(/\+/g, "");
-          const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
-          let newVal = before + sanitised + after;
-          if (newVal.length > 5 && intlTelInput.utils) {
-            let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
-            while (coreNumber.length === 0 && newVal.length > 0) {
-              newVal = newVal.slice(0, -1);
-              coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
-            }
-            if (!coreNumber) {
+      if (!this.#options.strictMode) {
+        return;
+      }
+      const handlePasteEvent = (e) => {
+        e.preventDefault();
+        const input = this.#ui.telInput;
+        const selStart = input.selectionStart;
+        const selEnd = input.selectionEnd;
+        const inputValue = this.#getTelInputValue();
+        const before = inputValue.slice(0, selStart ?? void 0);
+        const after = inputValue.slice(selEnd ?? void 0);
+        const iso2 = this.#selectedCountryData?.iso2;
+        const pastedRaw = e.clipboardData.getData("text");
+        const pasted = this.#numerals.normalise(pastedRaw);
+        const initialCharSelected = selStart === 0 && selEnd > 0;
+        const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
+        const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
+        const hasLeadingPlus = allowedChars.startsWith("+");
+        const numerics = allowedChars.replace(/\+/g, "");
+        const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
+        let newVal = before + sanitised + after;
+        if (newVal.length > 5 && intlTelInput.utils) {
+          let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
+          while (coreNumber.length === 0 && newVal.length > 0) {
+            newVal = newVal.slice(0, -1);
+            coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
+          }
+          if (!coreNumber) {
+            return;
+          }
+          if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
+            if (input.selectionEnd === inputValue.length) {
+              const trimLength = coreNumber.length - this.#maxCoreNumberLength;
+              newVal = newVal.slice(0, newVal.length - trimLength);
+            } else {
               return;
             }
-            if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
-              if (input.selectionEnd === inputValue.length) {
-                const trimLength = coreNumber.length - this.#maxCoreNumberLength;
-                newVal = newVal.slice(0, newVal.length - trimLength);
-              } else {
-                return;
-              }
-            }
           }
-          this.#setTelInputValue(newVal);
-          const caretPos = selStart + sanitised.length;
-          input.setSelectionRange(caretPos, caretPos);
-          input.dispatchEvent(new InputEvent("input", { bubbles: true }));
-        };
-        this.#ui.telInput.addEventListener("paste", handlePasteEvent, {
-          signal: this.#abortController.signal
-        });
-      }
+        }
+        this.#setTelInputValue(newVal);
+        const caretPos = selStart + sanitised.length;
+        input.setSelectionRange(caretPos, caretPos);
+        input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      };
+      this.#ui.telInput.addEventListener("paste", handlePasteEvent, {
+        signal: this.#abortController.signal
+      });
     }
     //* Adhere to the input's maxlength attr.
     #cap(number) {
@@ -3829,7 +3935,7 @@ var _factory = (() => {
     //* Get the new country based on the input number, or return null if no change, or empty string if should be empty (e.g. if they type an invalid dial code).
     #getNewCountryFromNumber(fullNumber) {
       const plusIndex = fullNumber.indexOf("+");
-      let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
+      let number = plusIndex > 0 ? fullNumber.substring(plusIndex) : fullNumber;
       const selectedIso2 = this.#selectedCountryData?.iso2;
       const selectedDialCode = this.#selectedCountryData?.dialCode;
       number = this.#ensureHasDialCode(number);
@@ -3897,33 +4003,34 @@ var _factory = (() => {
     //* Update the maximum valid number length for the currently selected country.
     #updateMaxLength() {
       const { strictMode, placeholderNumberType, allowedNumberTypes } = this.#options;
+      if (!strictMode || !intlTelInput.utils) {
+        return;
+      }
       const iso2 = this.#selectedCountryData?.iso2;
-      if (strictMode && intlTelInput.utils) {
-        if (iso2) {
-          const numberType = intlTelInput.utils.numberType[placeholderNumberType];
-          let exampleNumber = intlTelInput.utils.getExampleNumber(
-            iso2,
-            false,
-            numberType,
-            true
-          );
-          let validNumber = exampleNumber;
-          while (intlTelInput.utils.isPossibleNumber(
-            exampleNumber,
-            iso2,
-            allowedNumberTypes
-          )) {
-            validNumber = exampleNumber;
-            exampleNumber += "0";
-          }
-          const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
-          this.#maxCoreNumberLength = coreNumber.length;
-          if (iso2 === "by") {
-            this.#maxCoreNumberLength = coreNumber.length + 1;
-          }
-        } else {
-          this.#maxCoreNumberLength = null;
-        }
+      if (!iso2) {
+        this.#maxCoreNumberLength = null;
+        return;
+      }
+      const numberType = intlTelInput.utils.numberType[placeholderNumberType];
+      let exampleNumber = intlTelInput.utils.getExampleNumber(
+        iso2,
+        false,
+        numberType,
+        true
+      );
+      let validNumber = exampleNumber;
+      while (intlTelInput.utils.isPossibleNumber(
+        exampleNumber,
+        iso2,
+        allowedNumberTypes
+      )) {
+        validNumber = exampleNumber;
+        exampleNumber += "0";
+      }
+      const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
+      this.#maxCoreNumberLength = coreNumber.length;
+      if (iso2 === "by") {
+        this.#maxCoreNumberLength = coreNumber.length + 1;
       }
     }
     //* Update the input placeholder to an example number from the currently selected country.
@@ -3935,19 +4042,20 @@ var _factory = (() => {
         customPlaceholder
       } = this.#options;
       const shouldSetPlaceholder = autoPlaceholder === PLACEHOLDER_MODES.AGGRESSIVE || !this.#ui.hadInitialPlaceholder && autoPlaceholder === PLACEHOLDER_MODES.POLITE;
-      if (intlTelInput.utils && shouldSetPlaceholder) {
-        const numberType = intlTelInput.utils.numberType[placeholderNumberType];
-        let placeholder = this.#selectedCountryData ? intlTelInput.utils.getExampleNumber(
-          this.#selectedCountryData.iso2,
-          nationalMode,
-          numberType
-        ) : "";
-        placeholder = this.#beforeSetNumber(placeholder);
-        if (typeof customPlaceholder === "function") {
-          placeholder = customPlaceholder(placeholder, this.#selectedCountryData);
-        }
-        this.#ui.telInput.setAttribute("placeholder", placeholder);
+      if (!intlTelInput.utils || !shouldSetPlaceholder) {
+        return;
+      }
+      const numberType = intlTelInput.utils.numberType[placeholderNumberType];
+      let placeholder = this.#selectedCountryData ? intlTelInput.utils.getExampleNumber(
+        this.#selectedCountryData.iso2,
+        nationalMode,
+        numberType
+      ) : "";
+      placeholder = this.#beforeSetNumber(placeholder);
+      if (typeof customPlaceholder === "function") {
+        placeholder = customPlaceholder(placeholder, this.#selectedCountryData);
       }
+      this.#ui.telInput.setAttribute("placeholder", placeholder);
     }
     //* Called when the user selects a list item from the dropdown.
     #selectListItem(listItem) {
@@ -3979,46 +4087,49 @@ var _factory = (() => {
     //* Note: called from _selectListItem and setCountry
     #updateDialCode(newDialCodeBare) {
       const inputVal = this.#getTelInputValue();
+      if (!inputVal.startsWith("+")) {
+        return;
+      }
       const newDialCode = `+${newDialCodeBare}`;
+      const prevDialCode = this.#getDialCode(inputVal);
       let newNumber;
-      if (inputVal.startsWith("+")) {
-        const prevDialCode = this.#getDialCode(inputVal);
-        if (prevDialCode) {
-          newNumber = inputVal.replace(prevDialCode, newDialCode);
-        } else {
-          newNumber = newDialCode;
-        }
-        this.#setTelInputValue(newNumber);
+      if (prevDialCode) {
+        newNumber = inputVal.replace(prevDialCode, newDialCode);
+      } else {
+        newNumber = newDialCode;
       }
+      this.#setTelInputValue(newNumber);
     }
     //* Try and extract a valid international dial code from a full telephone number.
     //* Note: returns the raw string inc plus character and any whitespace/dots etc.
     #getDialCode(number, includeAreaCode) {
+      if (!number.startsWith("+")) {
+        return "";
+      }
       let dialCode = "";
-      if (number.startsWith("+")) {
-        let numericChars = "";
-        let foundBaseDialCode = false;
-        for (let i = 0; i < number.length; i++) {
-          const c = number.charAt(i);
-          if (/[0-9]/.test(c)) {
-            numericChars += c;
-            const hasMapEntry = Boolean(this.#dialCodeToIso2Map[numericChars]);
-            if (!hasMapEntry) {
-              break;
-            }
-            if (this.#dialCodes.has(numericChars)) {
-              dialCode = number.substring(0, i + 1);
-              foundBaseDialCode = true;
-              if (!includeAreaCode) {
-                break;
-              }
-            } else if (includeAreaCode && foundBaseDialCode) {
-              dialCode = number.substring(0, i + 1);
-            }
-            if (numericChars.length === this.#dialCodeMaxLen) {
-              break;
-            }
+      let numericChars = "";
+      let foundBaseDialCode = false;
+      for (let i = 0; i < number.length; i++) {
+        const c = number.charAt(i);
+        if (!/[0-9]/.test(c)) {
+          continue;
+        }
+        numericChars += c;
+        const hasMapEntry = Boolean(this.#dialCodeToIso2Map[numericChars]);
+        if (!hasMapEntry) {
+          break;
+        }
+        if (this.#dialCodes.has(numericChars)) {
+          dialCode = number.substring(0, i + 1);
+          foundBaseDialCode = true;
+          if (!includeAreaCode) {
+            break;
           }
+        } else if (includeAreaCode && foundBaseDialCode) {
+          dialCode = number.substring(0, i + 1);
+        }
+        if (numericChars.length === this.#dialCodeMaxLen) {
+          break;
         }
       }
       return dialCode;
@@ -4066,18 +4177,19 @@ var _factory = (() => {
     //**************************
     //* Called when the geoip call returns.
     #handleAutoCountry() {
+      if (!this.#autoCountryDeferred || !intlTelInput.autoCountry) {
+        return;
+      }
       if (this.#destroyed) {
-        this.#autoCountryDeferred?.resolve();
+        this.#autoCountryDeferred.resolve();
         return;
       }
-      if (this.#options.initialCountry === INITIAL_COUNTRY.AUTO && intlTelInput.autoCountry) {
-        this.#defaultCountry = intlTelInput.autoCountry;
-        const hasSelectedCountryOrGlobe = this.#selectedCountryData || this.#ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
-        if (!hasSelectedCountryOrGlobe) {
-          this.setCountry(this.#defaultCountry);
-        }
-        this.#autoCountryDeferred?.resolve();
+      this.#defaultCountry = intlTelInput.autoCountry;
+      const hasSelectedCountryOrGlobe = this.#selectedCountryData || this.#ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
+      if (!hasSelectedCountryOrGlobe) {
+        this.setCountry(this.#defaultCountry);
       }
+      this.#autoCountryDeferred.resolve();
     }
     //* Called when the geoip call fails or times out.
     #handleAutoCountryFailure() {
@@ -4094,15 +4206,17 @@ var _factory = (() => {
         this.#utilsScriptDeferred?.resolve();
         return;
       }
-      if (intlTelInput.utils) {
-        const inputValue = this.#getTelInputValue();
-        if (inputValue) {
-          this.#updateValFromNumber(inputValue);
-        }
-        if (this.#selectedCountryData) {
-          this.#updatePlaceholder();
-          this.#updateMaxLength();
-        }
+      if (!intlTelInput.utils) {
+        this.#utilsScriptDeferred?.resolve();
+        return;
+      }
+      const inputValue = this.#getTelInputValue();
+      if (inputValue) {
+        this.#updateValFromNumber(inputValue);
+      }
+      if (this.#selectedCountryData) {
+        this.#updatePlaceholder();
+        this.#updateMaxLength();
       }
       this.#utilsScriptDeferred?.resolve();
     }
@@ -4244,7 +4358,9 @@ var _factory = (() => {
       const hasAlphaChar = alphaCharPosition > -1;
       if (hasAlphaChar) {
         const selectedIso2 = this.#selectedCountryData?.iso2;
-        const hasExtension = Boolean(intlTelInput.utils.getExtension(val, selectedIso2));
+        const hasExtension = Boolean(
+          intlTelInput.utils.getExtension(val, selectedIso2)
+        );
         if (hasExtension) {
           return allowNumberExtensions;
         }
@@ -4270,15 +4386,16 @@ var _factory = (() => {
       }
       const currentCountry = this.#selectedCountryData?.iso2;
       const isCountryChange = iso2 && iso2Lower !== currentCountry || !iso2 && currentCountry;
-      if (isCountryChange) {
-        this.#setCountry(iso2Lower);
-        this.#updateDialCode(this.#selectedCountryData?.dialCode || "");
-        if (this.#options.formatOnDisplay) {
-          const inputValue = this.#getTelInputValue();
-          this.#updateValFromNumber(inputValue);
-        }
-        this.#triggerCountryChange();
+      if (!isCountryChange) {
+        return;
+      }
+      this.#setCountry(iso2Lower);
+      this.#updateDialCode(this.#selectedCountryData?.dialCode || "");
+      if (this.#options.formatOnDisplay) {
+        const inputValue = this.#getTelInputValue();
+        this.#updateValFromNumber(inputValue);
       }
+      this.#triggerCountryChange();
     }
     //* Set the input value and update the country.
     setNumber(number) {
@@ -4416,7 +4533,7 @@ var _factory = (() => {
       attachUtils,
       startedLoadingUtilsScript: false,
       startedLoadingAutoCountry: false,
-      version: "27.0.0"
+      version: "27.0.2"
     }
   );
   var intl_tel_input_default = intlTelInput;