intl-tel-input 27.0.17 → 27.1.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 See the Github Releases page for changelog: https://github.com/jackocnr/intl-tel-input/releases
 
-Or to view a specific version, e.g. v27.0.17, update the URL accordingly, e.g. https://github.com/jackocnr/intl-tel-input/releases/tag/v27.0.17
+Or to view a specific version, e.g. v27.1.1, update the URL accordingly, e.g. https://github.com/jackocnr/intl-tel-input/releases/tag/v27.1.1
 
 ## Breaking changes
 

package/angular/dist/IntlTelInput.d.ts

@@ -58,7 +58,6 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     private lastEmittedValidity?;
     private lastEmittedErrorCode?;
     private pendingWriteValue?;
-    private countryChangeHandler;
     private onChange;
     private onTouched;
     private onValidatorChange;

package/angular/dist/IntlTelInput.js

@@ -1758,8 +1758,9 @@ var EVENTS = {
   OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
   CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
   COUNTRY_CHANGE: "countrychange",
-  INPUT: "input"
+  INPUT: "input",
   // used for synthetic input trigger
+  STRICT_REJECT: "strict:reject"
 };
 var CLASSES = {
   HIDE: "iti__hide",
@@ -2355,6 +2356,7 @@ var UI = class _UI {
     wrapper.appendChild(this.telInputEl);
     this.#updateInputPaddingAndReveal();
     this.#buildHiddenInputs(wrapper);
+    this.ensureDropdownWidthSet();
   }
   #createWrapperAndInsert() {
     const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.#options;
@@ -2712,8 +2714,11 @@ var UI = class _UI {
   }
   //* Pre-fill the search input with "+" and show all countries
   //* (used when user types "+" in the phone input to open the dropdown).
+  //* Explicitly focus the search input (openDropdown skips this when
+  //* dropdownAlwaysOpen, but here we need focus to redirect subsequent keystrokes).
   prefillSearchWithPlus() {
     this.#searchInputEl.value = "+";
+    this.#searchInputEl.focus();
     this.#filterCountriesByQuery("");
   }
   // Search input handlers
@@ -2753,24 +2758,23 @@ var UI = class _UI {
     }
   }
   //* Remove highlighting from the previous list item and highlight the new one.
-  #highlightListItem(listItem, shouldFocus) {
-    const prevItem = this.#highlightedListItemEl;
-    if (prevItem) {
-      prevItem.classList.remove(CLASSES.HIGHLIGHT);
-    }
-    this.#highlightedListItemEl = listItem;
-    if (this.#highlightedListItemEl) {
-      this.#highlightedListItemEl.classList.add(CLASSES.HIGHLIGHT);
+  #highlightListItem(listItem, doScroll = true) {
+    this.#highlightedListItemEl?.classList.remove(CLASSES.HIGHLIGHT);
+    if (listItem) {
+      listItem.classList.add(CLASSES.HIGHLIGHT);
       if (this.#options.countrySearch) {
-        const activeDescendant = this.#highlightedListItemEl.getAttribute("id") || "";
+        const activeDescendant = listItem.getAttribute("id") || "";
         this.#searchInputEl.setAttribute(
           ARIA.ACTIVE_DESCENDANT,
           activeDescendant
         );
       }
-      if (shouldFocus) {
-        this.#highlightedListItemEl.focus();
+      if (doScroll) {
+        this.#scrollCountryListToItem(listItem);
       }
+      this.#highlightedListItemEl = listItem;
+    } else {
+      this.#highlightedListItemEl = null;
     }
   }
   //* Bind a form-submit listener that syncs the hidden inputs with the current phone number
