svelte-tel-input 4.3.0 → 4.3.1

package/dist/components/input/TelInput.svelte

@@ -2,10 +2,16 @@
 	import { onMount, untrack } from 'svelte';
 	import { ParseError } from 'libphonenumber-js/max/es6';
 	import { generatePlaceholder } from '../../utils/index.js';
-	import { parsePhoneInput } from '../../utils/helpers.js';
+	import { parsePhoneInput, toNationalFormat } from '../../utils/helpers.js';
 	import { telInputAction } from '../../utils/directives/telInputAction.js';
 	import { getCountryByIso2, guessCountryByPartialNumber } from '../../utils/countryHelpers.js';
-	import type { CountryCode, TelInputOptions, Props, ValidationError } from '../../types';
+	import type {
+		CountryCode,
+		TelInputOptions,
+		Props,
+		ValidationError,
+		PreParsed
+	} from '../../types';
 
 	const defaultOptions = {
 		autoPlaceholder: true,
@@ -145,13 +151,14 @@
 			if (
 				initialFormat === 'national' &&
 				details.formattedNumber &&
-				details.countryCallingCode
+				details.countryCallingCode &&
+				details.formattedNumber.startsWith(`+${details.countryCallingCode} `)
 			) {
-				const prefix = `+${details.countryCallingCode} `;
-				if (details.formattedNumber.startsWith(prefix)) {
-					const national = details.formattedNumber.slice(prefix.length);
-					return spaces ? national : national.replace(/\s/g, '');
-				}
+				return toNationalFormat(
+					details.formattedNumber,
+					details.countryCallingCode,
+					spaces
+				);
 			}
 			return spaces ? (details.formattedNumber ?? value) : value;
 		} catch {
@@ -185,11 +192,11 @@
 		...options
 	});
 
