@linzjs/step-ag-grid 8.2.0 → 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.0",
+  "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(
@@ -297,16 +299,6 @@ export const Grid = (params: GridProps): JSX.Element => {
     [startCellEditing],
   );
 
-  const onCellEditingStopped = useCallback(
-    (event: CellEvent) => {
-      refreshSelectedRows(event);
-      // The grid loses cell focus after editing
-      const cell = event.api.getFocusedCell();
-      cell && event.api.setFocusedCell(cell.rowIndex, cell.column);
-    },
-    [refreshSelectedRows],
-  );
-
   // When rows added or removed then resize columns
   useEffect(() => {
     if (columnDefs?.length) {
@@ -354,7 +346,6 @@ export const Grid = (params: GridProps): JSX.Element => {
         onCellClicked={onCellClicked}
         onCellDoubleClicked={onCellDoubleClick}
         onCellEditingStarted={refreshSelectedRows}
-        onCellEditingStopped={onCellEditingStopped}
         domLayout={params.domLayout}
         columnDefs={columnDefs}
         rowData={params.rowData}

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -95,6 +95,8 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
         setSubComponentSelected(subComponentSelected === item ? null : item);
         e.keepOpen = true;
       } else {
+        subComponentIsValid.current = true;
+        setSubSelectedValue(null);
         await updateValue(async () => actionClick(item), e.key === "Tab" ? (e.shiftKey ? -1 : 1) : 0);
       }
     },

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,

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -120,6 +120,10 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         {
           multiEdit: true,
           editorParams: {
+            defaultAction: async ({ menuOption }) => {
+              // eslint-disable-next-line no-console
+              console.log("clicked", { menuOption });
+            },
             options: async (selectedItems) => {
               // Just doing a timeout here to demonstrate deferred loading
               await wait(500);

package/src/stories/grid/gridForm/GridFormMultiSelect.stories.tsx

@@ -22,7 +22,7 @@ const Template: ComponentStory<typeof GridFormMultiSelect> = (props) => {
       "With options",
       {
         options: [
-          { label: "One", value: 0 },
+          { label: "One", value: 0, checked: true },
           { label: "Two", value: 1 },
         ],
       },
@@ -34,7 +34,7 @@ const Template: ComponentStory<typeof GridFormMultiSelect> = (props) => {
         options: [
           { label: "One", value: 0 },
           { label: "With warning", value: 1, warning: "Test warning" },
-          { label: "Three", value: 2 },
+          { label: "Three", value: 2, checked: true },
         ],
       },
     ],