intl-tel-input 25.10.6 → 25.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.10.6",
+  "version": "25.10.7",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

package/react/README.md

@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.6/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.7/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput React component.

package/react/build/IntlTelInput.cjs

@@ -2427,6 +2427,36 @@ var Iti = class _Iti {
       };
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
+    if (strictMode) {
+      this._handlePasteEvent = (e) => {
+        e.preventDefault();
+        const input = this.telInput;
+        const selStart = input.selectionStart;
+        const selEnd = input.selectionEnd;
+        const pasted = e.clipboardData.getData("text");
+        const initialCharSelected = selStart === 0 && selEnd > 0;
+        const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
+        const allowedChars = pasted.replace(/[^0-9+]/g, "");
+        const hasLeadingPlus = allowedChars.startsWith("+");
+        const numerics = allowedChars.replace(/\+/g, "");
+        const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
+        let newVal = input.value.slice(0, selStart) + sanitised + input.value.slice(selEnd);
+        const coreNumber = intlTelInput.utils.getCoreNumber(newVal, this.selectedCountryData.iso2);
+        if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
+          if (input.selectionEnd === input.value.length) {
+            const trimLength = coreNumber.length - this.maxCoreNumberLength;
+            newVal = newVal.slice(0, newVal.length - trimLength);
+          } else {
+            return;
+          }
+        }
+        input.value = newVal;
+        const caretPos = selStart + sanitised.length;
+        input.setSelectionRange(caretPos, caretPos);
+        input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      };
+      this.telInput.addEventListener("paste", this._handlePasteEvent);
+    }
   }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
@@ -3115,6 +3145,9 @@ var Iti = class _Iti {
     if (this._handleKeydownEvent) {
       this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
     }
+    if (this._handlePasteEvent) {
+      this.telInput.removeEventListener("paste", this._handlePasteEvent);
+    }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
       if (this.isRTL) {
@@ -3293,7 +3326,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.6"
+    version: "25.10.7"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -416,6 +416,7 @@ declare module "intl-tel-input" {
         private _handleCountryContainerKeydown;
         private _handleInputEvent;
         private _handleKeydownEvent;
+        private _handlePasteEvent;
         private _handleWindowScroll;
         private _handleMouseoverCountryList;
         private _handleClickCountryList;

package/react/build/IntlTelInput.js

@@ -2391,6 +2391,36 @@ var Iti = class _Iti {
       };
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
+    if (strictMode) {
+      this._handlePasteEvent = (e) => {
+        e.preventDefault();
+        const input = this.telInput;
+        const selStart = input.selectionStart;
+        const selEnd = input.selectionEnd;
+        const pasted = e.clipboardData.getData("text");
+        const initialCharSelected = selStart === 0 && selEnd > 0;
+        const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
+        const allowedChars = pasted.replace(/[^0-9+]/g, "");
+        const hasLeadingPlus = allowedChars.startsWith("+");
+        const numerics = allowedChars.replace(/\+/g, "");
+        const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
+        let newVal = input.value.slice(0, selStart) + sanitised + input.value.slice(selEnd);
+        const coreNumber = intlTelInput.utils.getCoreNumber(newVal, this.selectedCountryData.iso2);
+        if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
+          if (input.selectionEnd === input.value.length) {
+            const trimLength = coreNumber.length - this.maxCoreNumberLength;
+            newVal = newVal.slice(0, newVal.length - trimLength);
+          } else {
+            return;
+          }
+        }
+        input.value = newVal;
+        const caretPos = selStart + sanitised.length;
+        input.setSelectionRange(caretPos, caretPos);
+        input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      };
+      this.telInput.addEventListener("paste", this._handlePasteEvent);
+    }
   }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
@@ -3079,6 +3109,9 @@ var Iti = class _Iti {
     if (this._handleKeydownEvent) {
       this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
     }
+    if (this._handlePasteEvent) {
+      this.telInput.removeEventListener("paste", this._handlePasteEvent);
+    }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
       if (this.isRTL) {
@@ -3257,7 +3290,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.6"
+    version: "25.10.7"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -2427,6 +2427,36 @@ var Iti = class _Iti {
       };
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
+    if (strictMode) {
+      this._handlePasteEvent = (e) => {
+        e.preventDefault();
+        const input = this.telInput;
+        const selStart = input.selectionStart;
+        const selEnd = input.selectionEnd;
+        const pasted = e.clipboardData.getData("text");
+        const initialCharSelected = selStart === 0 && selEnd > 0;
+        const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
+        const allowedChars = pasted.replace(/[^0-9+]/g, "");
+        const hasLeadingPlus = allowedChars.startsWith("+");
+        const numerics = allowedChars.replace(/\+/g, "");
+        const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
+        let newVal = input.value.slice(0, selStart) + sanitised + input.value.slice(selEnd);
+        const coreNumber = intlTelInput.utils.getCoreNumber(newVal, this.selectedCountryData.iso2);
+        if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
+          if (input.selectionEnd === input.value.length) {
+            const trimLength = coreNumber.length - this.maxCoreNumberLength;
+            newVal = newVal.slice(0, newVal.length - trimLength);
+          } else {
+            return;
+          }
+        }
+        input.value = newVal;
+        const caretPos = selStart + sanitised.length;
+        input.setSelectionRange(caretPos, caretPos);
+        input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      };
+      this.telInput.addEventListener("paste", this._handlePasteEvent);
+    }
   }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
@@ -3115,6 +3145,9 @@ var Iti = class _Iti {
     if (this._handleKeydownEvent) {
       this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
     }
+    if (this._handlePasteEvent) {
+      this.telInput.removeEventListener("paste", this._handlePasteEvent);
+    }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
       if (this.isRTL) {
@@ -3293,7 +3326,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.6"
+    version: "25.10.7"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -2391,6 +2391,36 @@ var Iti = class _Iti {
       };
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
+    if (strictMode) {
+      this._handlePasteEvent = (e) => {
+        e.preventDefault();
+        const input = this.telInput;
+        const selStart = input.selectionStart;
+        const selEnd = input.selectionEnd;
+        const pasted = e.clipboardData.getData("text");
+        const initialCharSelected = selStart === 0 && selEnd > 0;
+        const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
+        const allowedChars = pasted.replace(/[^0-9+]/g, "");
+        const hasLeadingPlus = allowedChars.startsWith("+");
+        const numerics = allowedChars.replace(/\+/g, "");
+        const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
+        let newVal = input.value.slice(0, selStart) + sanitised + input.value.slice(selEnd);
+        const coreNumber = intlTelInput.utils.getCoreNumber(newVal, this.selectedCountryData.iso2);
+        if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
+          if (input.selectionEnd === input.value.length) {
+            const trimLength = coreNumber.length - this.maxCoreNumberLength;
+            newVal = newVal.slice(0, newVal.length - trimLength);
+          } else {
+            return;
+          }
+        }
+        input.value = newVal;
+        const caretPos = selStart + sanitised.length;
+        input.setSelectionRange(caretPos, caretPos);
+        input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      };
+      this.telInput.addEventListener("paste", this._handlePasteEvent);
+    }
   }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
@@ -3079,6 +3109,9 @@ var Iti = class _Iti {
     if (this._handleKeydownEvent) {
       this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
     }
+    if (this._handlePasteEvent) {
+      this.telInput.removeEventListener("paste", this._handlePasteEvent);
+    }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
       if (this.isRTL) {
@@ -3257,7 +3290,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.6"
+    version: "25.10.7"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/vue/README.md

@@ -34,7 +34,7 @@ See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master
 "vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
 ```
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.6/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.7/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.