Merge pull request #230 from autumn-canfield/issue-212-cursor-jumps

Prevent cursor from jumping to end of input (Issue 212)

Author: gyurielf

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

@@ -1,11 +1,14 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, tick } from 'svelte';
 	import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
 	import {
 		normalizeTelInput,
 		getCountryForPartialE164Number,
 		generatePlaceholder,
-		telInputAction
+		telInputAction,
+
+		allowedCharacters
+
 	} from '$lib/utils/index.js';
 	import type { DetailedValue, CountryCode, E164Number, TelInputOptions } from '$lib/types';
 
@@ -80,7 +83,31 @@
 		return country;
 	};
 
-	const handleParsePhoneNumber = (
+	const findNewCursorPosition = (
+		newValue: string,
+		formattedValue: string,
+		initialCursorPosition: number
+	) => {
+		let fvIndex = 0;
+		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});
+
+			// 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) {
+					fvIndex++;
+				}
+				fvIndex++;
+			}
+		}
+
+		return fvIndex;
+	}
+
+	const handleParsePhoneNumber = async (
 		rawInput: string | null,
 		currCountry: CountryCode | null = null
 	) => {
@@ -111,10 +138,27 @@
 			const formatOption = combinedOptions.format === 'national' ? 'nationalNumber' : 'e164';
 			const formattedValue =
 				combinedOptions.format === 'national' ? 'formatOriginal' : 'formatInternational';
+			const initialCursorPosition = el?.selectionStart || 0;
 			if (combinedOptions.spaces && detailedValue?.[formattedValue]) {
 				inputValue = detailedValue[formattedValue] ?? null;
+
+				// Need to wait for input element to update before cursor position can be restored
+				await tick();
+				if(el) {
+					const newCursorPosition = findNewCursorPosition(input, inputValue, initialCursorPosition)
+					el.selectionStart = newCursorPosition;
+					el.selectionEnd = newCursorPosition;
+				}
 			} else if (detailedValue?.[formatOption]) {
 				inputValue = detailedValue[formatOption] ?? null;
+
+				// Need to wait for input element to update before cursor position can be restored
+				await tick();
+				if(el) {
+					const newCursorPosition = findNewCursorPosition(input, inputValue, initialCursorPosition)
+					el.selectionStart = newCursorPosition;
+					el.selectionEnd = newCursorPosition;
+				}
 			}
 
 			// keep the input value as value

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 ? input.formatInternational() : null,
+			formattedNumber: input ? (new AsYouType()).input(input.number) : null,
 			nationalNumber: input ? input.nationalNumber : null,
-			formatInternational: input ? input.formatInternational() : null,
+			formatInternational: input ? (new AsYouType()).input(input.number) : null,
 			formatOriginal: input
-				? input
-						.formatInternational()
+				? (new AsYouType())
+						.input(input.number)
 						.slice(input.countryCallingCode.length + 1)
 						.trim()
 				: null,
-			formatNational: input ? input.formatNational() : 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)