fix: Fix WalletInput component when changing its value programmatical…

…ly (#22)
aragon · Aug 31, 2023 · 347fb84 · 347fb84
1 parent c8cb972
commit 347fb84
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 -   Bump `@adobe/css-tools` from 4.2.0 to 4.3.1
+-   Re-renders on `WalletInput` component when programmatically changing its value
 
 ## [0.2.12] - 2023-08-23
 

diff --git a/src/components/input/walletInput.tsx b/src/components/input/walletInput.tsx
@@ -128,7 +128,6 @@ export const WalletInput = React.forwardRef<HTMLTextAreaElement, WalletInputProp
         const [isEditing, setIsEditing] = useState(false);
         const [displayMode, setDisplayMode] = useState<DisplayMode>(() => (value.ensName ? 'ensName' : 'address'));
         const [initialHeight, setInitialHeight] = useState(0);
-        const [resolvedValues, setResolvedValues] = useState<WalletInputValue>();
 
         const canToggle = !!value.address && !!value.ensName;
         const togglerLabel = displayMode === 'address' ? 'ENS' : '0x…';
@@ -206,15 +205,12 @@ export const WalletInput = React.forwardRef<HTMLTextAreaElement, WalletInputProp
                     }
                 }
 
-                setResolvedValues(newValue);
+                if (value.address !== newValue.address || value.ensName !== newValue.ensName) {
+                    onValueChange(newValue);
+                }
             }
 
-            if (
-                ensSupported && // network supports ens
-                displayMode && // not initial state/render
-                value[displayMode] && // the displayed value isn't empty
-                JSON.stringify(value) !== JSON.stringify(resolvedValues) // value and resolved values don't match
-            ) {
+            if (ensSupported && value[displayMode]) {
                 resolveValues();
             }
         }, [
@@ -226,21 +222,10 @@ export const WalletInput = React.forwardRef<HTMLTextAreaElement, WalletInputProp
             onResolvingError,
             resolveAddressFromEnsName,
             resolveEnsNameFromAddress,
-            resolvedValues,
+            onValueChange,
             value,
         ]);
 
-        useEffect(() => {
-            if (resolvedValues) {
-                // update the controller value if it is not the same as the resolved values;
-                // this works in conjunction with the previous hook
-                const resolvedType = displayMode === 'address' ? 'ensName' : 'address';
-                if (value[resolvedType] !== resolvedValues[resolvedType]) {
-                    onValueChange(resolvedValues);
-                }
-            }
-        }, [displayMode, onValueChange, resolvedValues, value]);
-
         // resolve the forwarded ref and local ref
         useEffect(() => {
             if (typeof ref === 'function') {
@@ -326,8 +311,6 @@ export const WalletInput = React.forwardRef<HTMLTextAreaElement, WalletInputProp
 
         const setValue = useCallback(
             (addressOrEns: string) => {
-                setResolvedValues(undefined);
-
                 if (addressOrEns === '') {
                     return { ensName: '', address: '' };
                 }