fix: custom filter loses focus after filter (#468)

* fix filter loses focus after filter

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],
   );

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(