@@ -2861,8 +2865,7 @@ var UI = class _UI {
     this.#selectedCountryEl.setAttribute(ARIA.EXPANDED, "true");
     const itemToHighlight = this.#selectedListItemEl ?? this.#countryListEl.firstElementChild;
     if (itemToHighlight) {
-      this.#highlightListItem(itemToHighlight, false);
-      this.#scrollCountryListToItem(itemToHighlight);
+      this.#highlightListItem(itemToHighlight);
     }
     if (countrySearch && !dropdownAlwaysOpen) {
       this.#searchInputEl.focus();
@@ -3003,8 +3006,7 @@ var UI = class _UI {
     const match = findFirstCountryStartingWith(this.#countries, query);
     if (match) {
       const listItem = this.#listItemByIso2.get(match.iso2);
-      this.#highlightListItem(listItem, false);
-      this.#scrollCountryListToItem(listItem);
+      this.#highlightListItem(listItem);
     }
   }
   //* Highlight the next/prev item in the list (and ensure it is visible).
@@ -3014,8 +3016,7 @@ var UI = class _UI {
       next = key === KEYS.ARROW_UP ? this.#countryListEl.lastElementChild : this.#countryListEl.firstElementChild;
     }
     if (next) {
-      this.#scrollCountryListToItem(next);
-      this.#highlightListItem(next, false);
+      this.#highlightListItem(next);
     }
   }
   // Update the selected list item in the dropdown
@@ -3038,6 +3039,9 @@ var UI = class _UI {
         );
         checkIcon.innerHTML = buildCheckIcon();
         this.#selectedListItemEl = newListItem;
+        if (this.#options.dropdownAlwaysOpen) {
+          this.#highlightListItem(newListItem);
+        }
       }
     }
   }
