@linzjs/step-ag-grid 8.2.1 → 8.2.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "8.2.1",
+  "version": "8.2.2",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -46,6 +46,7 @@ export const Grid = (params: GridProps): JSX.Element => {
   const {
     gridReady,
     setGridApi,
+    prePopupOps,
     setQuickFilter,
     ensureRowVisible,
     selectRowsById,
@@ -241,6 +242,7 @@ export const Grid = (params: GridProps): JSX.Element => {
 
   const startCellEditing = useCallback(
     (event: CellEvent) => {
+      prePopupOps();
       if (!event.node.isSelected()) {
         event.node.setSelected(true, true);
       }
@@ -256,7 +258,7 @@ export const Grid = (params: GridProps): JSX.Element => {
         });
       }
     },
-    [checkUpdating],
+    [checkUpdating, prePopupOps],
   );
 
   const onCellDoubleClick = useCallback(

package/src/contexts/GridContext.tsx

@@ -5,6 +5,7 @@ import { GridBaseRow } from "../components/Grid";
 export interface GridContextType {
   gridReady: boolean;
   setGridApi: (gridApi: GridApi | undefined) => void;
+  prePopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;
   editingCells: () => boolean;
   getSelectedRows: <T extends GridBaseRow>() => T[];
@@ -34,6 +35,9 @@ export interface GridContextType {
 
 export const GridContext = createContext<GridContextType>({
   gridReady: false,
+  prePopupOps: () => {
+    console.error("no context provider for prePopupOps");
+  },
   externallySelectedItemsAreInSync: false,
   setGridApi: () => {
     console.error("no context provider for setGridApi");

package/src/contexts/GridContextProvider.tsx

@@ -5,6 +5,7 @@ import { defer, delay, difference, isEmpty, last, sortBy } from "lodash-es";
 import { isNotEmpty, wait } from "../utils/util";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 import { GridBaseRow } from "../components/Grid";
+import { CellPosition } from "ag-grid-community/dist/lib/entities/cellPosition";
 
 interface GridContextProps {
   children: ReactNode;
@@ -20,6 +21,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
   const [gridApi, _setGridApi] = useState<GridApi>();
   const [gridReady, setGridReady] = useState(false);
   const idsBeforeUpdate = useRef<number[]>([]);
+  const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
 
   const setGridApi = useCallback((gridApi: GridApi | undefined) => {
@@ -43,6 +45,13 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     [gridApi],
   );
 
+  /**
+   * Before a popup record the currently focused cell.
+   */
+  const prePopupOps = useCallback(() => {
+    prePopupFocusedCell.current = gridApi?.getFocusedCell() ?? undefined;
+  }, [gridApi]);
+
   /**
    * Set the quick filter value to grid.
    */
@@ -276,7 +285,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   }, [gridApiOp]);
 
-  const stopEditing = useCallback((): void => gridApiOp((gridApi) => gridApi.stopEditing()), [gridApiOp]);
+  const stopEditing = useCallback((): void => {
+    if (prePopupFocusedCell.current) {
+      gridApi?.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+    }
+    gridApiOp((gridApi) => gridApi.stopEditing());
+  }, [gridApi, gridApiOp]);
 
   const selectNextCell = useCallback(
     (tabDirection: -1 | 0 | 1 = 0) => {
@@ -297,8 +311,6 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     ): Promise<boolean> => {
       setSaving && setSaving(true);
       return await gridApiOp(async (gridApi) => {
-        const preOpCell = gridApi.getFocusedCell();
-
         const selectedRows = props.selectedRows;
 
         let ok = false;
@@ -331,13 +343,13 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         }
 
         // Only focus next cell if user hasn't already manually changed focus
-        const postOpCell = gridApi.getFocusedCell();
+        const postPopupFocusedCell = gridApi.getFocusedCell();
         if (
           tabDirection &&
-          preOpCell &&
-          postOpCell &&
-          preOpCell.rowIndex == postOpCell.rowIndex &&
-          preOpCell.column.getColId() == postOpCell.column.getColId()
+          prePopupFocusedCell.current &&
+          postPopupFocusedCell &&
+          prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
+          prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()
         ) {
           selectNextCell(tabDirection);
         }
@@ -368,6 +380,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     <GridContext.Provider
       value={{
         gridReady,
+        prePopupOps,
         setGridApi,
         setQuickFilter,
         selectRowsById,