Merge pull request #240 from gyurielf/fix-strict-country-option

Option to make the selected country permanent and prevent country update from input.

Author: gyurielf

.changeset/stupid-cooks-sneeze.md

@@ -0,0 +1,5 @@
+---
+'svelte-tel-input': minor
+---
+
+feat: option to disallow detecting and changing country from e164 number

apps/site/src/lib/views/OptionsPanel.svelte

@@ -79,6 +79,27 @@
 				<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Spaces</span
 				>
 			</label>
+			<label
+				for="strictCountry-{markupId}"
+				class="relative inline-flex items-center align-middle cursor-pointer"
+			>
+				<input
+					id="strictCountry-{markupId}"
+					type="checkbox"
+					value={options.strictCountry}
+					class="sr-only peer"
+					checked={options.strictCountry}
+					on:change={() => {
+						options.strictCountry = !options.strictCountry;
+					}}
+				/>
+				<div
+					class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+				/>
+				<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+					>Strict Country</span
+				>
+			</label>
 			<label
 				for="autoPlaceholder-{markupId}"
 				class="relative inline-flex items-center align-middle cursor-pointer"

apps/site/src/lib/views/Usage.svelte

@@ -29,7 +29,8 @@
 		autoPlaceholder: true,
 		spaces: true,
 		invalidateOnCountryChange: true,
-		format: 'national'
+		format: 'national',
+		strictCountry: false
 	} satisfies TelInputOptions;
 
 	/* basicWithE164 example */
@@ -43,7 +44,8 @@
 		autoPlaceholder: true,
 		spaces: true,
 		invalidateOnCountryChange: false,
-		format: 'national'
+		format: 'national',
+		strictCountry: false
 	} satisfies TelInputOptions;
 
 	/* basicWithNull example */
@@ -57,7 +59,8 @@
 		autoPlaceholder: true,
 		spaces: true,
 		invalidateOnCountryChange: false,
-		format: 'national'
+		format: 'national',
+		strictCountry: false
 	} satisfies TelInputOptions;
 
 	/* eventDriven example */
@@ -71,7 +74,8 @@
 		autoPlaceholder: true,
 		spaces: true,
 		invalidateOnCountryChange: false,
-		format: 'national'
+		format: 'national',
+		strictCountry: false
 	} satisfies TelInputOptions;
 </script>
 

packages/svelte-tel-input/.eslintignore

@@ -20,4 +20,5 @@ static
 
 # Utility and CI tools
 zarf
