intl-tel-input 28.0.8 → 28.1.0

package/dist/js/intlTelInputWithUtils.mjs

@@ -1767,7 +1767,8 @@ var CLASSES = {
   FLAG: "iti__flag",
   LOADING: "iti__loading",
   COUNTRY_ITEM: "iti__country",
-  HIGHLIGHT: "iti__highlight"
+  HIGHLIGHT: "iti__highlight",
+  STRICT_REJECT_ANIMATION: "iti__strict-reject-animation"
 };
 var KEYS = {
   ARROW_UP: "ArrowUp",
@@ -3123,7 +3124,6 @@ var UI = class _UI {
   }
   //* Keyboard navigation while the dropdown is open: arrow keys navigate, hidden-search keys filter,
   //* and enter/escape invoke the caller's callbacks (which handle country selection / dropdown close).
-  //* Listens on document because key events go there when no input has focus.
   //* Uses keydown rather than keypress so non-char keys (arrow, esc) fire and so holding a key repeats.
   #bindDropdownKeydownListener(signal, onEnter, onEscape) {
     let query = "";
@@ -3147,7 +3147,7 @@ var UI = class _UI {
           this.#selectedCountryEl.focus();
         }
       }
-      if (!this.#options.countrySearch && e.target !== this.telInputEl && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
+      if (!this.#options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
         e.stopPropagation();
         if (queryTimer) {
           clearTimeout(queryTimer);
@@ -3159,7 +3159,8 @@ var UI = class _UI {
         }, TIMINGS.HIDDEN_SEARCH_RESET_MS);
       }
     };
-    document.addEventListener("keydown", handleKeydown, { signal });
+    this.#selectedCountryEl?.addEventListener("keydown", handleKeydown, { signal });
+    this.#dropdownContentEl?.addEventListener("keydown", handleKeydown, { signal });
   }
   //* Wire up country search input listener: typing filters the list, the clear button resets it.
   #bindSearchInputListener(signal) {
@@ -3324,6 +3325,26 @@ var UI = class _UI {
   setLoading(isLoading) {
     this.#selectedFlagEl.classList.toggle(CLASSES.LOADING, isLoading);
   }
+  //* Play the strict-reject animation (shake, or background-colour flash under prefers-reduced-motion) on the wrapper.
+  //* Called when strictMode rejects the whole input (keystroke, or whole paste).
+  //* Uses the wrapper (not the input) so any separateDialCode / country button move together with the input.
+  playStrictRejectAnimation() {
+    if (!this.#options.strictRejectAnimation) {
+      return;
+    }
+    const wrapperEl = this.telInputEl.parentElement;
+    if (!wrapperEl) {
+      return;
+    }
+    wrapperEl.classList.remove(CLASSES.STRICT_REJECT_ANIMATION);
+    void wrapperEl.offsetWidth;
+    wrapperEl.classList.add(CLASSES.STRICT_REJECT_ANIMATION);
+    wrapperEl.addEventListener(
+      "animationend",
+      () => wrapperEl.classList.remove(CLASSES.STRICT_REJECT_ANIMATION),
+      { once: true }
+    );
+  }
   isLoading() {
     return this.#selectedFlagEl.classList.contains(CLASSES.LOADING);
   }
@@ -3629,6 +3650,7 @@ var Iti = class _Iti {
   #numerals;
   //* Tracks whether the user has typed/pasted their own formatting chars, so AYT-formatting should back off.
   #userOverrideFormatting = false;
+  #strictPasteSnapshot = null;
   #autoCountryDeferred;
   #utilsDeferred;
   constructor(input, customOptions = {}) {
@@ -3839,7 +3861,7 @@ var Iti = class _Iti {
   #handleAndroidStrictReject(inputValue, rejectedInput) {
     const newCaretPos = this.#removeJustTypedChar(inputValue);
     this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
-    this.#playStrictRejectAnimation();
+    this.#ui.playStrictRejectAnimation();
     this.#dispatchEvent(EVENTS.STRICT_REJECT, {
       source: "key",
       rejectedInput,
@@ -3910,21 +3932,30 @@ var Iti = class _Iti {
     if (detail?.["isCountryChange"]) {
       return;
     }
-    const inputValue = this.#getTelInputValue();
-    if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
+    let inputValue = this.#getTelInputValue();
+    const isPaste = e?.inputType === INPUT_TYPES.PASTE;
+    const isStrictPaste = strictMode && isPaste;
+    if (this.#isAndroid && !isPaste && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
       this.#handleAndroidPlusKey(inputValue);
       return;
     }
-    if (this.#isAndroid && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
+    if (this.#isAndroid && !isPaste && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
       this.#handleAndroidStrictReject(inputValue, e.data);
       return;
     }
+    if (isStrictPaste) {
+      const didRejectPaste = this.#handleStrictPasteInputEvent();
+      if (didRejectPaste) {
+        return;
+      }
+      inputValue = this.#getTelInputValue();
+    }
     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) {
+    const isFormattingChar = !isStrictPaste && e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
+    const isNonStrictPaste = isPaste && inputValue && !strictMode;
+    if (isFormattingChar || isNonStrictPaste) {
       this.#userOverrideFormatting = true;
     } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
       this.#userOverrideFormatting = false;
@@ -3987,7 +4018,7 @@ var Iti = class _Iti {
     const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
     const isChangingDialCode = newCountry !== null;
     if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
-      this.#playStrictRejectAnimation();
+      this.#ui.playStrictRejectAnimation();
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "key",
         rejectedInput: e.key,
@@ -4004,20 +4035,37 @@ var Iti = class _Iti {
       signal: this.#abortController.signal
     });
   }
-  // Handle paste events when strictMode is enabled by sanitising the pasted content before it's inserted into the input, and rejecting it entirely if it would result in an invalid number
+  // In strict mode, remember paste details before the browser inserts the pasted text.
+  // The actual sanitisation runs on the following input event so native paste stays enabled.
   #handleStrictPasteEvent = (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);
+    this.#strictPasteSnapshot = {
+      pastedRaw: e.clipboardData?.getData("text") ?? "",
+      value: inputValue,
+      selectionStart: input.selectionStart ?? inputValue.length,
+      selectionEnd: input.selectionEnd ?? inputValue.length
+    };
+  };
+  // Handle paste input events when strictMode is enabled by sanitising the pasted content after
+  // the browser inserts it, and rejecting it entirely if it would result in an invalid number.
+  #handleStrictPasteInputEvent() {
+    const input = this.#ui.telInputEl;
+    const pasteSnapshot = this.#strictPasteSnapshot;
+    this.#strictPasteSnapshot = null;
+    if (!pasteSnapshot) {
+      return false;
+    }
+    const pastedRaw = pasteSnapshot.pastedRaw;
+    const originalValue = pasteSnapshot.value;
+    const selStart = pasteSnapshot.selectionStart;
+    const selEnd = pasteSnapshot.selectionEnd;
+    const before = originalValue.slice(0, selStart);
+    const after = originalValue.slice(selEnd);
     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 allowLeadingPlus = !originalValue.startsWith("+") || initialCharSelected;
     const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
     const hasLeadingPlus = allowedChars.startsWith("+");
     const numerics = allowedChars.replace(/\+/g, "");
@@ -4025,13 +4073,14 @@ var Iti = class _Iti {
     let newValue = before + sanitised + after;
     let rejectReason = sanitised !== pasted ? "invalid" : null;
     if (newValue.length > 30) {
-      this.#playStrictRejectAnimation();
+      this.#ui.playStrictRejectAnimation();
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "paste",
         rejectedInput: pastedRaw,
         reason: "max-length"
       });
-      return;
+      this.#restoreValueBeforeStrictPaste(pasteSnapshot);
+      return true;
     }
     if (newValue.length > 5 && intlTelInput.utils) {
       let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
@@ -4040,37 +4089,38 @@ var Iti = class _Iti {
         coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
       }
       if (!coreNumber) {
-        this.#playStrictRejectAnimation();
+        this.#ui.playStrictRejectAnimation();
         this.#dispatchEvent(EVENTS.STRICT_REJECT, {
           source: "paste",
           rejectedInput: pastedRaw,
           reason: "max-length"
         });
-        return;
+        this.#restoreValueBeforeStrictPaste(pasteSnapshot);
+        return true;
       }
       if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
-        if (input.selectionEnd === inputValue.length) {
+        if (selEnd === originalValue.length) {
           const trimLength = coreNumber.length - this.#maxCoreNumberLength;
           newValue = newValue.slice(0, newValue.length - trimLength);
           rejectReason = "max-length";
         } else {
-          this.#playStrictRejectAnimation();
+          this.#ui.playStrictRejectAnimation();
           this.#dispatchEvent(EVENTS.STRICT_REJECT, {
             source: "paste",
             rejectedInput: pastedRaw,
             reason: "max-length"
           });
-          return;
+          this.#restoreValueBeforeStrictPaste(pasteSnapshot);
+          return true;
         }
       }
     }
     this.#setTelInputValue(newValue);
     const caretPos = selStart + sanitised.length;
     input.setSelectionRange(caretPos, caretPos);
