intl-tel-input 27.1.2 → 27.2.0

package/dist/js/intlTelInputWithUtils.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v27.1.2
+ * International Telephone Input v27.2.0
  * git+https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -3022,7 +3022,7 @@ var _factory = (() => {
             this.#selectedCountryEl.focus();
           }
         }
-        if (!this.#options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
+        if (!this.#options.countrySearch && e.target !== this.telInputEl && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
           e.stopPropagation();
           if (queryTimer) {
             clearTimeout(queryTimer);
@@ -3544,6 +3544,8 @@ var _factory = (() => {
     #isActive = true;
     #abortController;
     #numerals;
+    //* Tracks whether the user has typed/pasted their own formatting chars, so AYT-formatting should back off.
+    #userOverrideFormatting = false;
     #autoCountryDeferred;
     #utilsDeferred;
     constructor(input, customOptions = {}) {
@@ -3733,176 +3735,211 @@ var _factory = (() => {
       this.#bindKeydownListener();
       this.#bindPasteListener();
     }
-    #bindInputListener() {
-      const {
-        strictMode,
-        formatAsYouType,
-        separateDialCode,
-        allowDropdown,
-        countrySearch
-      } = this.#options;
-      let userOverrideFormatting = false;
-      if (REGEX.ALPHA_UNICODE.test(this.#getTelInputValue())) {
-        userOverrideFormatting = true;
+    //* Android workaround for handling plus when separateDialCode enabled (as impossible to handle with keydown/keyup, for which e.key always returns "Unidentified", see https://stackoverflow.com/q/59584061/217866)
+    #handleAndroidPlusKey(inputValue) {
+      this.#removeJustTypedChar(inputValue);
+      this.#openDropdownWithPlus();
+    }
+    //* Android strictMode workaround: the keydown-based filter can't block these because e.key is "Unidentified" on Android virtual keyboards, so strip them here on input.
+    #handleAndroidStrictReject(inputValue, rejectedInput) {
+      const newCaretPos = this.#removeJustTypedChar(inputValue);
+      this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+      this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+        source: "key",
+        rejectedInput,
+        reason: "invalid"
+      });
+    }
+    //* Format the input value using libphonenumber's AYT formatter, preserving caret position (called after an input event).
+    #formatAsYouType(inputValue, isDeleteForwards) {
+      const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
+      const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
+      const relevantCharsBeforeCaret = valueBeforeCaret.replace(
+        REGEX.NON_PLUS_NUMERIC_GLOBAL,
+        ""
+      ).length;
+      const fullNumber = this.#getFullNumber();
+      const formattedValue = formatNumberAsYouType(
+        fullNumber,
+        inputValue,
+        intlTelInput.utils,
+        this.#selectedCountry,
+        this.#options.separateDialCode
+      );
+      const newCaretPos = computeNewCaretPosition(
+        relevantCharsBeforeCaret,
+        formattedValue,
+        currentCaretPos,
+        isDeleteForwards
+      );
+      this.#setTelInputValue(formattedValue);
+      this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+    }
+    //* If separateDialCode AND typed dial code (e.g. from paste or autofill, or from typing a dial code when countrySearch disabled), then remove the typed dial code.
+    //* Only strip when a full dial code is actually present — otherwise a lone typed "+" (or partial prefix) would get erased.
+    #stripTypedDialCode(inputValue) {
+      if (inputValue.startsWith("+") && this.#selectedCountry && this.#getDialCode(inputValue)) {
+        const cleanNumber = stripSeparateDialCode(
+          inputValue,
+          true,
+          true,
+          this.#selectedCountry
+        );
+        this.#setTelInputValue(cleanNumber);
       }
-      const handleInputEvent = (e) => {
-        if (e?.detail && e.detail["isCountryChange"]) {
-          return;
-        }
-        const inputValue = this.#getTelInputValue();
-        if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
-          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();
-        }
-        const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
-        const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
-        if (isFormattingChar || isPaste && !strictMode) {
-          userOverrideFormatting = true;
-        } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
-          userOverrideFormatting = false;
-        }
-        const isSetNumber = e?.detail && e.detail["isSetNumber"];
-        const isAscii = this.#numerals.isAscii();
-        if (formatAsYouType && !userOverrideFormatting && !isSetNumber && isAscii) {
-          const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
-          const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
-          const relevantCharsBeforeCaret = valueBeforeCaret.replace(
-            REGEX.NON_PLUS_NUMERIC_GLOBAL,
-            ""
-          ).length;
-          const isDeleteForwards = e?.inputType === INPUT_TYPES.DELETE_FORWARD;
-          const fullNumber = this.#getFullNumber();
-          const formattedValue = formatNumberAsYouType(
-            fullNumber,
-            inputValue,
-            intlTelInput.utils,
-            this.#selectedCountry,
-            separateDialCode
-          );
-          const newCaretPos = computeNewCaretPosition(
-            relevantCharsBeforeCaret,
-            formattedValue,
-            currentCaretPos,
-            isDeleteForwards
-          );
-          this.#setTelInputValue(formattedValue);
-          this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
-        }
-        if (separateDialCode && inputValue.startsWith("+") && this.#selectedCountry?.dialCode) {
-          const cleanNumber = stripSeparateDialCode(
-            inputValue,
-            true,
-            separateDialCode,
-            this.#selectedCountry
-          );
-          this.#setTelInputValue(cleanNumber);
-        }
-      };
+    }
+    #bindInputListener() {
+      this.#userOverrideFormatting = REGEX.ALPHA_UNICODE.test(
+        this.#getTelInputValue()
+      );
       this.#ui.telInputEl.addEventListener(
         "input",
