feat(antd): search form in useTable should work with syncWithLocation (…

…#5981)

.changeset/curly-files-jump.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/antd": patch
+---
+
+feat(antd): search form in useTable should work with syncWithLocation
+
+Even though the form is managed by `useTable` hook from `@refinedev/antd`. It wasn't respecting the `syncWithLocation` prop to set values accordingly at initial render when registered fields are matching with the query params. Now it will look for matching fields and set values accordingly from synced filters.

examples/app-crm/src/routes/companies/list.tsx

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, useState } from "react";
 
 import { List, useTable } from "@refinedev/antd";
-import { getDefaultFilter, HttpError } from "@refinedev/core";
+import { HttpError } from "@refinedev/core";
 import { GetFieldsFromList } from "@refinedev/nestjs-query";
 
 import {
@@ -103,13 +103,7 @@ export const CompanyListPage: FC<PropsWithChildren> = ({ children }) => {
                 marginTop: screens.xs ? "1.6rem" : undefined,
               }}
             >
-              <Form
-                {...searchFormProps}
-                initialValues={{
-                  name: getDefaultFilter("name", filters, "contains"),
-                }}
-                layout="inline"
-              >
+              <Form {...searchFormProps} layout="inline">
                 <Form.Item name="name" noStyle>
                   <Input
                     size="large"

packages/antd/src/hooks/table/useTable/useTable.spec.ts → packages/antd/src/hooks/table/useTable/useTable.spec.tsx

@@ -1,8 +1,9 @@
+import React from "react";
 import { CrudFilters } from "@refinedev/core";
 import isEqual from "lodash/isEqual";
 import { renderHook, waitFor } from "@testing-library/react";
-
-import { act, TestWrapper } from "@test";
+import { Form, Input } from "antd";
+import { act, TestWrapper, render } from "@test";
 
 import { useTable } from "./useTable";
 
@@ -290,4 +291,52 @@ describe("useTable Hook", () => {
 
     expect(result.current.tableProps.pagination).toBeFalsy();
   });
+
+  it("should pass form values to search form from params (syncWithLocation)", async () => {
+    const Component = () => {
+      const { searchFormProps } = useTable({
+        resource: "categories",
+        syncWithLocation: true,
+      });
+
+      return (
+        <Form {...searchFormProps}>
+          <Form.Item name="name" noStyle>
+            <Input
+              data-test-id="search-name"
+              size="large"
+              placeholder="Search by name"
+            />
+          </Form.Item>
+        </Form>
+      );
+    };
+
+    const { getByDisplayValue } = render(<Component />, {
+      wrapper: TestWrapper({
+        routerProvider: {
+          parse: () => {
+            return () => ({
+              resource: {
+                name: "posts",
+              },
+              params: {
+                filters: [
+                  {
+                    field: "name",
+                    operator: "contains",
+                    value: "Some Name To Look For",
+                  },
+                ],
+              },
+            });
+          },
+        },
+      }),
+    });
+
+    await waitFor(() => {
+      expect(getByDisplayValue("Some Name To Look For")).toBeInTheDocument();
+    });
+  });
 });

packages/antd/src/hooks/table/useTable/useTable.ts

@@ -11,6 +11,7 @@ import {
   useTableProps as useTablePropsCore,
   useTableReturnType as useTableCoreReturnType,
   pickNotDeprecated,
+  useSyncWithLocation,
 } from "@refinedev/core";
 
 import {
@@ -122,6 +123,8 @@ export const useTable = <
     metaData: pickNotDeprecated(meta, metaData),
     dataProviderName,
   });
+  const { syncWithLocation: defaultSyncWithLocation } = useSyncWithLocation();
+  const shouldSyncWithLocation = syncWithLocation ?? defaultSyncWithLocation;
   const breakpoint = Grid.useBreakpoint();
   const [form] = Form.useForm<TSearchVariables>();
   const formSF = useFormSF<any, TSearchVariables>({
@@ -140,6 +143,33 @@ export const useTable = <
 
   const { data, isFetched, isLoading } = tableQueryResult;
 
+  React.useEffect(() => {
+    if (shouldSyncWithLocation) {
+      // get registered fields of form
+      const registeredFields = formSF.form.getFieldsValue() as Record<
+        string,
+        any
+      >;
+      // map `filters` for registered fields
+      const filterFilterMap = Object.keys(registeredFields).reduce(
+        (acc, curr) => {
+          // find filter for current field
+          const filter = filters.find(
+            (filter) => "field" in filter && filter.field === curr,
+          );
+          // if filter exists, set value to filter value
+          if (filter) {
+            acc[curr] = filter?.value;
+          }
+          return acc;
+        },
+        {} as Record<string, any>,
+      );
+      // set values to form
+      formSF.form.setFieldsValue(filterFilterMap as any);
+    }
+  }, [shouldSyncWithLocation]);
+
   const onChange = (
     paginationState: TablePaginationConfig,
     tableFilters: Record<string, FilterValue | null>,