@linzjs/step-ag-grid 21.2.0 → 21.3.0

package/package.json

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

package/src/components/Grid.tsx

@@ -39,6 +39,7 @@ export interface GridBaseRow {
 
 export interface GridProps {
   readOnly?: boolean; // set all editables to false when read only, make all styles black, otherwise style is gray for not editable
+  defaultPostSort?: boolean; // Retain sort order after edit, Defaults to true.
   selectable?: boolean;
   theme?: string; // should have prefix ag-theme-
   ["data-testid"]?: string;
@@ -114,6 +115,7 @@ export interface GridProps {
  */
 export const Grid = ({
   "data-testid": dataTestId,
+  defaultPostSort = true,
   rowSelection = "multiple",
   suppressColumnVirtualization = true,
   theme = "ag-theme-step-default",
@@ -742,7 +744,7 @@ export const Grid = ({
           onModelUpdated={onModelUpdated}
           onGridReady={onGridReady}
           onSortChanged={ensureSelectedRowIsVisible}
-          postSortRows={params.onRowDragEnd ? undefined : postSortRows}
+          postSortRows={params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows}
           onSelectionChanged={synchroniseExternalStateToGridSelection}
           onColumnMoved={params.onColumnMoved}
           alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}

package/src/contexts/GridContextProvider.tsx

@@ -639,7 +639,24 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const onFilterChanged = useMemo(
     () =>
       debounce(() => {
-        gridApi && gridApi.onFilterChanged();
+        // This is terrible, but there's no other way for me to check whether a filter has changed the grid
+        const getDisplayedRowsHash = () => {
+          const arr: any[] = [];
+          gridApi?.forEachNodeAfterFilter((rowNode) => {
+            arr.push(rowNode.id);
+          });
+          return arr.join("|");
+        };
+
+        if (gridApi) {
+          const hasFocusedCell = gridApi.getFocusedCell();
+          const preHash = hasFocusedCell && getDisplayedRowsHash();
+          gridApi.onFilterChanged();
+          const postHash = hasFocusedCell && getDisplayedRowsHash();
+          // Ag-grid has a bug where if a focused cell comes into view after a filter the filter loses focus
+          // So the focus is cleared to prevent this
+          preHash !== postHash && gridApi.clearFocusedCell();
+        }
       }, 200),
     [gridApi],
   );

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

@@ -255,7 +255,14 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   );
 };
 
-const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): ReactElement => {
+type KeysOfType<TObject, TValue> = {
+  [K in keyof TObject]: TObject[K] extends TValue ? K : never;
+}[keyof TObject];
+
+const GridFilterLessThan = (props: {
+  field: KeysOfType<ITestRow, number | null | undefined>;
+  text: string;
+}): ReactElement => {
   const [value, setValue] = useState<number>();
 
   const filter = useCallback(