-        handleInputEvent,
+        this.#handleInputEvent,
         {
           signal: this.#abortController.signal
         }
       );
     }
+    //* On input event: (1) Update selected country, (2) Format-as-you-type.
+    //* Note that this fires AFTER the input is updated.
+    #handleInputEvent = (e) => {
+      const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.#options;
+      const detail = e?.detail;
+      if (detail?.["isCountryChange"]) {
+        return;
+      }
+      const inputValue = this.#getTelInputValue();
+      if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
+        this.#handleAndroidPlusKey(inputValue);
+        return;
+      }
+      if (this.#isAndroid && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
+        this.#handleAndroidStrictReject(inputValue, e.data);
+        return;
+      }
+      if (this.#updateCountryFromNumber(inputValue)) {
+        this.#dispatchCountryChangeEvent();
+      }
+      const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
+      const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
+      if (isFormattingChar || isPaste && !strictMode) {
+        this.#userOverrideFormatting = true;
+      } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
+        this.#userOverrideFormatting = false;
+      }
+      if (formatAsYouType && !this.#userOverrideFormatting && !detail?.["isSetNumber"] && this.#numerals.isAscii()) {
+        this.#formatAsYouType(
+          inputValue,
+          e?.inputType === INPUT_TYPES.DELETE_FORWARD
+        );
+      }
+      if (separateDialCode) {
+        this.#stripTypedDialCode(inputValue);
+      }
+    };
     #bindKeydownListener() {
-      const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
+      const { strictMode, separateDialCode } = this.#options;
       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.telInputEl.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.telInputEl;
-        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 + normalisedKey + after;
-        const newFullNumber = this.#buildFullNumber(newValue);
-        let hasExceededMaxLength = false;
-        if (intlTelInput.utils && this.#maxCoreNumberLength) {
-          const coreNumber = intlTelInput.utils.getCoreNumber(
-            newFullNumber,
-            this.#selectedCountry?.iso2
-          );
-          hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
-        }
-        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();
-        }
-      };
-      this.#ui.telInputEl.addEventListener("keydown", handleKeydownEvent, {
+      this.#ui.telInputEl.addEventListener("keydown", this.#handleKeydownEvent, {
         signal: this.#abortController.signal
       });
     }
+    //* On keydown event: (1) if strictMode then prevent invalid characters, (2) if separateDialCode then handle plus key
+    //* Note that this fires BEFORE the input is updated.
+    #handleKeydownEvent = (e) => {
+      const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
+      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.telInputEl.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.telInputEl;
+      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 + normalisedKey + after;
+      const newFullNumber = this.#buildFullNumber(newValue);
+      let hasExceededMaxLength = false;
+      if (intlTelInput.utils && this.#maxCoreNumberLength) {
+        const coreNumber = intlTelInput.utils.getCoreNumber(
+          newFullNumber,
+          this.#selectedCountry?.iso2
+        );
+        hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
+      }
+      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();
+      }
+    };
     #bindPasteListener() {
       if (!this.#options.strictMode) {
         return;
       }
-      const handlePasteEvent = (e) => {
-        e.preventDefault();
-        const input = this.#ui.telInputEl;
-        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.#selectedCountry?.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 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) {
-            newValue = newValue.slice(0, -1);
-            coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
-          }
-          if (!coreNumber) {
+      this.#ui.telInputEl.addEventListener("paste", this.#handlePasteEvent, {
+        signal: this.#abortController.signal
+      });
+    }
+    #handlePasteEvent = (e) => {
+      e.preventDefault();
+      const input = this.#ui.telInputEl;
+      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.#selectedCountry?.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 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) {
+          newValue = newValue.slice(0, -1);
+          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,
@@ -3910,37 +3947,20 @@ var _factory = (() => {
             });
             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;
-            }
-          }
         }
-        this.#setTelInputValue(newValue);
-        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
-      });
-    }
+      }
+      this.#setTelInputValue(newValue);
+      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
+        });
+      }
+    };
     //* Adhere to the input's maxlength attr.
     #truncateToMaxLength(number) {
       const max = Number(this.#ui.telInputEl.getAttribute("maxlength"));
@@ -4582,7 +4602,7 @@ var _factory = (() => {
       attachUtils,
       startedLoadingUtils: false,
       startedLoadingAutoCountry: false,
-      version: "27.1.2"
+      version: "27.2.0"
     }
   );
   var intlTelInput_default = intlTelInput;