From bd799ea51ac1e016b145f154a8f20d9ad3f82c2a Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>
Date: Thu, 28 Apr 2022 14:09:27 +0530
Subject: [PATCH] Autofocus CodeMirror SQL input to the first element of a
 form.

---
 web/pgadmin/static/js/SchemaView/MappedControl.jsx  | 2 +-
 web/pgadmin/static/js/components/FormComponents.jsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx
index 4196d3fd3..4a0f26746 100644
--- a/web/pgadmin/static/js/SchemaView/MappedControl.jsx
+++ b/web/pgadmin/static/js/SchemaView/MappedControl.jsx
@@ -75,7 +75,7 @@ function MappedFormControlBase({ type, value, id, onChange, className, visible,
   case 'file':
     return <FormInputFileSelect name={name} value={value} onChange={onTextChange} className={className} inputRef={inputRef} {...props} />;
   case 'sql':
-    return <FormInputSQL name={name} value={value} onChange={onSqlChange} className={className} noLabel={noLabel} {...props} />;
+    return <FormInputSQL name={name} value={value} onChange={onSqlChange} className={className} noLabel={noLabel} inputRef={inputRef} {...props} />;
   case 'note':
     return <FormNote className={className} {...props} />;
   case 'datetimepicker':
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index eade7b045..28812238a 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -155,13 +155,16 @@ FormInput.propTypes = {
   testcid: PropTypes.any,
 };
 
-export function InputSQL({ value, options, onChange, className, controlProps, ...props }) {
+export function InputSQL({ value, options, onChange, className, controlProps, inputRef, ...props }) {
   const classes = useStyles();
   const editor = useRef();
 
   return (
     <CodeMirror
-      currEditor={(obj) => editor.current = obj}
+      currEditor={(obj) => {
+        editor.current = obj;
+        inputRef?.(obj);
+      }}
       value={value || ''}
       options={{
         lineNumbers: true,
@@ -186,6 +189,7 @@ InputSQL.propTypes = {
   readonly: PropTypes.bool,
   className: CustomPropTypes.className,
   controlProps: PropTypes.object,
+  inputRef: CustomPropTypes.ref,
 };
 
 export function FormInputSQL({ hasError, required, label, className, helpMessage, testcid, value, controlProps, noLabel, ...props }) {