diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index c0b8b35b7..4b400a405 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -148,7 +148,7 @@ FormInput.propTypes = {
   testcid: PropTypes.any,
 };
 
-export function InputSQL({value, options, onChange, className, ...props}) {
+export function InputSQL({value, onChange, className, controlProps, ...props}) {
   const classes = useStyles();
   const editor = useRef();
 
@@ -156,17 +156,13 @@ export function InputSQL({value, options, onChange, className, ...props}) {
     <CodeMirror
       currEditor={(obj)=>editor.current=obj}
       value={value||''}
-      options={{
-        lineNumbers: true,
-        mode: 'text/x-pgsql',
-        ...options,
-      }}
       className={clsx(classes.sql, className)}
       events={{
         change: (cm)=>{
           onChange && onChange(cm.getValue());
         },
       }}
+      {...controlProps}
       {...props}
     />
   );
@@ -177,15 +173,16 @@ InputSQL.propTypes = {
   onChange: PropTypes.func,
   readonly: PropTypes.bool,
   className: CustomPropTypes.className,
+  controlProps: PropTypes.object,
 };
 
-export function FormInputSQL({hasError, required, label, className, helpMessage, testcid, value, controlProps, noLabel, ...props}) {
+export function FormInputSQL({hasError, required, label, className, helpMessage, testcid, value, noLabel, ...props}) {
   if(noLabel) {
-    return <InputSQL value={value} options={controlProps} {...props}/>;
+    return <InputSQL value={value} {...props}/>;
   } else {
     return (
       <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} >
-        <InputSQL value={value} options={controlProps} {...props}/>
+        <InputSQL value={value} {...props}/>
       </FormInput>
     );
   }
@@ -198,7 +195,6 @@ FormInputSQL.propTypes = {
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
   value: PropTypes.string,
-  controlProps: PropTypes.object,
   noLabel: PropTypes.bool,
   change: PropTypes.func,
 };
@@ -618,6 +614,12 @@ const customReactSelectStyles = (theme, readonly)=>({
     ...provided,
     padding: theme.otherVars.reactSelect.padding,
   }),
+  groupHeading: (provided)=>({
+    ...provided,
+    color: 'inherit',
+    fontSize: '0.85em',
+    textTransform: 'none',
+  }),
   menu: (provided)=>({
     ...provided,
     backgroundColor: theme.palette.background.default,
@@ -701,6 +703,16 @@ CustomSelectSingleValue.propTypes = {
   data: PropTypes.object,
 };
 
+export function flattenSelectOptions(options) {
+  return _.flatMap(options, (option)=>{
+    if(option.options) {
+      return option.options;
+    } else {
+      return option;
+    }
+  });
+}
+
 function getRealValue(options, value, creatable, formatter) {
   let realValue = null;
   if(_.isArray(value)) {
@@ -716,7 +728,8 @@ function getRealValue(options, value, creatable, formatter) {
       }
     }
   } else {
-    realValue = _.find(options, (option)=>option.value==value) ||
+    let flatOptions = flattenSelectOptions(options);
+    realValue = _.find(flatOptions, (option)=>option.value==value) ||
         (creatable && !_.isUndefined(value) && !_.isNull(value) ? {label:value, value: value} : null);
   }
   return realValue;
@@ -742,6 +755,17 @@ export function InputSelect({
         /* If component unmounted, dont update state */
         if(!umounted) {
           optionsLoaded && optionsLoaded(res, value);
+          /* Auto select if any option has key as selected */
+          const flatRes = flattenSelectOptions(res || []);
+          let selectedVal;
+          if(controlProps.multiple) {
+            selectedVal = _.filter(flatRes, (o)=>o.selected)?.map((o)=>o.value);
+          } else {
+            selectedVal = _.find(flatRes, (o)=>o.selected)?.value;
+          }
+          if(!_.isUndefined(selectedVal)) {
+            onChange && onChange(selectedVal);
+          }
           setFinalOptions([res || [], false]);
         }
       });
@@ -751,7 +775,8 @@ export function InputSelect({
 
   /* Apply filter if any */
   const filteredOptions = (controlProps.filter && controlProps.filter(finalOptions)) || finalOptions;
-  let realValue = getRealValue(filteredOptions, value, controlProps.creatable, controlProps.formatter);
+  const flatFiltered = flattenSelectOptions(filteredOptions);
+  let realValue = getRealValue(flatFiltered, value, controlProps.creatable, controlProps.formatter);
   if(realValue && _.isPlainObject(realValue) && _.isUndefined(realValue.value)) {
     console.error('Undefined option value not allowed', realValue, filteredOptions);
   }
@@ -763,7 +788,7 @@ export function InputSelect({
 
   const styles = customReactSelectStyles(theme, readonly || disabled);
 
-  const onChangeOption = useCallback((selectVal, action)=>{
+  const onChangeOption = useCallback((selectVal)=>{
     if(_.isArray(selectVal)) {
       // Check if select all option is selected
       if (!_.isUndefined(selectVal.find(x => x.label === 'Select All'))) {
@@ -775,9 +800,9 @@ export function InputSelect({
       } else {
         selectVal = selectVal.map((option)=>option.value);
       }
-      onChange && onChange(selectVal, action.name);
+      onChange && onChange(selectVal);
     } else {
-      onChange && onChange(selectVal ? selectVal.value : null, action.name);
+      onChange && onChange(selectVal ? selectVal.value : null);
     }
   }, [onChange, filteredOptions]);
 
@@ -797,7 +822,7 @@ export function InputSelect({
     inputId: cid,
     placeholder: (readonly || disabled) ? '' : controlProps.placeholder || gettext('Select an item...'),
     ...otherProps,
-    ...props
+    ...props,
   };
   if(!controlProps.creatable) {
     return (
@@ -856,9 +881,9 @@ export function InputColor({value, controlProps, disabled, onChange, currObj}) {
   const pickrObj = useRef();
   const classes = useStyles();
 
-  const setColor = (value)=>{
+  const setColor = (newVal)=>{
     pickrObj.current &&
-      pickrObj.current.setColor((_.isUndefined(value) || value == '') ? pickrOptions.defaultColor : value);
+      pickrObj.current.setColor((_.isUndefined(newVal) || newVal == '') ? pickrOptions.defaultColor : newVal);
   };
 
   const destroyPickr = ()=>{