@nocobase/flow-engine 2.1.0-beta.37 → 2.1.0-beta.40

package/src/components/settings/wrappers/contextual/DefaultSettingsIcon.tsx

@@ -237,6 +237,15 @@ const getToolbarPopupContainer = (triggerNode?: HTMLElement | null) => {
   );
 };
 
+const removeExtraMenuItemClickHandlers = (item: FlowModelExtraMenuItem): FlowModelExtraMenuItem => {
+  const { onClick: _onClick, children, ...rest } = item;
+
+  return {
+    ...rest,
+    children: children?.length ? children.map(removeExtraMenuItemClickHandlers) : undefined,
+  };
+};
+
 export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
   model,
   showDeleteButton = true,
@@ -870,7 +879,8 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
       // });
 
       if (commonExtras.length > 0) {
-        items.push(...(commonExtras as MenuProps['items']));
+        // Antd Menu 会同时触发 item.onClick 和 menu.onClick，这里统一交给 handleMenuClick 执行。
+        items.push(...(commonExtras.map(removeExtraMenuItemClickHandlers) as MenuProps['items']));
       }
 
       // 添加复制uid按钮

package/src/components/settings/wrappers/contextual/__tests__/DefaultSettingsIcon.test.tsx

@@ -800,14 +800,16 @@ describe('DefaultSettingsIcon - extra menu items', () => {
       await waitFor(() => {
         const menu = (globalThis as any).__lastDropdownMenu;
         const items = (menu?.items || []) as any[];
-        expect(items.some((it) => String(it.key || '') === 'extra-action')).toBe(true);
+        const extraActionItem = items.find((it) => String(it.key || '') === 'extra-action');
+        expect(extraActionItem).toBeTruthy();
+        expect(extraActionItem.onClick).toBeUndefined();
       });
 
       const menu = (globalThis as any).__lastDropdownMenu;
       await act(async () => {
         menu.onClick?.({ key: 'extra-action' });
       });
-      expect(onClick).toHaveBeenCalled();
+      expect(onClick).toHaveBeenCalledTimes(1);
       expect((globalThis as any).__lastDropdownOpen).toBe(false);
     } finally {
       dispose?.();
@@ -880,6 +882,7 @@ describe('DefaultSettingsIcon - extra menu items', () => {
           'insert-after',
           'insert-inner',
         ]);
+        expect((nested.children || []).find((it) => String(it.key || '') === 'insert-before')?.onClick).toBeUndefined();
         expect((nested.children || []).find((it) => String(it.key || '') === 'insert-inner')?.disabled).toBe(true);
       });
 

package/src/components/subModel/LazyDropdown.tsx