@@ -3056,7 +3060,7 @@ var UI = class _UI {
       }
     }
     if (noCountriesAddedYet) {
-      this.#highlightListItem(null, false);
+      this.#highlightListItem(null);
       if (this.#noResultsMessageEl) {
         this.#noResultsMessageEl.classList.remove(CLASSES.HIDE);
       }
@@ -3143,6 +3147,9 @@ var UI = class _UI {
   setLoading(isLoading) {
     this.#selectedFlagEl.classList.toggle(CLASSES.LOADING, isLoading);
   }
+  isLoading() {
+    return this.#selectedFlagEl.classList.contains(CLASSES.LOADING);
+  }
   // Set the disabled state of the input and dropdown.
   setDisabled(disabled) {
     this.telInputEl.disabled = disabled;
@@ -3165,10 +3172,6 @@ var UI = class _UI {
       }
     }
   }
-  // Whether the selected flag is currently showing the globe icon (no country selected).
-  isShowingGlobe() {
-    return this.#selectedFlagEl.classList.contains(CLASSES.GLOBE);
-  }
   setCountry(selectedCountryData) {
     const { allowDropdown, showFlags, separateDialCode, i18n } = this.#options;
     const name = selectedCountryData?.name;
@@ -3530,7 +3533,6 @@ var Iti = class _Iti {
     this.#processCountryData();
     this.#ui.buildMarkup(this.#countries);
     this.#setInitialState();
-    this.#ui.ensureDropdownWidthSet();
     this.#initListeners();
     this.#startAsyncLoads();
     if (this.#options.dropdownAlwaysOpen) {
@@ -3559,22 +3561,23 @@ var Iti = class _Iti {
     const isRegionlessNanpNumber = isRegionlessNanp(value);
     const { initialCountry, geoIpLookup } = this.#options;
     const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
-    const doingAutoCountryLookup = isAutoCountry && !overrideAutoCountry;
-    const isValidInitialCountry = isIso2(initialCountry);
+    const resolvedInitialCountry = isAutoCountry && intlTelInput.autoCountry ? intlTelInput.autoCountry : initialCountry;
+    const doingAutoCountryLookup = isAutoCountry && !overrideAutoCountry && !intlTelInput.autoCountry;
+    const isValidInitialCountry = isIso2(resolvedInitialCountry);
     if (dialCode) {
       if (isRegionlessNanpNumber) {
         if (isValidInitialCountry) {
-          this.#setCountry(initialCountry);
+          this.#updateSelectedCountry(resolvedInitialCountry);
         } else if (!doingAutoCountryLookup) {
-          this.#setCountry(US.ISO2);
+          this.#updateSelectedCountry(US.ISO2);
         }
       } else {
         this.#updateCountryFromNumber(value);
       }
     } else if (isValidInitialCountry) {
-      this.#setCountry(initialCountry);
+      this.#updateSelectedCountry(resolvedInitialCountry);
     } else if (!doingAutoCountryLookup) {
-      this.#setCountry("");
+      this.#updateSelectedCountry("");
     }
     if (value) {
       this.#updateValueFromNumber(value);
@@ -3633,7 +3636,6 @@ var Iti = class _Iti {
     intlTelInput.startedLoadingAutoCountry = true;
     if (typeof this.#options.geoIpLookup === "function") {
       const successCallback = (iso2 = "") => {
-        this.#ui.setLoading(false);
         const iso2Lower = iso2.toLowerCase();
         if (isIso2(iso2Lower)) {
           intlTelInput.autoCountry = iso2Lower;
@@ -3643,7 +3645,6 @@ var Iti = class _Iti {
         }
       };
       const failureCallback = () => {
-        this.#ui.setLoading(false);
         _Iti.forEachInstance("handleAutoCountryFailure");
       };
       this.#options.geoIpLookup(successCallback, failureCallback);
@@ -3653,6 +3654,14 @@ var Iti = class _Iti {
     this.#openDropdown();
     this.#ui.prefillSearchWithPlus();
   }
+  //* Delete the character just typed (the one immediately before the caret). Used by Android workarounds where we can't preventDefault on keydown.
+  #removeJustTypedChar(inputValue) {
+    const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
+    const valueBeforeCaret = inputValue.substring(0, currentCaretPos - 1);
+    const valueAfterCaret = inputValue.substring(currentCaretPos);
+    this.#setTelInputValue(valueBeforeCaret + valueAfterCaret);
+    return currentCaretPos - 1;
+  }
   //* Initialize the tel input listeners.
   #bindAllTelInputListeners() {
     this.#bindInputListener();
@@ -3672,15 +3681,25 @@ var Iti = class _Iti {
       userOverrideFormatting = true;
     }
     const handleInputEvent = (e) => {
+      if (e?.detail && e.detail["isCountryChange"]) {
+        return;
+      }
       const inputValue = this.#getTelInputValue();
       if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
-        const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
-        const valueBeforeCaret = inputValue.substring(0, currentCaretPos - 1);
-        const valueAfterCaret = inputValue.substring(currentCaretPos);
-        this.#setTelInputValue(valueBeforeCaret + valueAfterCaret);
+        this.#removeJustTypedChar(inputValue);
         this.#openDropdownWithPlus();
         return;
       }
+      if (this.#isAndroid && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
+        const newCaretPos = this.#removeJustTypedChar(inputValue);
+        this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+          source: "key",
+          rejectedInput: e.data,
+          reason: "invalid"
+        });
+        return;
+      }
       if (this.#updateCountryFromNumber(inputValue)) {
         this.#dispatchCountryChangeEvent();
       }
@@ -3777,6 +3796,11 @@ var Iti = class _Iti {
       const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
       const isChangingDialCode = newCountry !== null;
       if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
+        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+          source: "key",
+          rejectedInput: e.key,
+          reason: !isAllowedChar ? "invalid" : "max-length"
+        });
         e.preventDefault();
       }
     };
@@ -3806,6 +3830,7 @@ var Iti = class _Iti {
       const numerics = allowedChars.replace(/\+/g, "");
       const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
       let newValue = before + sanitised + after;
+      let rejectReason = sanitised !== pasted ? "invalid" : null;
       if (newValue.length > 5 && intlTelInput.utils) {
         let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
         while (coreNumber.length === 0 && newValue.length > 0) {
@@ -3813,13 +3838,24 @@ var Iti = class _Iti {
           coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
         }
         if (!coreNumber) {
+          this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+            source: "paste",
+            rejectedInput: pastedRaw,
+            reason: "max-length"
+          });
           return;
         }
         if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
           if (input.selectionEnd === inputValue.length) {
             const trimLength = coreNumber.length - this.#maxCoreNumberLength;
             newValue = newValue.slice(0, newValue.length - trimLength);
+            rejectReason = "max-length";
           } else {
+            this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+              source: "paste",
+              rejectedInput: pastedRaw,
+              reason: "max-length"
+            });
             return;
           }
         }
@@ -3828,6 +3864,13 @@ var Iti = class _Iti {
       const caretPos = selStart + sanitised.length;
       input.setSelectionRange(caretPos, caretPos);
       input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      if (rejectReason) {
+        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+          source: "paste",
+          rejectedInput: pastedRaw,
+          reason: rejectReason
+        });
+      }
     };
     this.#ui.telInputEl.addEventListener("paste", handlePasteEvent, {
       signal: this.#abortController.signal
@@ -3879,7 +3922,7 @@ var Iti = class _Iti {
   #updateCountryFromNumber(fullNumber) {
     const iso2 = this.#resolveCountryChangeFromNumber(fullNumber);
     if (iso2 !== null) {
-      return this.#setCountry(iso2);
+      return this.#updateSelectedCountry(iso2);
     }
     return false;
   }
