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;
};