fix(form): LightFilter + SearchSelect component support fetchDataOnSe…

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) => {

packages/field/src/components/Select/index.tsx

@@ -501,6 +501,7 @@ const FieldSelect: ProFieldFC<
             )}
             lightLabel={lightLabel}
             labelTrigger={labelTrigger}
+            fetchData={fetchData}
             {...fieldProps}
           />
         );

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();