phone input: fix broken incoming values

src/lib/PhoneInput.svelte

@@ -6,6 +6,7 @@
 	import { AsYouType, type PhoneNumber, type CountryCode } from 'libphonenumber-js';
 	import { generateIdentifier } from './util';
 	import type { ClassValue } from 'svelte/elements';
+	import { untrack } from 'svelte';
 
 	interface Props {
 		name?: string;
@@ -31,6 +32,7 @@
 
 	const id = $derived(generateIdentifier('phone-input', name));
 	let lastRawValue = $state('');
+	let lastValue = $state<PhoneNumber | undefined>(value);
 	let country = $state<ICountry | undefined>();
 	let selectedCountryItem = $state<ComboboxOption | undefined>();
 	let countriesOpen = $state<boolean>(false);
@@ -101,6 +103,19 @@
 		if (country) return country.isoCode as CountryCode;
 		return undefined;
 	});
+
+	let renderValue = value?.formatNational() ?? '';
+	let renderInputElement = $state<HTMLInputElement | null>(null);
+
+	$effect(() => {
+		if (value) {
+			untrack(() => {
+				if (renderInputElement) {
+					renderInputElement.value = value?.formatNational() ?? '';
+				}
+			});
+		}
+	});
 </script>
 
 {#snippet renderIcon(item: ComboboxOption)}
@@ -139,6 +154,8 @@
 
 		<div class="w-full">
 			<StyledRawInput
+				value={renderValue}
+				bind:ref={renderInputElement}
 				type="tel"
 				{placeholder}
 				validate={{
@@ -178,18 +195,21 @@
 							input.value = formatted;
 						}, 1);
 					}
-					value = formatter.getNumber();
+					lastValue = formatter.getNumber();
 
 					if (formatter.isValid() && formatter.isInternational() && value) {
 						const country = formatter.getCountry();
 						if (country) {
 							setCountryByISO(country);
 							setTimeout(() => {
-								if (value) input.value = value.formatNational();
+								if (lastValue) input.value = lastValue.formatNational();
 							}, 1);
 						}
 					}
 				}}
+				onblur={() => {
+					value = lastValue;
+				}}
 			/>
 		</div>
 	</div>