SURVEY-17202 adding the ability to place a cell in editing mode

src/components/Grid.tsx

@@ -83,7 +83,6 @@ export const Grid = ({
   const {
     gridReady,
     setApis,
-    prePopupOps,
     ensureRowVisible,
     getFirstRowId,
     selectRowsById,
@@ -98,7 +97,8 @@ export const Grid = ({
     setOnCellEditingComplete,
     getColDef,
   } = useContext(GridContext);
-  const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
+  const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
+  const gridContext = useContext(GridContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
 
@@ -387,23 +387,13 @@ export const Grid = ({
    */
   const startCellEditing = useCallback(
     (event: CellEvent) => {
-      prePopupOps();
-      if (!event.node.isSelected()) {
-        event.node.setSelected(true, true);
-      }
-      // Cell already being edited, so don't re-edit until finished
-      if (checkUpdating([event.colDef.field ?? ""], event.data.id)) {
-        return;
-      }
-
-      if (event.rowIndex !== null) {
-        event.api.startEditingCell({
-          rowIndex: event.rowIndex,
-          colKey: event.column.getColId(),
+      event.data.id &&
+        gridContext.startCellEditing({
+          rowId: event.data.id,
+          colId: event.column.getColId(),
         });
-      }
     },
-    [checkUpdating, prePopupOps],
+    [gridContext],
   );
 
   /**

src/contexts/GridContext.tsx

@@ -39,6 +39,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
   sizeColumnsToFit: () => void;
   cancelEdit: () => void;
+  startCellEditing: ({ rowId, colId }: { rowId: number; colId: string }) => void;
   stopEditing: () => void;
   updatingCells: (
     props: { selectedRows: GridBaseRow[]; field?: string },
@@ -147,6 +148,9 @@ export const GridContext = createContext<GridContextType<any>>({
   cancelEdit: () => {
     console.error("no context provider for cancelEdit");
   },
+  startCellEditing: () => {
+    console.error("no context provider for startCellEditing");
+  },
   stopEditing: () => {
     console.error("no context provider for stopEditing");
   },

src/contexts/GridContextProvider.tsx

@@ -21,7 +21,7 @@ interface GridContextProps {
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 export const GridContextProvider = <RowType extends GridBaseRow>(props: GridContextProps): ReactElement => {
-  const { modifyUpdating } = useContext(GridUpdatingContext);
+  const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
   const [columnApi, setColumnApi] = useState<ColumnApi>();
   const [gridReady, setGridReady] = useState(false);
@@ -377,6 +377,41 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     gridApi.stopEditing();
   }, [gridApi]);
 
+  const startCellEditing = useCallback(
+    async ({ rowId, colId }: { rowId: number; colId: string }) => {
+      if (!gridApi) return;
+
+      const colDef = gridApi.getColumnDef(colId);
+      if (!colDef) return;
+
+      // Cell already being edited, so don't re-edit until finished
+      if (checkUpdating([colDef.field ?? ""], rowId)) {
+        return;
+      }
+      const rowNode = gridApi.getRowNode(`${rowId}`);
+      if (!rowNode) {
+        return;
+      }
+
+      if (!rowNode.isSelected()) {
+        rowNode.setSelected(true, true);
+      }
+      prePopupOps();
+
+      const rowIndex = rowNode.rowIndex;
+      if (rowIndex != null) {
+        const focusAndEdit = () => {
+          gridApi.startEditingCell({
+            rowIndex,
+            colKey: colId,
+          });
+        };
+        defer(focusAndEdit);
+      }
+    },
+    [checkUpdating, gridApi, prePopupOps],
+  );
+
   /**
    * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback
    */
@@ -618,6 +653,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         ensureSelectedRowIsVisible,
         sizeColumnsToFit,
         autoSizeColumns,
+        startCellEditing,
         stopEditing,
         cancelEdit,
         updatingCells,