-    input.dispatchEvent(new InputEvent("input", { bubbles: true }));
     if (rejectReason) {
       if (pasted.length > 0 && sanitised.length === 0) {
-        this.#playStrictRejectAnimation();
+        this.#ui.playStrictRejectAnimation();
       }
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "paste",
@@ -4078,27 +4128,20 @@ var Iti = class _Iti {
         reason: rejectReason
       });
     }
-  };
+    return false;
+  }
+  #restoreValueBeforeStrictPaste(pasteSnapshot) {
+    this.#setTelInputValue(pasteSnapshot.value);
+    this.#ui.telInputEl.setSelectionRange(
+      pasteSnapshot.selectionStart,
+      pasteSnapshot.selectionEnd
+    );
+  }
   //* Adhere to the input's maxlength attr.
   #truncateToMaxLength(number) {
     const max = Number(this.#ui.telInputEl.getAttribute("maxlength"));
     return max && number.length > max ? number.substring(0, max) : number;
   }
-  //* Play the strict-reject animation (shake, or background-colour flash under prefers-reduced-motion) on the wrapper.
-  //* Called when strictMode rejects the whole input (keystroke, or whole paste).
-  //* Uses the wrapper (not the input) so any separateDialCode / country button move together with the input.
-  #playStrictRejectAnimation() {
-    if (!this.#options.strictRejectAnimation) {
-      return;
-    }
-    const wrapperEl = this.#ui.telInputEl.parentElement;
-    if (!wrapperEl) {
-      return;
-    }
-    wrapperEl.classList.remove("iti__strict-reject-animation");
-    void wrapperEl.offsetWidth;
-    wrapperEl.classList.add("iti__strict-reject-animation");
-  }
   //* Trigger a custom event on the input (typed via ItiEventMap).
   #dispatchEvent(name, detailProps = {}) {
     const e = new CustomEvent(name, {
@@ -4718,7 +4761,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.8",
+    version: "28.1.0",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "28.0.8",
+  "version": "28.1.0",
   "description": "A JavaScript library for entering, formatting, and validating international telephone numbers",
   "type": "module",
   "license": "MIT",