@@ -3962,7 +4005,7 @@ var Iti = class _Iti {
   }
   //* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
   //* Note: called from setInitialState, updateCountryFromNumber, selectListItem, setCountry.
-  #setCountry(iso2) {
+  #updateSelectedCountry(iso2) {
     const prevIso2 = this.#selectedCountry?.iso2 || "";
     this.#selectedCountry = iso2 ? this.#countryByIso2.get(iso2) : null;
     if (this.#selectedCountry) {
@@ -4036,7 +4079,7 @@ var Iti = class _Iti {
       return;
     }
     const iso2 = listItem.dataset[DATA_KEYS.ISO2];
-    const countryChanged = this.#setCountry(iso2);
+    const countryChanged = this.#updateSelectedCountry(iso2);
     this.#closeDropdown();
     const dialCode = listItem.dataset[DATA_KEYS.DIAL_CODE];
     this.#updateDialCode(dialCode);
@@ -4047,6 +4090,7 @@ var Iti = class _Iti {
     this.#ui.telInputEl.focus();
     if (countryChanged) {
       this.#dispatchCountryChangeEvent();
+      this.#dispatchEvent(EVENTS.INPUT, { isCountryChange: true });
     }
   }
   //* Close the dropdown and unbind any listeners.
@@ -4157,11 +4201,12 @@ var Iti = class _Iti {
       this.#autoCountryDeferred.resolve();
       return;
     }
-    this.#fallbackCountryIso2 = intlTelInput.autoCountry;
-    const hasSelectedCountryOrGlobe = this.#selectedCountry || this.#ui.isShowingGlobe();
-    if (!hasSelectedCountryOrGlobe) {
-      this.setCountry(this.#fallbackCountryIso2);
+    if (this.#ui.isLoading()) {
+      this.setCountry(intlTelInput.autoCountry);
+    } else {
+      this.#fallbackCountryIso2 = intlTelInput.autoCountry;
     }
+    this.#ui.setLoading(false);
     this.#autoCountryDeferred.resolve();
   }
   //* Called when the geoip call fails or times out.
@@ -4171,6 +4216,7 @@ var Iti = class _Iti {
       return;
     }
     this.#setInitialState(true);
+    this.#ui.setLoading(false);
     this.#autoCountryDeferred?.reject();
   }
   //* Called when the utils request completes.
@@ -4340,13 +4386,14 @@ var Iti = class _Iti {
     if (!isCountryChange) {
       return;
     }
-    this.#setCountry(iso2Lower);
+    this.#updateSelectedCountry(iso2Lower);
     this.#updateDialCode(this.#selectedCountry?.dialCode || "");
     if (this.#options.formatOnDisplay) {
       const inputValue = this.#getTelInputValue();
       this.#updateValueFromNumber(inputValue);
     }
     this.#dispatchCountryChangeEvent();
+    this.#dispatchEvent(EVENTS.INPUT, { isCountryChange: true });
   }
   //* Set the input value and update the country.
   setNumber(number) {
@@ -4470,7 +4517,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.0.17"
+    version: "27.1.1"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -4539,7 +4586,6 @@ var IntlTelInput = class _IntlTelInput {
   lastEmittedErrorCode;
   // writeValue may be called by Angular forms before utils has loaded; queue it until then
   pendingWriteValue;
-  countryChangeHandler = () => this.handleInput();
   // eslint-disable-next-line class-methods-use-this
   onChange = () => {
   };
@@ -4551,7 +4597,6 @@ var IntlTelInput = class _IntlTelInput {
   };
   ngAfterViewInit() {
     this.iti = intlTelInput_default(this.inputRef.nativeElement, this.buildInitOptions());
-    this.inputRef.nativeElement.addEventListener("countrychange", this.countryChangeHandler);
     this.applyInputAttrs();
     if (this.disabled) {
       this.iti.setDisabled(this.disabled);
@@ -4685,7 +4730,6 @@ var IntlTelInput = class _IntlTelInput {
   }
   ngOnDestroy() {
     this.iti?.destroy();
-    this.inputRef.nativeElement.removeEventListener("countrychange", this.countryChangeHandler);
   }
   ignoredInputAttrs = /* @__PURE__ */ new Set([
     "type",