From 53bd2c2dc6826b6519bd59c994ab77c8beda666e Mon Sep 17 00:00:00 2001
From: Akshay Joshi <akshay.joshi@enterprisedb.com>
Date: Wed, 18 May 2022 12:08:37 +0530
Subject: [PATCH] Ensure that when the user presses the Enter key on the
 connect to server dialog, it should work.

---
 .../browser/static/js/ConnectServerContent.jsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/pgadmin/browser/static/js/ConnectServerContent.jsx b/web/pgadmin/browser/static/js/ConnectServerContent.jsx
index 1e334bf49..05dbf8a8f 100644
--- a/web/pgadmin/browser/static/js/ConnectServerContent.jsx
+++ b/web/pgadmin/browser/static/js/ConnectServerContent.jsx
@@ -12,6 +12,7 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
   const classes = useModalStyles();
   const containerRef = useRef();
   const firstEleRef = useRef();
+  const okBtnRef = useRef();
   const [formData, setFormData] = useState({
     tunnel_password: '',
     save_tunnel_password: false,
@@ -27,6 +28,13 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
     setFormData((prev)=>({...prev, [id]: val}));
   };
 
+  const onKeyDown = (e) => {
+    // If enter key is pressed then click on OK button
+    if (e.keyCode == 13) {
+      okBtnRef.current?.click();
+    }
+  };
+
   useEffect(()=>{
     setTimeout(()=>{
       firstEleRef.current && firstEleRef.current.focus();
@@ -55,7 +63,7 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
           </Box>
           <Box marginTop='12px'>
             <InputText inputRef={firstEleRef} type="password" value={formData['tunnel_password']} maxLength={null}
-              onChange={(e)=>onTextChange(e, 'tunnel_password')} />
+              onChange={(e)=>onTextChange(e, 'tunnel_password')} onKeyDown={(e)=>onKeyDown(e)} />
           </Box>
           <Box marginTop='12px' marginBottom='12px'>
             <InputCheckbox controlProps={{label: gettext('Save Password')}} value={formData['save_tunnel_password']}
@@ -78,7 +86,7 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
                 firstEleRef.current = ele;
               }
             }} type="password" value={formData['password']} maxLength={null}
-            onChange={(e)=>onTextChange(e, 'password')} />
+            onChange={(e)=>onTextChange(e, 'password')} onKeyDown={(e)=>onKeyDown(e)}/>
           </Box>
           <Box marginTop='12px'>
             <InputCheckbox controlProps={{label: gettext('Save Password')}} value={formData['save_password']}
@@ -93,7 +101,7 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
         <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
         }} >{gettext('Cancel')}</DefaultButton>
-        <PrimaryButton data-test="save" className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{
+        <PrimaryButton ref={okBtnRef} data-test="save" className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{
           let postFormData = new FormData();
           if(data.prompt_tunnel_password) {
             postFormData.append('tunnel_password', formData.tunnel_password);