From 33de65ea48b94ea3e1378ca5e29f7c0caf4e4da9 Mon Sep 17 00:00:00 2001
From: Septs <github@septs.pw>
Date: Sat, 14 May 2022 18:45:21 +0800
Subject: [PATCH] chore: improve keyboard event

---
 .../src/components/InjectedComponents/CommentBox.tsx  | 11 +++++------
 .../shared/SelectProfileUI/SelectProfileUI.tsx        |  7 +++----
 .../plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx  |  2 +-
 .../src/SNSAdaptor/components/SearchBox.tsx           |  4 ++--
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/mask/src/components/InjectedComponents/CommentBox.tsx b/packages/mask/src/components/InjectedComponents/CommentBox.tsx
index 7b2fc2082784..f4596c77710f 100644
--- a/packages/mask/src/components/InjectedComponents/CommentBox.tsx
+++ b/packages/mask/src/components/InjectedComponents/CommentBox.tsx
@@ -45,13 +45,12 @@ export function CommentBox(props: CommentBoxProps) {
                 className={classes.root}
                 inputProps={{ className: classes.input, 'data-testid': 'comment_input' }}
                 placeholder={t('comment_box__placeholder')}
-                onKeyDownCapture={(e) => {
-                    const node = e.target as HTMLInputElement
+                onKeyDown={(event) => {
+                    const node = event.target as HTMLInputElement
                     if (!node.value) return
-                    if (e.key === 'Enter') {
-                        props.onSubmit(node.value)
-                        node.value = ''
-                    }
+                    if (event.key !== 'Enter') return
+                    props.onSubmit(node.value)
+                    node.value = '' // clear content
                 }}
                 {...props.inputProps}
             />
diff --git a/packages/mask/src/components/shared/SelectProfileUI/SelectProfileUI.tsx b/packages/mask/src/components/shared/SelectProfileUI/SelectProfileUI.tsx
index 3843678a4e74..8ba3971545df 100644
--- a/packages/mask/src/components/shared/SelectProfileUI/SelectProfileUI.tsx
+++ b/packages/mask/src/components/shared/SelectProfileUI/SelectProfileUI.tsx
@@ -96,10 +96,9 @@ export function SelectProfileUI(props: SelectProfileUIProps) {
                         (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setSearch(e.target.value),
                         [],
                     )}
-                    onKeyDown={(e) => {
-                        if (search === '' && e.key === 'Backspace') {
-                            onSetSelected(selected.slice(0, selected.length - 1))
-                        }
+                    onKeyDown={(event) => {
+                        if (search !== '' || event.key !== 'Backspace') return
+                        onSetSelected(selected.slice(0, selected.length - 1))
                     }}
                     placeholder={disabled ? '' : t('search_box_placeholder')}
                     disabled={disabled}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx
index 804abf70cac7..d0c8c77695d3 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx
@@ -57,7 +57,7 @@ export function WalletRenameWalletDialog() {
                     value={name}
                     onChange={(e) => setName(e.target.value)}
                     placeholder={t('plugin_wallet_name_placeholder')}
-                    onKeyPress={(e) => e.key === 'Enter' && handleRename()}
+                    onKeyPress={(event) => event.key === 'Enter' && handleRename()}
                 />
             </DialogContent>
             <DialogActions className={classes.dialogActions}>
diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SearchBox.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SearchBox.tsx
index 226c3518745a..e70c56aa224b 100644
--- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SearchBox.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SearchBox.tsx
@@ -95,8 +95,8 @@ export const SearchBox = memo<SearchBoxProps>(({ onSearch }) => {
                         placeholder={t.search_input_placeholder()}
                         autoFocus
                         fullWidth
-                        onKeyPress={(e: React.KeyboardEvent) => {
-                            if (e.key !== 'Enter') return
+                        onKeyPress={(event) => {
+                            if (event.key !== 'Enter') return
                             onSearch(selectedChain?.id ?? DEFAULT_SEARCH_CHAIN, searchContent ?? '')
                         }}
                         onChange={(e) => setSearchSearchContent(e.target.value)}