intl-tel-input 28.0.7 → 28.0.9

package/dist/js/intlTelInput.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"));
@@ -4108,8 +4145,12 @@ var Iti = class _Iti {
     });
     this.#ui.telInputEl.dispatchEvent(e);
   }
-  //* Open the dropdown.
+  //* Open the dropdown. Bail if already open — otherwise the existing AbortController gets overwritten
+  //* and its listeners leak. Reachable via openDropdownWithPlus when dropdownAlwaysOpen is set
   #openDropdown() {
+    if (this.#ui.isDropdownOpen()) {
+      return;
+    }
     this.#ui.openDropdown(
       (li) => this.#selectListItem(li),
       () => this.#closeDropdown()
@@ -4714,7 +4755,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.7",
+    version: "28.0.9",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR

package/dist/js/intlTelInputWithUtils.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v28.0.7
+ * 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"));
@@ -4139,8 +4176,12 @@ var _factory = (() => {
       });
       this.#ui.telInputEl.dispatchEvent(e);
     }
-    //* Open the dropdown.
+    //* Open the dropdown. Bail if already open — otherwise the existing AbortController gets overwritten
+    //* and its listeners leak. Reachable via openDropdownWithPlus when dropdownAlwaysOpen is set
     #openDropdown() {
+      if (this.#ui.isDropdownOpen()) {
+        return;
+      }
       this.#ui.openDropdown(
         (li) => this.#selectListItem(li),
         () => this.#closeDropdown()
@@ -4745,7 +4786,7 @@ var _factory = (() => {
       attachUtils,
       startedLoadingUtils: false,
       startedLoadingAutoCountry: false,
-      version: "28.0.7",
+      version: "28.0.9",
       NUMBER_FORMAT,
       NUMBER_TYPE,
       VALIDATION_ERROR