bug: Reset enteredEns on Address input when changing the value (#926)

scaffold-eth · Sep 6, 2024 · 8dcdf01 · 8dcdf01
1 parent ae698c4
commit 8dcdf01
Showing 1 changed file with 5 additions and 9 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx b/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { blo } from "blo";
 import { useDebounceValue } from "usehooks-ts";
 import { Address, isAddress } from "viem";
@@ -66,13 +66,9 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
     onChange(ensAddress);
   }, [ensAddress, onChange, debouncedValue]);
 
-  const handleChange = useCallback(
-    (newValue: Address) => {
-      setEnteredEnsName(undefined);
-      onChange(newValue);
-    },
-    [onChange],
-  );
+  useEffect(() => {
+    setEnteredEnsName(undefined);
+  }, [value]);
 
   const reFocus =
     isEnsAddressError ||
@@ -88,7 +84,7 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
       placeholder={placeholder}
       error={ensAddress === null}
       value={value as Address}
-      onChange={handleChange}
+      onChange={onChange}
       disabled={isEnsAddressLoading || isEnsNameLoading || disabled}
       reFocus={reFocus}
       prefix={