-scripts
+scripts
+**/reash/*

packages/svelte-tel-input/.gitignore

@@ -10,4 +10,5 @@ node_modules
 .vercel
 .output
 coverage
-.vscode
+.vscode
+reash/*

packages/svelte-tel-input/.prettierignore

@@ -21,4 +21,5 @@ yarn.lock
 # Utility and CI tools
 zarf
 scripts
-examplePhoneNumbers.ts
+examplePhoneNumbers.ts
+**/reash/*

packages/svelte-tel-input/src/lib/components/input/TelInput.svelte

@@ -6,9 +6,7 @@
 		getCountryForPartialE164Number,
 		generatePlaceholder,
 		telInputAction,
-
 		allowedCharacters
-
 	} from '$lib/utils/index.js';
 	import type { DetailedValue, CountryCode, E164Number, TelInputOptions } from '$lib/types';
 
@@ -24,7 +22,8 @@
 		autoPlaceholder: true,
 		spaces: true,
 		invalidateOnCountryChange: false,
-		format: 'national'
+		format: 'national',
+		strictCountry: false
 	} satisfies TelInputOptions;
 
 	export let autocomplete: string | null = null;
@@ -79,6 +78,7 @@
 			country = countryCode;
 			prevCountry = country;
 			dispatch('updateCountry', country);
+			dispatch('updateDetailedValue', detailedValue);
 		}
 		return country;
 	};
@@ -89,39 +89,44 @@
 		initialCursorPosition: number
 	) => {
 		let fvIndex = 0;
-		for(let nvIndex = 0; nvIndex < initialCursorPosition; nvIndex++) {
-
+		for (let nvIndex = 0; nvIndex < initialCursorPosition; nvIndex++) {
 			// Since newValue has not been normalized yet, we need to map any non standard digits.
-			const nvChar = allowedCharacters(newValue[nvIndex], {spaces: false});
+			const nvChar = allowedCharacters(newValue[nvIndex], { spaces: false });
 
 			// For each non-formatting character encountered in the value entered by the user,
 			// find the corresponding digit in the formatted value.
-			if(nvChar >= '0' && nvChar <= '9') {
-				while(!(formattedValue[fvIndex] >= '0' && formattedValue[fvIndex] <= '9') && fvIndex < formattedValue.length) {
+			if (nvChar >= '0' && nvChar <= '9') {
+				while (
+					!(formattedValue[fvIndex] >= '0' && formattedValue[fvIndex] <= '9') &&
+					fvIndex < formattedValue.length
+				) {
 					fvIndex++;
 				}
 				fvIndex++;
 			}
 		}
 
 		return fvIndex;
-	}
+	};
 
 	const handleParsePhoneNumber = async (
 		rawInput: string | null,
 		currCountry: CountryCode | null = null
 	) => {
 		const input = rawInput as E164Number;
 		if (input !== null) {
-			const numberHasCountry = getCountryForPartialE164Number(input);
+			const detectedCountry = getCountryForPartialE164Number(input);
+			const useCountry = options?.strictCountry
+				? currCountry
+				: detectedCountry ?? currCountry;
 
-			if (numberHasCountry && numberHasCountry !== prevCountry) {
-				updateCountry(numberHasCountry);
+			if (!options?.strictCountry && detectedCountry && detectedCountry !== prevCountry) {
+				updateCountry(detectedCountry);
 			}
 
 			try {
 				detailedValue = normalizeTelInput(
-					parsePhoneNumberWithError(input, numberHasCountry ?? currCountry ?? undefined)
+					parsePhoneNumberWithError(input, useCountry ?? undefined)
 				);
 			} catch (err) {
 				if (err instanceof ParseError) {
@@ -144,8 +149,12 @@
 
 				// Need to wait for input element to update before cursor position can be restored
 				await tick();
-				if(el) {
-					const newCursorPosition = findNewCursorPosition(input, inputValue, initialCursorPosition)
+				if (el) {
+					const newCursorPosition = findNewCursorPosition(
+						input,
+						inputValue,
+						initialCursorPosition
+					);
 					el.selectionStart = newCursorPosition;
 					el.selectionEnd = newCursorPosition;
 				}
@@ -154,8 +163,12 @@
 
 				// Need to wait for input element to update before cursor position can be restored
 				await tick();
-				if(el) {
-					const newCursorPosition = findNewCursorPosition(input, inputValue, initialCursorPosition)
+				if (el) {
+					const newCursorPosition = findNewCursorPosition(
+						input,
+						inputValue,
+						initialCursorPosition
+					);
 					el.selectionStart = newCursorPosition;
 					el.selectionEnd = newCursorPosition;
 				}
@@ -226,14 +239,19 @@
 		if (castedValue) {
 			handleParsePhoneNumber(
 				castedValue,
-				getCountryForPartialE164Number(castedValue) || newCountry
+				options?.strictCountry
+					? country
+					: getCountryForPartialE164Number(castedValue) || newCountry
 			);
 		}
 	};
 
 	onMount(() => {
 		if (value) {
-			handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
+			handleParsePhoneNumber(
+				value,
+				options?.strictCountry ? country : getCountryForPartialE164Number(value) || country
+			);
 		}
 	});
 </script>
@@ -265,6 +283,7 @@
 	use:telInputAction={{
 		handler: handleInputAction,
 		spaces: combinedOptions.spaces,
-		value
+		value,
+		strictCountryCode: combinedOptions.strictCountry
 	}}
 />

packages/svelte-tel-input/src/lib/types/index.d.ts

@@ -75,6 +75,11 @@ export interface TelInputOptions {
 	 * @default false
 	 */
 	invalidateOnCountryChange?: boolean;
