@linzjs/step-ag-grid 21.2.0 → 21.2.1

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.2.1",
   "keywords": [
     "aggrid",
     "ag-grid",

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(