intl-tel-input 28.0.8 → 28.0.9

package/dist/js/intlTelInputWithUtils.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v28.0.8
+ * International Telephone Input v28.0.9
  * git+https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -3660,6 +3660,7 @@ var _factory = (() => {
     #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 = {}) {
@@ -3941,21 +3942,30 @@ var _factory = (() => {
       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;
@@ -4035,20 +4045,37 @@ var _factory = (() => {
         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, "");
@@ -4062,7 +4089,8 @@ var _factory = (() => {
           rejectedInput: pastedRaw,
           reason: "max-length"
         });
-        return;
+        this.#restoreValueBeforeStrictPaste(pasteSnapshot);
+        return true;
       }
       if (newValue.length > 5 && intlTelInput.utils) {
         let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
@@ -4077,10 +4105,11 @@ var _factory = (() => {
             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";
@@ -4091,14 +4120,14 @@ var _factory = (() => {
               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();
@@ -4109,7 +4138,15 @@ var _factory = (() => {
           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"));
@@ -4749,7 +4786,7 @@ var _factory = (() => {
       attachUtils,
       startedLoadingUtils: false,
       startedLoadingAutoCountry: false,
-      version: "28.0.8",
+      version: "28.0.9",
       NUMBER_FORMAT,
       NUMBER_TYPE,
       VALIDATION_ERROR