From ec55244473d4bb2898999099477125e5d8a3e9d0 Mon Sep 17 00:00:00 2001
From: Hodor <lost1q84@gmail.com>
Date: Fri, 22 Sep 2023 19:05:50 +0800
Subject: [PATCH] fix: SafeNonceSelector dropdown (#1771)

---
 .../TxComponents/SafeNonceSelector.tsx        | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/ui/views/Approval/components/TxComponents/SafeNonceSelector.tsx b/src/ui/views/Approval/components/TxComponents/SafeNonceSelector.tsx
index e6ac10c6708..c36ceea1f7a 100644
--- a/src/ui/views/Approval/components/TxComponents/SafeNonceSelector.tsx
+++ b/src/ui/views/Approval/components/TxComponents/SafeNonceSelector.tsx
@@ -1,11 +1,11 @@
 import { useAccount } from '@/ui/store-hooks';
 import { useWallet } from '@/ui/utils';
+import { findChainByID } from '@/utils/chain';
 import { BasicSafeInfo } from '@rabby-wallet/gnosis-sdk';
 import { SafeTransactionItem } from '@rabby-wallet/gnosis-sdk/dist/api';
 import { useRequest } from 'ahooks';
 import { Form, Input, Skeleton, Spin } from 'antd';
 import clsx from 'clsx';
-import { INTERNAL_REQUEST_ORIGIN } from 'consts';
 import { maxBy, sortBy, uniqBy } from 'lodash';
 import React, {
   MouseEventHandler,
@@ -19,11 +19,10 @@ import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import IconChecked from 'ui/assets/safe-nonce-select/checked.svg';
 import IconDown from 'ui/assets/safe-nonce-select/down.svg';
-import IconUnchecked from 'ui/assets/safe-nonce-select/unchecked.svg';
 import IconFind from 'ui/assets/safe-nonce-select/find.svg';
+import IconUnchecked from 'ui/assets/safe-nonce-select/unchecked.svg';
 import { intToHex } from 'ui/utils/number';
-import { findChainByID } from '@/utils/chain';
-import { getActionTypeText, getActionTypeTextByType } from '../Actions/utils';
+import { getActionTypeTextByType } from '../Actions/utils';
 
 const Wrapper = styled.div`
   border-radius: 6px;
@@ -199,18 +198,21 @@ export const SafeNonceSelector = ({
     } else {
       onChange?.(intToHex(v));
     }
+    setIsShowOptionList(false);
   };
 
   const optionListRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const parent = document.querySelector('.approval-tx');
-    if (optionListRef.current && parent) {
-      const shouldScroll =
-        optionListRef.current.getBoundingClientRect().top + 52 >
-        parent.getBoundingClientRect().height;
-      if (shouldScroll) {
-        parent.scrollTo(0, parent.scrollTop + 128);
+    if (isShowOptionList) {
+      const parent = document.querySelector('.approval-tx');
+      if (optionListRef.current && parent) {
+        const shouldScroll =
+          optionListRef.current.getBoundingClientRect().top + 52 >
+          parent.getBoundingClientRect().height;
+        if (shouldScroll) {
+          parent.scrollTo(0, parent.scrollTop + 128);
+        }
       }
     }
   }, [isShowOptionList]);