public inbox for [email protected]  

help / color / mirror / Atom feed

From: Aditya Toshniwal <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin][patch] Autofocus CodeMirror input in SchemaView
Date: Thu, 28 Apr 2022 12:44:52 +0530
Message-ID: <CAM9w-_mVBwXMnYdhGVtO0o7w1X+CbTDw--T9qBauCHr=1N1VvQ@mail.gmail.com> (raw)

Hi Hackers,

Attached patch allows to autofocus CodeMirror SQL input if it is the first
element in the form.
Please review.

-- 
Thanks,
Aditya Toshniwal
pgAdmin Hacker | Software Architect | *edbpostgres.com*
<http://edbpostgres.com;
"Don't Complain about Heat, Plant a TREE"


Attachments:

  [application/octet-stream] autfocus.cm.patch (2.0K, 3-autfocus.cm.patch)
  download | inline diff:
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 }) {

view thread (2+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected]
  Subject: Re: [pgAdmin][patch] Autofocus CodeMirror input in SchemaView
  In-Reply-To: <CAM9w-_mVBwXMnYdhGVtO0o7w1X+CbTDw--T9qBauCHr=1N1VvQ@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox