Allow binding value for AddressInput.svelte

ByteAtATime · Apr 8, 2024 · 9df779d · 9df779d
1 parent 7a9c186
commit 9df779d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git 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<Address | string> = $props();
+  let { value = $bindable(), name, placeholder, onchange, disabled }: CommonInputProps<Address | string> = $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 @@
   );
 </script>
 
+{value}
+
 <InputBase
-  value={value as Address}
+  bind:value={value as Address}
   {name}
   {placeholder}
   error={ensAddress?.result.data === null}
@@ -139,3 +142,4 @@
     {/if}
   {/snippet}
 </InputBase>
+/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
@@ -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<string | undefined>();
@@ -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
@@ -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
@@ -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);
   };
 </script>
 

diff --git 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<T = string> = {
   value: T;
   name?: string;
-  onchange: (newValue: T) => void;
+  onchange?: (newValue: T) => void;
   placeholder?: string;
   disabled?: boolean;
 };