+	/**
+	 * Prevent automatic country parsing from the input value. It validates via the passed `country` property value.
+	 * @default false
+	 */
+	strictCountry?: boolean;
 	/**
 	 *  "international": `+36 20 123 4567`,
 	 *  "default": `20 123 4567`

packages/svelte-tel-input/src/lib/utils/directives/telInputAction.ts

@@ -4,19 +4,22 @@ export const telInputAction = (
 	node: HTMLInputElement,
 	{
 		handler,
-		spaces
+		spaces,
+		strictCountryCode
 	}: {
 		handler: (val: string) => void;
 		spaces: boolean;
 		value: E164Number | null;
+		strictCountryCode: boolean;
 	}
 ) => {
 	const onInput = (event: Event) => {
 		if (node && node.contains(event.target as HTMLInputElement)) {
 			const currentValue = (event.target as HTMLInputElement).value;
 			const formattedInput = inputParser(currentValue, {
 				parseCharacter: inspectAllowedChars,
-				allowSpaces: spaces
+				allowSpaces: spaces,
+				disallowPlusSign: strictCountryCode
 			});
 			node.value = formattedInput;
 			handler(formattedInput);

packages/svelte-tel-input/src/lib/utils/helpers.ts

@@ -48,16 +48,16 @@ export const normalizeTelInput = (input?: PhoneNumber) => {
 			isPossible: input ? input.isPossible() : false,
 			phoneNumber: input ? input.number : null,
 			countryCallingCode: input ? input.countryCallingCode : null,
-			formattedNumber: input ? (new AsYouType()).input(input.number) : null,
+			formattedNumber: input ? new AsYouType().input(input.number) : null,
 			nationalNumber: input ? input.nationalNumber : null,
-			formatInternational: input ? (new AsYouType()).input(input.number) : null,
+			formatInternational: input ? new AsYouType().input(input.number) : null,
 			formatOriginal: input
-				? (new AsYouType())
+				? new AsYouType()
 						.input(input.number)
 						.slice(input.countryCallingCode.length + 1)
 						.trim()
 				: null,
-			formatNational: input ? (new AsYouType(input.country)).input(input.number) : null,
+			formatNational: input ? new AsYouType(input.country).input(input.number) : null,
 			uri: input ? input.getURI() : null,
 			e164: input ? input.number : null
 		}).filter(([, value]) => value !== null)
@@ -336,16 +336,23 @@ export const inputParser = (
 	text: string,
 	{
 		allowSpaces,
-		parseCharacter
+		parseCharacter,
+		disallowPlusSign
 	}: {
 		allowSpaces: boolean;
-		parseCharacter: (char: string, val: string, allowSpaces?: boolean) => string | undefined;
+		disallowPlusSign: boolean;
+		parseCharacter: (
+			char: string,
+			val: string,
+			allowSpaces: boolean,
+			disallowPlusSign: boolean
+		) => string | undefined;
 	}
 ) => {
 	let value = '';
 
 	for (let index = 0; index < text.length; index++) {
-		const character = parseCharacter(text[index], value, allowSpaces);
+		const character = parseCharacter(text[index], value, allowSpaces, disallowPlusSign);
 		if (character !== undefined) {
 			value += character;
 		}
@@ -354,9 +361,14 @@ export const inputParser = (
 	return value;
 };
 
-export const inspectAllowedChars = (character: string, value: string, allowSpaces?: boolean) => {
+export const inspectAllowedChars = (
+	character: string,
+	value: string,
+	allowSpaces: boolean,
+	disallowPlusSign: boolean
+) => {
 	// Leading plus is allowed
-	if (character === '+') {
+	if (!disallowPlusSign && character === '+') {
 		if (!value) {
 			return character;
 		}