intl-tel-input 28.0.8 → 28.0.9

package/dist/js/intlTelInputWithUtils.mjs

@@ -3629,6 +3629,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 = {}) {
@@ -3910,21 +3911,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;
@@ -4004,20 +4014,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, "");
@@ -4031,7 +4058,8 @@ var Iti = class _Iti {
         rejectedInput: pastedRaw,
         reason: "max-length"
       });
-      return;
+      this.#restoreValueBeforeStrictPaste(pasteSnapshot);
+      return true;
     }
     if (newValue.length > 5 && intlTelInput.utils) {
       let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
@@ -4046,10 +4074,11 @@ var Iti = class _Iti {
           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";
@@ -4060,14 +4089,14 @@ var Iti = class _Iti {
             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();
@@ -4078,7 +4107,15 @@ 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"));
@@ -4718,7 +4755,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.8",
+    version: "28.0.9",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR

package/package.json

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