Fixed bugs found when testing react-data-grid upgrade changes. #7705

web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx

@@ -82,7 +82,7 @@ const StyledBox = styled(Box)(({theme}) => ({
         paddingBottom: '4px',
       }
     },
-  }, 
+  },
   '& .FileManager-footerSaveAs': {
     justifyContent: 'initial',
     padding: '4px 8px',
@@ -633,7 +633,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
   }, [filteredItems]);
   const onItemClick = useCallback((idx)=>{
     let row = filteredItems[selectedRowIdx.current];
-    if(params.dialog_type == 'create_file' && row?.file_type != 'dir' && row.file_type != 'drive') {
+    if(params.dialog_type == 'create_file' && row?.file_type != 'dir' && row?.file_type != 'drive') {
       setSaveAs(filteredItems[idx]?.Filename);
     }
   }, [filteredItems]);
@@ -641,7 +641,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
     let disabled = true;
     let row = filteredItems[selectedRowIdx.current];
     if(params.dialog_type == 'create_file') {
-      disabled = !saveAs.trim();
+      disabled = !saveAs?.trim();
     } else if(selectedRowIdx.current >= 0 && row) {
       let selectedfileType = row?.file_type;
       if(((selectedfileType == 'dir' || selectedfileType == 'drive') && fmUtilsObj.hasCapability('select_folder'))

web/pgadmin/misc/file_manager/static/js/components/ListView.jsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import PgReactDataGrid from '../../../../../static/js/components/PgReactDataGrid';
 import FolderIcon from '@mui/icons-material/Folder';
 import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
@@ -132,19 +132,25 @@ const columns = [
 
 
 export default function ListView({items, operation, ...props}) {
-
   const gridRef = useRef();
 
   useEffect(()=>{
     if(operation.type) {
-      operation.type == 'add' && gridRef.current.scrollToRow(operation.idx);
+      operation.type == 'add' && gridRef.current.scrollToCell({rowIdx: operation.idx});
       gridRef.current.selectCell({idx: 0, rowIdx: operation.idx}, true);
     }
   }, [operation]);
 
-  useEffect(()=>{
-    gridRef.current?.selectCell({idx: 0, rowIdx: 0});
-  }, [gridRef.current?.element]);
+  const onRowsChange = useCallback((rows)=>{
+    operation?.onComplete?.(rows[operation.idx], operation.idx);
+  }, [operation]);
+
+  const onCellKeyDown = useCallback(({mode}, e)=>{
+    /* Typing should not open the editor */
+    if(mode == 'SELECT' && e.code != 'ArrowDown' && e.code != 'ArrowUp') {
+      e.preventGridDefault();
+    }
+  }, []);
 
   return (
     <StyledPgReactDataGrid
@@ -163,9 +169,8 @@ export default function ListView({items, operation, ...props}) {
       mincolumnWidthBy={25}
       enableCellSelect={false}
       noRowsText={gettext('No files/folders found')}
-      onRowsChange={(rows)=>{
-        operation?.onComplete?.(rows[operation.idx], operation.idx);
-      }}
+      onRowsChange={onRowsChange}
+      onCellKeyDown={onCellKeyDown}
       {...props}
     />
   );

web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx

@@ -403,6 +403,19 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha
         }}
         enableRangeSelection={true}
         rangeLeftBoundaryColIdx={0}
+        onCellKeyDown={({column, rowIdx, selectCell, mode}, e)=>{
+          /* Enter should not be propagated to editor and should
+          only be used to open the editor */
+          if(mode == 'SELECT' && e.code == 'Enter') {
+            e.preventGridDefault();
+            e.preventDefault();
+            e.stopPropagation();
+            selectCell({
+              idx: column.idx,
+              rowIdx
+            }, true);
+          }
+        }}
         {...props}
       />
     </DataGridExtrasContext.Provider>