From 5e0dfff42a4bdde75575fa26c03c054b8fa1d8a4 Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>
Date: Wed, 18 May 2022 13:52:09 +0530
Subject: [PATCH] Ensure that the editor position should not get changed once
 it is opened. Fixes #7393

---
 docs/en_US/release_notes_6_10.rst             |  1 +
 .../static/js/ConnectServerContent.jsx        |  2 +-
 .../components/QueryToolDataGrid/Editors.jsx  | 34 ++++++++++++++++---
 .../js/components/QueryToolDataGrid/index.jsx | 12 ++++---
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/docs/en_US/release_notes_6_10.rst b/docs/en_US/release_notes_6_10.rst
index 7767a2175..4f475159f 100644
--- a/docs/en_US/release_notes_6_10.rst
+++ b/docs/en_US/release_notes_6_10.rst
@@ -24,3 +24,4 @@ Bug fixes
   | `Issue #7376 <https://redmine.postgresql.org/issues/7376>`_ -  Fixed an issue where a popup for unsaved changes appears when clicking on the open file button for a blank query editor.
   | `Issue #7383 <https://redmine.postgresql.org/issues/7383>`_ -  Fixed an issue where Preferences are not saved when the dialog is maximized.
   | `Issue #7388 <https://redmine.postgresql.org/issues/7388>`_ -  Fixed an issue where an error message fills the entire window if the query is long.
+  | `Issue #7393 <https://redmine.postgresql.org/issues/7393>`_ -  Ensure that the editor position should not get changed once it is opened.
diff --git a/web/pgadmin/browser/static/js/ConnectServerContent.jsx b/web/pgadmin/browser/static/js/ConnectServerContent.jsx
index 05dbf8a8f..7ddb4d13d 100644
--- a/web/pgadmin/browser/static/js/ConnectServerContent.jsx
+++ b/web/pgadmin/browser/static/js/ConnectServerContent.jsx
@@ -30,7 +30,7 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
 
   const onKeyDown = (e) => {
     // If enter key is pressed then click on OK button
-    if (e.keyCode == 13) {
+    if (e.key === 'Enter') {
       okBtnRef.current?.click();
     }
   };
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
index 6839cf65b..35a82d5ac 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import { makeStyles, Box, Portal } from '@material-ui/core';
-import React, {useContext} from 'react';
+import React, {useContext, useLayoutEffect, useRef} from 'react';
 import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
 import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
 import CloseIcon from '@material-ui/icons/Close';
@@ -123,6 +123,10 @@ function setEditorPosition(cellEle, editorEle) {
   if(!editorEle || !cellEle) {
     return;
   }
+  /* Once the position is set, then don't change it */
+  if(editorEle.style.left || editorEle.style.top) {
+    return;
+  }
   let gridEle = cellEle.closest('.rdg');
   let cellRect = cellEle.getBoundingClientRect();
   let position = {
@@ -158,6 +162,12 @@ function textColumnFinalVal(columnVal, column) {
   }
   return columnVal;
 }
+
+function suppressEnterKey(e) {
+  if(e.keyCode == 13) {
+    e.stopPropagation();
+  }
+}
 export function TextEditor({row, column, onRowChange, onClose}) {
   const classes = useStyles();
   const value = row[column.key] ?? '';
@@ -186,7 +196,7 @@ export function TextEditor({row, column, onRowChange, onClose}) {
     <Portal container={document.body}>
       <Box ref={(ele)=>{
         setEditorPosition(getCellElement(column.idx), ele);
-      }} className={classes.textEditor} data-label="pg-editor">
+      }} className={classes.textEditor} data-label="pg-editor" onKeyDown={suppressEnterKey} >
         <textarea ref={autoFocusAndSelect} className={classes.textarea} value={localVal} onChange={onChange} />
         <Box display="flex" justifyContent="flex-end">
           <DefaultButton startIcon={<CloseIcon />} onClick={()=>onClose(false)} size="small">
@@ -240,7 +250,7 @@ export function NumberEditor({row, column, onRowChange, onClose}) {
     return false;
   };
   const onKeyDown = (e)=>{
-    if(e.code == 'Tab') {
+    if(e.code === 'Tab' || e.code === 'Enter') {
       e.preventDefault();
       if(!onBlur()) {
         e.stopPropagation();
@@ -267,6 +277,7 @@ NumberEditor.propTypes = EditorPropTypes;
 export function CheckboxEditor({row, column, onRowChange, onClose}) {
   const classes = useStyles();
   const value = row[column.key] ?? null;
+  const containerRef = useRef();
   const changeValue = ()=>{
     if(!column.can_edit) {
       return;
@@ -286,8 +297,21 @@ export function CheckboxEditor({row, column, onRowChange, onClose}) {
   } else if(value == null){
     className = 'intermediate';
   }
+
+  const onSpaceHit = (e)=>{
+    if(e.code === 'Space') {
+      e.preventDefault();
+      e.stopPropagation();
+      changeValue();
+    }
+  };
+
+  useLayoutEffect(()=>{
+    containerRef.current.focus();
+  }, []);
+
   return (
-    <div onClick={changeValue} tabIndex="0" onBlur={onBlur} data-label="pg-checkbox-editor">
+    <div ref={containerRef} onClick={changeValue} onKeyDown={onSpaceHit} tabIndex="0" onBlur={onBlur} data-label="pg-checkbox-editor">
       <span className={clsx(classes.check, className)}></span>
     </div>
   );
@@ -334,7 +358,7 @@ export function JsonTextEditor({row, column, onRowChange, onClose}) {
     <Portal container={document.body}>
       <Box ref={(ele)=>{
         setEditorPosition(getCellElement(column.idx), ele);
-      }} className={classes.jsonEditor} data-label="pg-editor">
+      }} className={classes.jsonEditor} data-label="pg-editor" onKeyDown={suppressEnterKey} >
         <JsonEditor
           value={localVal}
           options={{
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
index 98667e1d7..7ca5278bf 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -115,9 +115,14 @@ function CustomRow(props) {
   } else if(props.selectedCellIdx == 0) {
     dataGridExtras.onSelectedCellChange?.(null);
   }
+  const openEditorOnEnter = (e)=>{
+    if(e.code === 'Enter' && !props.isRowSelected && props.selectedCellIdx > 0) {
+      props.selectCell(props.row, props.viewportColumns?.[props.selectedCellIdx], true);
+    }
+  };
   return (
     <RowInfoContext.Provider value={rowInfoValue}>
-      <Row ref={rowRef} {...props} />
+      <Row ref={rowRef} onKeyDown={openEditorOnEnter} {...props} />
     </RowInfoContext.Provider>
   );
 }
@@ -128,6 +133,7 @@ CustomRow.propTypes = {
   selectedCellIdx: PropTypes.number,
   row: PropTypes.object,
   viewportColumns: PropTypes.array,
+  selectCell: PropTypes.func,
 };
 
 function getCopyShortcutHandler(handleCopy) {
@@ -391,9 +397,7 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha
   }, [dataChangeStore, selectedColumns]);
 
   function handleCopy() {
-    if (window.isSecureContext) {
-      eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_COPY_DATA);
-    }
+    eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_COPY_DATA);
   }
 
   return (