diff --git a/packages/svelte/src/lib/components/scaffold-eth/inputs/AddressInput.svelte b/packages/svelte/src/lib/components/scaffold-eth/inputs/AddressInput.svelte index fafc5ea..78c1379 100644 --- a/packages/svelte/src/lib/components/scaffold-eth/inputs/AddressInput.svelte +++ b/packages/svelte/src/lib/components/scaffold-eth/inputs/AddressInput.svelte @@ -14,7 +14,7 @@ import { untrack } from "svelte"; import { normalize } from "viem/ens"; - let { value, name, placeholder, onchange, disabled }: CommonInputProps
= $props(); + let { value = $bindable(), name, placeholder, onchange, disabled }: CommonInputProps
= $props(); let rawDebouncedValue: string | undefined = $state(undefined); let debouncedTimeout: number | undefined; @@ -76,7 +76,8 @@ enteredEnsName = debouncedValue; untrack(() => { - onchange(ensAddress!.result.data!); + value = ensAddress!.result.data!; + onchange?.(ensAddress!.result.data!); }); }); @@ -96,7 +97,7 @@ const handleChange = (newValue: Address) => { enteredEnsName = undefined; - onchange(newValue); + onchange?.(newValue); }; const reFocus = $derived( @@ -109,8 +110,10 @@ ); +{value} + +/InputBase> diff --git a/packages/svelte/src/lib/components/scaffold-eth/inputs/EtherInput.svelte b/packages/svelte/src/lib/components/scaffold-eth/inputs/EtherInput.svelte index 045884f..b8311a9 100644 --- a/packages/svelte/src/lib/components/scaffold-eth/inputs/EtherInput.svelte +++ b/packages/svelte/src/lib/components/scaffold-eth/inputs/EtherInput.svelte @@ -40,7 +40,14 @@ } } - const { value, name, placeholder, onchange, disabled, usdMode }: CommonInputProps & { usdMode?: boolean } = $props(); + let { + value = $bindable(), + name, + placeholder, + onchange, + disabled, + usdMode, + }: CommonInputProps & { usdMode?: boolean } = $props(); let internalUsdMode = $state(nativeCurrencyPrice.price > 0 ? Boolean(usdMode) : false); let transitoryDisplayValue = $state(); @@ -82,7 +89,8 @@ } const newEthValue = displayValueToEtherValue(internalUsdMode, newValue, nativeCurrencyPrice.price); - onchange(newEthValue); + value = newEthValue; + onchange?.(newEthValue); }; const toggleMode = () => { diff --git a/packages/svelte/src/lib/components/scaffold-eth/inputs/InputBase.svelte b/packages/svelte/src/lib/components/scaffold-eth/inputs/InputBase.svelte index ea93dff..423a4b3 100644 --- a/packages/svelte/src/lib/components/scaffold-eth/inputs/InputBase.svelte +++ b/packages/svelte/src/lib/components/scaffold-eth/inputs/InputBase.svelte @@ -38,7 +38,7 @@ const handleChange = (e: Event) => { const target = e.target as HTMLInputElement; // eslint-disable-next-line no-undef - onchange(target.value as unknown as T); + onchange?.(target.value as unknown as T); }; const handleFocus = (e: FocusEvent) => { diff --git a/packages/svelte/src/lib/components/scaffold-eth/inputs/IntegerInput.svelte b/packages/svelte/src/lib/components/scaffold-eth/inputs/IntegerInput.svelte index 4862c58..4579af2 100644 --- a/packages/svelte/src/lib/components/scaffold-eth/inputs/IntegerInput.svelte +++ b/packages/svelte/src/lib/components/scaffold-eth/inputs/IntegerInput.svelte @@ -31,10 +31,10 @@ if (!value) return; if (typeof value === "bigint") { value = value * 10n ** 18n; - return onchange(value); + return onchange?.(value); } value = BigInt(Math.round(Number(value) * 10 ** 18)); - return onchange(value); + return onchange?.(value); }; diff --git a/packages/svelte/src/lib/components/scaffold-eth/inputs/utils.ts b/packages/svelte/src/lib/components/scaffold-eth/inputs/utils.ts index 1ea219b..a4e103d 100644 --- a/packages/svelte/src/lib/components/scaffold-eth/inputs/utils.ts +++ b/packages/svelte/src/lib/components/scaffold-eth/inputs/utils.ts @@ -1,7 +1,7 @@ export type CommonInputProps = { value: T; name?: string; - onchange: (newValue: T) => void; + onchange?: (newValue: T) => void; placeholder?: string; disabled?: boolean; };