-	const handleInputAction = (value: string) => {
+	const handleInputAction = (value: string, preParsed?: PreParsed) => {
 		if (disabled || readonly) return;
 		// First user keystroke exits the "initial national format" display mode.
 		_showNationalFormat = false;
-		handleParsePhoneNumber(value, country, combinedOptions.validateOn !== 'blur');
+		handleParsePhoneNumber(value, country, combinedOptions.validateOn !== 'blur', preParsed);
 	};
 
 	const getValidationError = (
@@ -267,7 +274,8 @@
 	const handleParsePhoneNumber = (
 		rawInput: string | null,
 		currCountry: CountryCode | null = null,
-		shouldValidate = true
+		shouldValidate = true,
+		preParsed?: PreParsed
 	) => {
 		// Country-only change: reset state unless option says to keep valid.
 		if (rawInput === null && currCountry !== null) {
@@ -354,8 +362,14 @@
 				? numberHasCountry
 				: selectedCountry;
 
+		// Reuse the action's parse when it used the same country we resolved to;
+		// only the dial-code country-switch path needs a re-parse.
+		const canReuse =
+			preParsed !== undefined && (normalizerCountry?.iso2 ?? null) === preParsed.countryIso2;
 		try {
-			detailedValue = parsePhoneInput(rawInput, normalizerCountry);
+			detailedValue = canReuse
+				? preParsed.detail
+				: parsePhoneInput(rawInput, normalizerCountry);
 		} catch (err) {
 			if (err instanceof ParseError) {
 				detailedValue = {
@@ -394,17 +408,14 @@
 		if (
 			_showNationalFormat &&
 			detailedValue?.formattedNumber &&
-			detailedValue?.countryCallingCode
+			detailedValue?.countryCallingCode &&
+			detailedValue.formattedNumber.startsWith(`+${detailedValue.countryCallingCode} `)
 		) {
-			const _prefix = `+${detailedValue.countryCallingCode} `;
-			if (detailedValue.formattedNumber.startsWith(_prefix)) {
-				const _national = detailedValue.formattedNumber.slice(_prefix.length);
-				inputValue = combinedOptions.spaces ? _national : _national.replace(/\s/g, '');
-			} else {
-				inputValue = combinedOptions.spaces
-					? (detailedValue.formattedNumber ?? rawInput)
-					: rawInput;
-			}
+			inputValue = toNationalFormat(
+				detailedValue.formattedNumber,
+				detailedValue.countryCallingCode,
+				combinedOptions.spaces
+			);
 		} else {
 			inputValue = combinedOptions.spaces
 				? (detailedValue?.formattedNumber ?? rawInput)
@@ -447,14 +458,17 @@
 				if (
 					_showNationalFormat &&
 					detailedValue.formattedNumber &&
-					detailedValue.countryCallingCode
+					detailedValue.countryCallingCode &&
+					detailedValue.formattedNumber.startsWith(
+						`+${detailedValue.countryCallingCode} `
+					)
 				) {
-					const prefix = `+${detailedValue.countryCallingCode} `;
-					if (detailedValue.formattedNumber.startsWith(prefix)) {
-						const national = detailedValue.formattedNumber.slice(prefix.length);
-						inputValue = spaces ? national : national.replace(/\s/g, '');
-						return;
-					}
+					inputValue = toNationalFormat(
+						detailedValue.formattedNumber,
+						detailedValue.countryCallingCode,
+						spaces
+					);
+					return;
 				}
 				inputValue = spaces
 					? (detailedValue.formattedNumber ?? inputValue)

package/dist/types/index.d.ts

@@ -41,6 +41,16 @@ export interface DetailedValue {
 	validationError: ValidationError;
 }
 
+/**
+ * A parse result carried from the input action to the component, alongside the
+ * country it was parsed with, so the component can reuse it instead of parsing
+ * the same input a second time.
+ */
+export interface PreParsed {
+	detail: DetailedValue;
+	countryIso2: CountryCode | null;
+}
+
 /**
  * The reason the current phone number input is invalid.
  * - `'REQUIRED'` — field is empty and `required` is `true`

package/dist/utils/directives/telInputAction.d.ts

@@ -1,6 +1,6 @@
-import type { CountryCode } from '../../types/index.js';
+import type { CountryCode, PreParsed } from '../../types/index.js';
 interface TelInputActionParams {
-    handler: (val: string) => void;
+    handler: (val: string, preParsed?: PreParsed) => void;
     spaces: boolean;
     country: CountryCode | null | undefined;
     value: string;

package/dist/utils/directives/telInputAction.js

@@ -1,21 +1,7 @@
 import { getCountryByIso2 } from '../countryHelpers.js';
-import { parsePhoneInput } from '../helpers.js';
+import { parsePhoneInput, normalizeForLibphonenumber } from '../helpers.js';
 import { calculateCursorPosition } from '../cursorPosition.js';
 let inputState = null;
-const normalizeUserInput = (input) => {
-    let value = '';
-    for (let i = 0; i < input.length; i++) {
-        const ch = input[i];
-        if (ch >= '0' && ch <= '9') {
-            value += ch;
-            continue;
-        }
-        if (ch === '+' && value.length === 0) {
-            value += ch;
-        }
-    }
-    return value;
-};
 const isFormattingChar = (ch) => {
     if (!ch)
         return false;
@@ -108,7 +94,7 @@ const onInput = (event, params, node) => {
     };
     const userInput = node.value;
     const currentCursor = node.selectionStart ?? 0;
-    const normalized = normalizeUserInput(userInput);
+    const normalized = normalizeForLibphonenumber(userInput);
     const countryObj = params.country ? getCountryByIso2(params.country) : undefined;
     const details = parsePhoneInput(normalized, countryObj);
     // Display formatting:
@@ -131,8 +117,9 @@ const onInput = (event, params, node) => {
     // Update value and cursor
     node.value = formattedInput;
     node.setSelectionRange(newPosition, newPosition);
-    // Notify parent component
-    params.handler(formattedInput);
+    // Notify parent component, passing the already-computed parse so the
+    // component can reuse it instead of re-parsing the same input.
+    params.handler(formattedInput, { detail: details, countryIso2: params.country ?? null });
     // Clear state
     inputState = null;
 };

package/dist/utils/helpers.d.ts

@@ -4,6 +4,8 @@ export declare const generatePlaceholder: (country: CountryCode, { spaces, forma
     spaces: boolean;
     format?: "international" | "national";
 }) => string;
+export declare const normalizeForLibphonenumber: (input: string) => string;
+export declare const toNationalFormat: (internationalFormat: string, countryCallingCode: string, spaces: boolean) => string;
 export declare const parsePhoneInput: (input: string, country: Country | undefined) => DetailedValue;
 /**
  * Parse a raw phone number string into a `DetailedValue`.

package/dist/utils/helpers.js

@@ -8,12 +8,7 @@ export const generatePlaceholder = (country, { spaces, format } = {
     const examplePhoneNumber = getExampleNumber(country, examplePhoneNumbers);
     if (examplePhoneNumber) {
         if (format === 'national') {
-            const international = examplePhoneNumber.formatInternational().trim();
-            const prefix = `+${examplePhoneNumber.countryCallingCode} `;
-            const national = international.startsWith(prefix)
-                ? international.slice(prefix.length)
-                : international;
-            return spaces ? national : national.replace(/\s/g, '');
+            return toNationalFormat(examplePhoneNumber.formatInternational().trim(), examplePhoneNumber.countryCallingCode, spaces);
         }
         return spaces ? examplePhoneNumber.formatInternational().trim() : examplePhoneNumber.number;
     }
@@ -25,7 +20,7 @@ export const generatePlaceholder = (country, { spaces, format } = {
 // ---------------------------------------------------------------------------
 // Phone-number normalizer
 // ---------------------------------------------------------------------------
-const normalizeForLibphonenumber = (input) => {
+export const normalizeForLibphonenumber = (input) => {
     let value = '';
     for (let i = 0; i < input.length; i++) {
         const ch = input[i];
@@ -82,6 +77,14 @@ const stripSpecialChars = (s) => s
     .replace(/[()-]/g, ' ')
     .replace(/\s{2,}/g, ' ')
     .trim();
+const stripCallingCode = (internationalFormat, countryCallingCode) => internationalFormat.slice(countryCallingCode.length + 1).trim();
+export const toNationalFormat = (internationalFormat, countryCallingCode, spaces) => {
+    const prefix = `+${countryCallingCode} `;
+    const national = internationalFormat.startsWith(prefix)
+        ? internationalFormat.slice(prefix.length)
+        : internationalFormat;
+    return spaces ? national : national.replace(/\s/g, '');
+};
 export const parsePhoneInput = (input, country) => {
     const normalized = normalizeForLibphonenumber(input);
     const defaultCountryIso2 = country?.iso2;
@@ -109,13 +112,22 @@ export const parsePhoneInput = (input, country) => {
         else if (defaultCountryIso2) {
             const formatted = formatIncompletePhoneNumber(capped, defaultCountryIso2);
             if (formatted === capped && country?.dialCode) {
-                if (phone && phone.nationalNumber !== capped) {
+                // Calling-code leak: libphonenumber consumed a leading digit that
+                // equals the country calling code as the code itself, so
+                // nationalNumber is shorter than what the user typed (e.g. US "11"
+                // → nationalNumber "1"). Those digits are national input, not a
+                // trunk prefix — fall through to the synthesis branch below so the
+                // typed digit is preserved instead of being sliced off.
+                const isCallingCodeLeak = !!countryCallingCode &&
+                    capped.startsWith(countryCallingCode) &&
+                    phone?.nationalNumber === capped.slice(countryCallingCode.length);
+                if (phone && phone.nationalNumber !== capped && !isCallingCodeLeak) {
                     // Trunk-prefixed complete number (e.g. GB "07947…" → nationalNumber
                     // "7947…"). Synthesis would be invalid; use the actual international
                     // format which correctly omits the trunk prefix.
                     formattedNumber =
                         formatInternational && countryCallingCode
-                            ? formatInternational.slice(countryCallingCode.length + 1).trim()
+                            ? stripCallingCode(formatInternational, countryCallingCode)
                             : stripSpecialChars(capped);
                 }
                 else {
@@ -123,7 +135,7 @@ export const parsePhoneInput = (input, country) => {
                     // Synthesize an international string to get consistent spacing from
                     // the first digit, then strip "+{dialCode} ".
                     const intl = formatIncompletePhoneNumber(`+${country.dialCode}${capped}`);
-                    formattedNumber = stripSpecialChars(intl.slice(country.dialCode.length + 1).trim());
+                    formattedNumber = stripSpecialChars(stripCallingCode(intl, country.dialCode));
                 }
             }
             else {
@@ -151,7 +163,7 @@ export const parsePhoneInput = (input, country) => {
         formatInternational,
         formatNational,
         formatOriginal: formatInternational && countryCallingCode
-            ? formatInternational.slice(countryCallingCode.length + 1).trim()
+            ? stripCallingCode(formatInternational, countryCallingCode)
             : null,
         formattedNumber,
         isPossible: asYouType.isPossible(),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -30,33 +30,33 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "libphonenumber-js": "1.13.6"
+    "libphonenumber-js": "1.13.7"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "7.0.1",
-    "@sveltejs/kit": "^2.57.1",
+    "@sveltejs/kit": "^2.67.0",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tailwindcss/vite": "^4.3.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/svelte": "^5.4.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/micromatch": "^4.0.10",
     "@types/node": "^22.17.0",
     "dotenv": "^17.4.2",
     "jsdom": "^29.1.1",
     "micromatch": "^4.0.8",
-    "postcss": "^8.5.10",
+    "postcss": "^8.5.15",
     "publint": "^0.3.21",
-    "svelte": "^5.55.4",
-    "svelte-check": "^4.6.0",
-    "svelte2tsx": "^0.7.56",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.7.1",
+    "svelte2tsx": "^0.7.57",
     "tailwindcss": "^4.3.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "valibot": "^1.4.1",
-    "vite": "^7.3.2",
-    "vitest": "^4.1.5",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9",
     "zod": "^4.4.3"
   },
   "type": "module",