From e2fc56fca6549821285abdd83f9aaec21170660c Mon Sep 17 00:00:00 2001
From: zhuba-Ahhh <3477826311@qq.com>
Date: Fri, 26 Apr 2024 21:28:29 +0800
Subject: [PATCH] fix(form): LightFilter + SearchSelect component support
 fetchDataOnSearch

---
 .../components/Select/LightSelect/index.tsx   | 24 ++++-
 .../field/src/components/Select/index.tsx     |  1 +
 tests/form/base.test.tsx                      | 97 +++++++++++++++++++
 3 files changed, 121 insertions(+), 1 deletion(-)

diff --git a/packages/field/src/components/Select/LightSelect/index.tsx b/packages/field/src/components/Select/LightSelect/index.tsx
index 6a7fc646ecde..ef301add6de3 100644
--- a/packages/field/src/components/Select/LightSelect/index.tsx
+++ b/packages/field/src/components/Select/LightSelect/index.tsx
@@ -12,6 +12,14 @@ export type LightSelectProps = {
   label?: string;
   placeholder?: any;
   valueMaxLength?: number;
+  /** 刷新数据 */
+  fetchData: (keyWord?: string) => void;
+  /**
+   * 当搜索关键词发生变化时是否请求远程数据
+   *
+   * @default true
+   */
+  fetchDataOnSearch?: boolean;
 } & ProFieldLightProps;
 
 /**
@@ -63,6 +71,8 @@ const LightSelect: React.ForwardRefRenderFunction<
     optionFilterProp,
     optionLabelProp = '',
     valueMaxLength = 41,
+    fetchDataOnSearch = false,
+    fetchData,
     ...restProps
   } = props;
   const { placeholder = label } = props;
@@ -172,7 +182,16 @@ const LightSelect: React.ForwardRefRenderFunction<
         }}
         {...compatibleBorder(bordered)}
         showSearch={showSearch}
-        onSearch={onSearch}
+        onSearch={
+          showSearch
+            ? (keyValue) => {
+                if (fetchDataOnSearch && fetchData) {
+                  fetchData(keyValue);
+                }
+                onSearch?.(keyValue);
+              }
+            : void 0
+        }
         style={style}
         dropdownRender={(menuNode) => {
           return (
@@ -184,6 +203,9 @@ const LightSelect: React.ForwardRefRenderFunction<
                     allowClear={!!allowClear}
                     onChange={(e) => {
                       setKeyword(e.target.value);
+                      if (fetchDataOnSearch && fetchData) {
+                        fetchData(e.target.value);
+                      }
                       onSearch?.(e.target.value);
                     }}
                     onKeyDown={(e) => {
diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx
index 017f975143fd..139606f7061f 100644
--- a/packages/field/src/components/Select/index.tsx
+++ b/packages/field/src/components/Select/index.tsx
@@ -501,6 +501,7 @@ const FieldSelect: ProFieldFC<
             )}
             lightLabel={lightLabel}
             labelTrigger={labelTrigger}
+            fetchData={fetchData}
             {...fieldProps}
           />
         );
diff --git a/tests/form/base.test.tsx b/tests/form/base.test.tsx
index f2044797b604..cc0888041967 100644
--- a/tests/form/base.test.tsx
+++ b/tests/form/base.test.tsx
@@ -1,6 +1,7 @@
 import { FontSizeOutlined } from '@ant-design/icons';
 import type { ProFormInstance } from '@ant-design/pro-form';
 import ProForm, {
+  LightFilter,
   ProFormCaptcha,
   ProFormCheckbox,
   ProFormColorPicker,
@@ -1771,6 +1772,102 @@ describe('ProForm', () => {
     wrapper.unmount();
   });
 
+  it('📦 LightFilter + SearchSelect support fetchDataOnSearch: false', async () => {
+    const onRequest = vi.fn();
+    const wrapper = render(
+      <LightFilter>
+        <ProFormSelect.SearchSelect
+          name="userQuery"
+          label="查询选择器"
+          fieldProps={{
+            fetchDataOnSearch: false,
+          }}
+          request={async () => {
+            onRequest();
+            return [
+              { label: '全部', value: 'all' },
+              { label: '未解决', value: 'open' },
+              { label: '已解决', value: 'closed' },
+              { label: '解决中', value: 'processing' },
+            ];
+          }}
+        />
+      </LightFilter>,
+    );
+
+    await wrapper.findByText('查询选择器');
+
+    act(() => {
+      fireEvent.change(
+        wrapper.baseElement.querySelector(
+          '.ant-select-selection-search-input',
+        )!,
+        {
+          target: {
+            value: '全',
+          },
+        },
+      );
+    });
+
+    expect(onRequest.mock.calls.length).toBe(1);
+  });
+
+  it('📦 LightFilter + SearchSelect support fetchDataOnSearch: true', async () => {
+    const onRequest = vi.fn();
+    const wrapper = render(
+      <LightFilter>
+        <ProFormSelect.SearchSelect
+          name="userQuery"
+          label="查询选择器"
+          fieldProps={{
+            fetchDataOnSearch: true,
+          }}
+          request={async () => {
+            onRequest();
+            return [
+              { label: '全部', value: 'all' },
+              { label: '未解决', value: 'open' },
+              { label: '已解决', value: 'closed' },
+              { label: '解决中', value: 'processing' },
+            ];
+          }}
+        />
+      </LightFilter>,
+    );
+    await wrapper.findByText('查询选择器');
+
+    await waitFor(() => {
+      expect(onRequest.mock.calls.length).toBe(1);
+    });
+
+    act(() => {
+      fireEvent.change(
+        wrapper.baseElement.querySelector(
+          '.ant-select-selection-search-input',
+        )!,
+        {
+          target: {
+            value: '全',
+          },
+        },
+      );
+    });
+
+    act(() => {
+      fireEvent.mouseDown(
+        wrapper.baseElement.querySelectorAll('.ant-select-selector')[0],
+        {},
+      );
+    });
+
+    await waitFor(() => {
+      expect(onRequest.mock.calls.length).toBe(2); // 搜索触发请求
+    });
+
+    wrapper.unmount();
+  });
+
   it('📦 SearchSelect support multiple', async () => {
     const onSearch = vi.fn();
     const onFinish = vi.fn();