@@ -247,18 +247,75 @@ const useKeepDropdownOpen = () => {
  */
 const useMenuSearch = () => {
   const [searchValues, setSearchValues] = useState<Record<string, string>>({});
+  const [inputValues, setInputValues] = useState<Record<string, string>>({});
   const [isSearching, setIsSearching] = useState(false);
+  const [composingCount, setComposingCount] = useState(0);
+  const composingKeysRef = useRef<Set<string>>(new Set());
   const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const updateSearchValue = (key: string, value: string) => {
+  const updateSearchValue = useCallback((key: string, value: string) => {
     setIsSearching(true);
+    setInputValues((prev) => ({ ...prev, [key]: value }));
     setSearchValues((prev) => ({ ...prev, [key]: value }));
 
     if (searchTimeoutRef.current) {
       clearTimeout(searchTimeoutRef.current);
     }
     searchTimeoutRef.current = setTimeout(() => setIsSearching(false), 300);
-  };
+  }, []);
+
+  const startComposition = useCallback((key: string) => {
+    composingKeysRef.current.add(key);
+    setIsSearching(true);
+    setComposingCount(composingKeysRef.current.size);
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+      searchTimeoutRef.current = null;
+    }
+  }, []);
+
+  const endComposition = useCallback(
+    (key: string, value: string) => {
+      composingKeysRef.current.delete(key);
+      setComposingCount(composingKeysRef.current.size);
+      updateSearchValue(key, value);
+    },
+    [updateSearchValue],
+  );
+
+  const updateInputValue = useCallback((key: string, value: string) => {
+    setInputValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  const clearSearchValue = useCallback((key: string) => {
+    composingKeysRef.current.delete(key);
+    setComposingCount(composingKeysRef.current.size);
+
+    setInputValues((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+    setSearchValues((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+
+  const clearAllSearchValues = useCallback(() => {
+    composingKeysRef.current.clear();
+    setComposingCount(0);
+    setInputValues({});
+    setSearchValues({});
+    setIsSearching(false);
+  }, []);
+
+  const isComposing = useCallback((key?: string) => {
+    return key ? composingKeysRef.current.has(key) : composingKeysRef.current.size > 0;
+  }, []);
 
   useEffect(() => {
     return () => {
@@ -270,8 +327,15 @@ const useMenuSearch = () => {
 
   return {
     searchValues,
-    isSearching,
+    inputValues,
+    isSearching: isSearching || composingCount > 0,
     updateSearchValue,
+    updateInputValue,
+    startComposition,
+    endComposition,
+    clearSearchValue,
+    clearAllSearchValues,
+    isComposing,
   };
 };
 
@@ -390,23 +454,63 @@ const createSearchItem = (
   currentSearchValue: string,
   menuVisible: boolean,
   t: (key: string) => string,
-  updateSearchValue: (key: string, value: string) => void,
+  searchHandlers: {
+    updateSearchValue: (key: string, value: string) => void;
+    updateInputValue: (key: string, value: string) => void;
+    startComposition: (key: string) => void;
+    endComposition: (key: string, value: string) => void;
+    isComposing: (key: string) => boolean;
+  },
+  activateSearchSubmenu: (key: string) => void,
+  deactivateSearchSubmenu: (key: string) => void,
 ) => ({
   key: `${searchKey}-search`,
   type: 'group' as const,
   label: (
-    <div>
+    <div onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
       <SearchInputWithAutoFocus
         visible={menuVisible}
         variant="borderless"
         allowClear
         placeholder={t(item.searchPlaceholder || 'Search')}
         value={currentSearchValue}
+        onFocus={(e) => {
+          e.stopPropagation();
+        }}
         onChange={(e) => {
           e.stopPropagation();
-          updateSearchValue(searchKey, e.target.value);
+          const value = e.target.value;
+          activateSearchSubmenu(searchKey);
+          if ((e.nativeEvent as any)?.isComposing || searchHandlers.isComposing(searchKey)) {
+            searchHandlers.updateInputValue(searchKey, value);
+            return;
+          }
+          if (!value) {
+            deactivateSearchSubmenu(searchKey);
+          }
+          searchHandlers.updateSearchValue(searchKey, value);
+        }}
+        onCompositionStart={(e) => {
+          e.stopPropagation();
+          activateSearchSubmenu(searchKey);
+          searchHandlers.startComposition(searchKey);
+        }}
+        onCompositionEnd={(e) => {
+          e.stopPropagation();
+          const value = e.currentTarget.value;
+          if (value) {
+            activateSearchSubmenu(searchKey);
+          } else {
+            deactivateSearchSubmenu(searchKey);
+          }
+          searchHandlers.endComposition(searchKey, value);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onKeyDown={(e) => {
+          e.stopPropagation();
         }}
-        onClick={(e) => e.stopPropagation()}
         onMouseDown={(e) => {
           // 防止菜单聚焦丢失或页面滚动
           e.stopPropagation();
@@ -441,14 +545,22 @@ const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
 const DROPDOWN_PERSIST_TTL_MS = 350;
+const SUBMENU_CLOSE_DELAY = 0.05;
+const SUBMENU_MOTION_DISABLED = {
+  motionEnter: false,
+  motionLeave: false,
+};
 const dropdownPersistRegistry: Map<string, number> = new Map();
 
 const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownMenuProps }> = ({ menu, ...props }) => {
   const engine = useFlowEngine();
   const [menuVisible, setMenuVisible] = useState(false);
   const [openKeys, setOpenKeys] = useState<Set<string>>(new Set());
+  const [activeSearchKey, setActiveSearchKey] = useState<string | null>(null);
   const [rootItems, setRootItems] = useState<Item[]>([]);
   const [rootLoading, setRootLoading] = useState(false);
+  const closeByOutsideClickRef = useRef(false);
+  const skipPreserveActiveSearchRef = useRef(false);
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
 
@@ -463,23 +575,105 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
     openKeys,
     refreshKeys,
   );
-  const { searchValues, isSearching, updateSearchValue } = useMenuSearch();
+  const searchHandlers = useMenuSearch();
+  const { searchValues, inputValues, clearSearchValue, clearAllSearchValues } = searchHandlers;
   const { requestKeepOpen, shouldPreventClose } = useKeepDropdownOpen();
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
+
+  const closeMenu = useCallback(() => {
+    setMenuVisible(false);
+    setActiveSearchKey(null);
+    setOpenKeys(new Set());
+    clearAllSearchValues();
+  }, [clearAllSearchValues]);
+
+  const activateSearchSubmenu = useCallback((key: string) => {
+    setActiveSearchKey(key);
+    setOpenKeys((prev) => {
+      if (prev.has(key)) return prev;
+      const next = new Set(prev);
+      next.add(key);
+      return next;
+    });
+  }, []);
+
+  const deactivateSearchSubmenu = useCallback((key: string) => {
+    setActiveSearchKey((prev) => (prev === key ? null : prev));
+  }, []);
+
+  const closeActiveSearchForPath = useCallback(
+    (keyPath: string) => {
+      if (
+        !activeSearchKey ||
+        keyPath === activeSearchKey ||
+        keyPath.startsWith(`${activeSearchKey}/`) ||
+        activeSearchKey.startsWith(`${keyPath}/`)
+      ) {
+        return;
+      }
+
+      skipPreserveActiveSearchRef.current = true;
+      clearSearchValue(activeSearchKey);
+      setActiveSearchKey(null);
+      setOpenKeys((prev) => {
+        const next = new Set(prev);
+        next.delete(activeSearchKey);
+        return next;
+      });
+    },
+    [activeSearchKey, clearSearchValue],
+  );
+
   const handleMenuOpenChange = useCallback(
     (nextOpenKeys: string[]) => {
-      if (!nextOpenKeys.length && shouldPreventClose()) {
+      let normalized = normalizeOpenKeys(nextOpenKeys);
+      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
+        if (normalized.length || skipPreserveActiveSearchRef.current) {
+          clearSearchValue(activeSearchKey);
+          setActiveSearchKey(null);
+        } else {
+          normalized = [activeSearchKey];
+        }
+      }
+
+      if (!normalized.length && shouldPreventClose()) {
         dropdownMenuProps.onOpenChange?.(Array.from(openKeys));
+        skipPreserveActiveSearchRef.current = false;
         return;
       }
 
-      const normalized = normalizeOpenKeys(nextOpenKeys);
+      Array.from(openKeys).forEach((key) => {
+        if (!normalized.includes(key)) {
+          clearSearchValue(key);
+        }
+      });
       setOpenKeys(new Set(normalized));
       dropdownMenuProps.onOpenChange?.(normalized);
+      skipPreserveActiveSearchRef.current = false;
     },
-    [dropdownMenuProps, openKeys, shouldPreventClose],
+    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
   );
 
+  useEffect(() => {
+    if (!menuVisible) return;
+
+    const markOutsideClick = (event: MouseEvent | PointerEvent) => {
+      const target = event.target as HTMLElement | null;
+      const isOutside = !target?.closest('.ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup');
+      closeByOutsideClickRef.current = isOutside;
+      if (isOutside) {
+        closeMenu();
+      }
+    };
+
+    document.addEventListener('pointerdown', markOutsideClick, true);
+    document.addEventListener('mousedown', markOutsideClick, true);
+    return () => {
+      document.removeEventListener('pointerdown', markOutsideClick, true);
+      document.removeEventListener('mousedown', markOutsideClick, true);
+    };
+  }, [closeMenu, menuVisible]);
+
   // 在挂载时，若存在 persistKey 且仍在持久期内，则尝试恢复打开状态
   useEffect(() => {
     if (!persistKey) return;
@@ -542,6 +736,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   ): any[] {
     const searchKey = keyPath;
     const currentSearchValue = searchValues[searchKey] || '';
+    const currentInputValue = inputValues[searchKey] ?? currentSearchValue;
 
     // 递归过滤：当 child 为分组时，会继续向下过滤其 children；
     // 仅保留自身匹配或存在匹配子项的分组。
@@ -566,7 +761,16 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       : children;
 
     const resolvedFiltered = resolve(filteredChildren, [...path, item.key]);
-    const searchItem = createSearchItem(item, searchKey, currentSearchValue, menuVisible, t, updateSearchValue);
+    const searchItem = createSearchItem(
+      item,
+      searchKey,
+      currentInputValue,
+      menuVisible,
+      t,
+      searchHandlers,
+      activateSearchSubmenu,
+      deactivateSearchSubmenu,
+    );
     const dividerItem = { key: `${keyPath}-search-divider`, type: 'divider' as const };
 
     if (currentSearchValue && resolvedFiltered.length === 0) {
@@ -641,6 +845,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
           key: keyPath,
           label,
           onClick: (info: any) => {},
+          onMouseEnter: () => closeActiveSearchForPath(keyPath),
           children: buildSearchChildren(children, item, keyPath, path, menuVisible, resolveItems),
         };
       }
@@ -694,6 +899,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         onClick: (info: any) => {
           if (!itemShouldKeepOpen) handleLeafClick(info);
         },
+        onMouseEnter: () => closeActiveSearchForPath(keyPath),
         onMouseDown: () => {
           if (!itemShouldKeepOpen) {
             return;
@@ -748,6 +954,8 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items: items,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: () => {},
         onOpenChange: handleMenuOpenChange,
         style: {
@@ -756,9 +964,8 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
           ...dropdownMenuProps?.style,
         },
       }}
-      onOpenChange={(visible) => {
-        // 阻止在搜索时关闭菜单
-        if (!visible && isSearching) {
+      onOpenChange={(visible, info) => {
+        if (!visible && activeSearchKey && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
           return;
         }
 
@@ -767,7 +974,12 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
           return;
         }
 
-        setMenuVisible(visible);
+        if (!visible) {
+          closeMenu();
+        } else {
+          setMenuVisible(visible);
+        }
+        closeByOutsideClickRef.current = false;
       }}
     >
       {props.children}

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { act, render, screen, userEvent, waitFor } from '@nocobase/test/client';
+import { act, fireEvent, render, screen, userEvent, waitFor } from '@nocobase/test/client';
 import { vi, beforeEach } from 'vitest';
 import {
   AddSubModelButton,
@@ -354,6 +354,208 @@ describe('transformItems - searchable flags', () => {
     await user.type(searchInput, 'display');
     await waitFor(() => expect(screen.getByText('Field display name')).toBeInTheDocument());
   });
+
+  it('keeps searchable submenu children during IME composition', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+
+    const items = [
+      {
+        key: 'fields',
+        label: 'Fields',
+        searchable: true,
+        children: [
+          { key: 'f1', label: 'Field 1', createModelOptions: { use: 'Parent' } },
+          { key: 'f2', label: 'Field 2', createModelOptions: { use: 'Parent' } },
+        ],
+      },
+    ];
+
+    const user = userEvent.setup();
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton model={parent} subModelKey="items" items={items as any}>
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByText('Fields')).toBeInTheDocument());
+    await user.hover(screen.getByText('Fields'));
+    await waitFor(() => expect(screen.getByText('Field 1')).toBeInTheDocument());
+
+    const input = screen.getByRole('textbox');
+    await user.click(input);
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 'zzzz' }, nativeEvent: { isComposing: true } });
+    fireEvent.mouseLeave(screen.getByText('Fields'));
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+    });
+
+    expect(input).toHaveValue('zzzz');
+    expect(screen.getByText('Field 1')).toBeInTheDocument();
+    expect(screen.getByText('Field 2')).toBeInTheDocument();
+
+    fireEvent.compositionEnd(input);
+    fireEvent.change(input, { target: { value: 'zzzz' } });
+
+    await waitFor(() => expect(screen.getAllByText('No data').length).toBeGreaterThan(0));
+  });
+
+  it('closes searchable submenu after focus without input', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+
+    const items = [
+      {
+        key: 'fields',
+        label: 'Fields',
+        searchable: true,
+        children: [
+          { key: 'f1', label: 'Field 1', createModelOptions: { use: 'Parent' } },
+          { key: 'f2', label: 'Field 2', createModelOptions: { use: 'Parent' } },
+        ],
+      },
+    ];
+
+    const user = userEvent.setup();
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton model={parent} subModelKey="items" items={items as any}>
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByText('Fields')).toBeInTheDocument());
+    await user.hover(screen.getByText('Fields'));
+    await waitFor(() => expect(screen.getByText('Field 1')).toBeInTheDocument());
+
+    await user.click(screen.getByRole('textbox'));
+    fireEvent.mouseLeave(screen.getByText('Fields'));
+
+    await waitFor(() => expect(screen.queryByText('Field 1')).not.toBeInTheDocument());
+  });
+
+  it('closes active searchable submenu after outside click', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+
+    const items = [
+      {
+        key: 'fields',
+        label: 'Fields',
+        searchable: true,
+        children: [
+          { key: 'f1', label: 'Field 1', createModelOptions: { use: 'Parent' } },
+          { key: 'f2', label: 'Field 2', createModelOptions: { use: 'Parent' } },
+        ],
+      },
+    ];
+
+    const user = userEvent.setup();
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton model={parent} subModelKey="items" items={items as any}>
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByText('Fields')).toBeInTheDocument());
+    await user.hover(screen.getByText('Fields'));
+    await waitFor(() => expect(screen.getByText('Field 1')).toBeInTheDocument());
+
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Field' } });
+    expect(screen.getByText('Field 1')).toBeInTheDocument();
+
+    fireEvent.pointerDown(document.body);
+
+    await waitFor(() => expect(screen.queryByText('Fields')).not.toBeInTheDocument());
+  });
+
+  it('switches away from active searchable submenu and resets its input', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+
+    const items = [
+      {
+        key: 'fields',
+        label: 'Fields',
+        searchable: true,
+        children: [
+          { key: 'f1', label: 'Field 1', createModelOptions: { use: 'Parent' } },
+          { key: 'f2', label: 'Field 2', createModelOptions: { use: 'Parent' } },
+        ],
+      },
+      {
+        key: 'blocks',
+        label: 'Blocks',
+        searchable: true,
+        children: [
+          { key: 'b1', label: 'Block 1', createModelOptions: { use: 'Parent' } },
+          { key: 'b2', label: 'Block 2', createModelOptions: { use: 'Parent' } },
+        ],
+      },
+    ];
+
+    const user = userEvent.setup();
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton model={parent} subModelKey="items" items={items as any}>
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByText('Fields')).toBeInTheDocument());
+    await user.hover(screen.getByText('Fields'));
+    await waitFor(() => expect(screen.getByText('Field 1')).toBeInTheDocument());
+
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'zzzz' } });
+    await waitFor(() => expect(screen.getAllByText('No data').length).toBeGreaterThan(0));
+
+    await user.hover(screen.getByText('Blocks'));
+    await waitFor(() => expect(screen.getByText('Block 1')).toBeInTheDocument());
+    expect(screen.queryByText('No data')).not.toBeInTheDocument();
+
+    await user.hover(screen.getByText('Fields'));
+    await waitFor(() => expect(screen.getByText('Field 1')).toBeInTheDocument());
+    expect(screen.getByRole('textbox')).toHaveValue('');
+  });
 });
 
 describe('transformItems - hide', () => {

package/src/data-source/index.ts

@@ -37,7 +37,13 @@ export class DataSourceManager {
     addFieldInterfaceGroups?: (groups: Record<string, { label: string; order?: number }>) => void;
     addFieldInterfaceComponentOption?: (name: string, option: any) => void;
     addFieldInterfaceOperator?: (name: string, operator: any) => void;
+    registerFieldFilterOperator?: (operator: any) => void;
+    registerFieldFilterOperatorGroup?: (name: string, operators?: any[]) => void;
+    addFieldFilterOperatorsToGroup?: (name: string, operators?: any[]) => void;
     getFieldInterface?: (name: string) => any;
+    registerFieldInterfaceConfigure?: (options: unknown) => void;
+    getFieldInterfaceConfigure?: (name: string, collectionInfo?: unknown) => unknown;
+    getFieldInterfaceConfigureProperties?: (name: string, collectionInfo?: any) => Record<string, any>;
   };
   loaders = new Map<string, DataSourceLoader>();
   loadedKeys = new Set<string>();
@@ -77,6 +83,18 @@ export class DataSourceManager {
     this.collectionFieldInterfaceManager?.addFieldInterfaceOperator?.(name, operator);
   }
 
+  registerFieldFilterOperator(operator: any) {
+    this.collectionFieldInterfaceManager?.registerFieldFilterOperator?.(operator);
+  }
+
+  registerFieldFilterOperatorGroup(name: string, operators: any[] = []) {
+    this.collectionFieldInterfaceManager?.registerFieldFilterOperatorGroup?.(name, operators);
+  }
+
+  addFieldFilterOperatorsToGroup(name: string, operators: any[] = []) {
+    this.collectionFieldInterfaceManager?.addFieldFilterOperatorsToGroup?.(name, operators);
+  }
+
   registerLoader(key: string, loader: DataSourceLoader) {
     this.loaders.set(key, loader);
   }