diff --git a/src/components/addresses/picker/AddressPicker.tsx b/src/components/addresses/picker/AddressPicker.tsx index 413c0aa..77b5ac8 100644 --- a/src/components/addresses/picker/AddressPicker.tsx +++ b/src/components/addresses/picker/AddressPicker.tsx @@ -33,6 +33,8 @@ noNames?: boolean; nameHint?: boolean; + suppressUpdates?: boolean; + className?: string; tabIndex?: number; inputRef?: Ref; @@ -48,6 +50,8 @@ noNames, nameHint, + suppressUpdates, + className, tabIndex, inputRef, @@ -107,7 +111,9 @@ : options; // Fetch an address or name hint if possible - const pickerHints = usePickerHints(nameHint, cleanValue, hasExactName); + const pickerHints = usePickerHints( + nameHint, cleanValue, hasExactName, suppressUpdates + ); const classes = classNames("address-picker", className, { "address-picker-wallets-only": walletsOnly, diff --git a/src/components/addresses/picker/PickerHints.tsx b/src/components/addresses/picker/PickerHints.tsx index e0c2438..f6ff406 100644 --- a/src/components/addresses/picker/PickerHints.tsx +++ b/src/components/addresses/picker/PickerHints.tsx @@ -29,7 +29,8 @@ export function usePickerHints( nameHint?: boolean, value?: string, - hasExactName?: boolean + hasExactName?: boolean, + suppressUpdates?: boolean ): JSX.Element | null { // Used for clean-up const isMounted = useRef(true); @@ -104,7 +105,8 @@ // Look up the address/name if it is valid (debounced to 250ms) useEffect(() => { // Skip doing anything when unmounted to avoid illegal state updates - if (!isMounted.current) debug("unmounted skipped lookup useEffect"); + if (!isMounted.current) return debug("unmounted skipped lookup useEffect"); + if (suppressUpdates) return debug("picker hint lookup check suppressed"); if (!value) { setFoundAddress(undefined); @@ -132,7 +134,7 @@ lookupHint(nameSuffix, value, hasValidAddress, hasExactName, nameHint); }, [ lookupHint, nameSuffix, value, addressPrefix, hasExactName, nameHint, - validAddress, lastTransactionID, joinedAddressList + validAddress, lastTransactionID, joinedAddressList, suppressUpdates ]); // Clean up the debounced function when unmounting diff --git a/src/pages/names/mgmt/NamePicker.tsx b/src/pages/names/mgmt/NamePicker.tsx index 21b784e..02a3f73 100644 --- a/src/pages/names/mgmt/NamePicker.tsx +++ b/src/pages/names/mgmt/NamePicker.tsx @@ -32,7 +32,11 @@ setOptions: Dispatch>, isMounted: MutableRefObject ): Promise { - if (!isMounted.current) return; + if (!isMounted.current) { + debug("unmounted name picker lookup result skipped"); + return; + } + setOptions(await fetchNames(t, nameSuffix, wallets)); } @@ -45,6 +49,7 @@ setValue?: (value: string[]) => void; filterOwner?: string; + suppressUpdates?: boolean; multiple?: boolean; allowAll?: boolean; @@ -61,6 +66,7 @@ setValue, filterOwner, + suppressUpdates, multiple, allowAll, @@ -96,7 +102,8 @@ // our wallets receives a name transaction. useEffect(() => { // Skip doing anything when unmounted to avoid illegal state updates - if (!isMounted.current) debug("unmounted skipped lookup useEffect"); + if (!isMounted.current) return debug("unmounted skipped lookup useEffect"); + if (suppressUpdates) return debug("name picker lookup suppressed"); debug( "addressList updated (%s, %s, %d)", @@ -111,13 +118,16 @@ isMounted ); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [throttledFetchNames, t, nameSuffix, refreshID, joinedAddressList]); + }, [ + throttledFetchNames, t, nameSuffix, refreshID, joinedAddressList, + suppressUpdates + ]); // If passed an address, filter out that address from the results. Used to // prevent sending names to the existing owner. Renders the name options. useEffect(() => { // Skip doing anything when unmounted to avoid illegal state updates - if (!isMounted.current) debug("unmounted skipped filter useEffect"); + if (!isMounted.current) return debug("unmounted skipped filter useEffect"); if (!nameOptions) { setFilteredOptions(null); diff --git a/src/pages/names/mgmt/NameTransferModal.tsx b/src/pages/names/mgmt/NameTransferModal.tsx index 20ec2e5..f64ccc9 100644 --- a/src/pages/names/mgmt/NameTransferModal.tsx +++ b/src/pages/names/mgmt/NameTransferModal.tsx @@ -268,6 +268,7 @@ tabIndex={1} filterOwner={recipient} + suppressUpdates={submitting} value={names} setValue={names => form.setFieldsValue({ names })} @@ -283,6 +284,7 @@ tabIndex={2} value={recipient} + suppressUpdates={submitting} noNames nameHint