intl-tel-input 28.0.8 → 28.1.0

package/dist/js/intlTelInputWithUtils.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v28.0.8
+ * International Telephone Input v28.1.0
  * git+https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1798,7 +1798,8 @@ var _factory = (() => {
     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",
@@ -3154,7 +3155,6 @@ var _factory = (() => {
     }
     //* 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 = "";
@@ -3178,7 +3178,7 @@ var _factory = (() => {
             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);
@@ -3190,7 +3190,8 @@ var _factory = (() => {
           }, 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) {
@@ -3355,6 +3356,26 @@ var _factory = (() => {
     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);
     }
@@ -3660,6 +3681,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 = {}) {
@@ -3870,7 +3892,7 @@ var _factory = (() => {
     #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,
@@ -3941,21 +3963,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;
@@ -4018,7 +4049,7 @@ var _factory = (() => {
       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,
@@ -4035,20 +4066,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, "");
@@ -4056,13 +4104,14 @@ var _factory = (() => {
       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);
@@ -4071,37 +4120,38 @@ var _factory = (() => {
           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",
@@ -4109,27 +4159,20 @@ 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"));
       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, {
@@ -4749,7 +4792,7 @@ var _factory = (() => {
       attachUtils,
       startedLoadingUtils: false,
       startedLoadingAutoCountry: false,
-      version: "28.0.8",
+      version: "28.1.0",
       NUMBER_FORMAT,
       NUMBER_TYPE,
       VALIDATION_ERROR