@nocobase/client-v2 2.2.0-beta.17 → 2.2.0-beta.18

package/src/flow/actions/linkageRules.tsx

@@ -120,11 +120,16 @@ const isActionFlowModel = (model: any): boolean => {
   return false;
 };
 
+const isFormFieldModel = (model: unknown): model is FlowModel => {
+  if (!model || typeof model !== 'object') return false;
+  return !!(model as FlowModel).subModels?.field;
+};
+
 // 获取表单中所有字段的 model 实例的通用函数
 const getFormFields = (ctx: any) => {
   try {
     const fieldModels = ctx.model?.subModels?.grid?.subModels?.items || [];
-    return fieldModels.map((model: any) => ({
+    return fieldModels.filter(isFormFieldModel).map((model) => ({
       label: model.props.label || model.props.name,
       value: model.uid,
       model,
@@ -346,8 +351,8 @@ const FieldStateEditor = ({
 const getFormFieldsByForkModel = (ctx: any) => {
   try {
     const fieldModels = ctx.model?.subModels?.grid?.subModels?.items || [];
-    return fieldModels.map((model: any) => {
-      const forkModel = Array.from(model.forks)[0] as any;
+    return fieldModels.filter(isFormFieldModel).map((model) => {
+      const forkModel = Array.from(model.forks)[0] as FlowModel | undefined;
 
       if (forkModel) {
         return {

package/src/flow/admin-shell/admin-layout/AdminLayoutMenuUtils.tsx

@@ -17,7 +17,7 @@ import {
   FlowSettingsButton,
   observer,
 } from '@nocobase/flow-engine';
-import { Badge, Tooltip } from 'antd';
+import { Badge } from 'antd';
 import qs from 'qs';
 import React, { FC, useCallback, useContext, useEffect } from 'react';
 import { Link, useLocation, type NavigateFunction } from 'react-router-dom';
@@ -153,6 +153,24 @@ const getLayoutRoutePathFromModel = (model: FlowModel): AdminLayoutRoutePathLike
 };
 
 const menuItemStyle = { display: 'flex', alignItems: 'center', justifyContent: 'space-between' };
+const siderMenuItemStyle: React.CSSProperties = { ...menuItemStyle, width: '100%', minWidth: 0 };
+const siderMenuItemContentStyle: React.CSSProperties = { flex: 1, minWidth: 0, overflow: 'hidden' };
+const siderMenuItemLinkStyle: React.CSSProperties = {
+  display: 'block',
+  flex: 1,
+  width: '100%',
+  minWidth: 0,
+  overflow: 'hidden',
+};
+const getMenuItemText = (name: React.ReactNode) => {
+  if (typeof name === 'string' || typeof name === 'number') {
+    return String(name);
+  }
+
+  if (React.isValidElement<{ title?: unknown }>(name) && typeof name.props.title === 'string') {
+    return name.props.title;
+  }
+};
 const groupLandingEntryStyle = {
   display: 'inline-flex',
   alignItems: 'center',
@@ -553,16 +571,16 @@ export function resolveAdminLayoutMenuDragMoveOptionsFromEvent(
 
 const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderOptions }> = (props) => {
   const { item } = props;
+  const { inHeader } = useContext(HeaderContext);
   const badgeCount = useEvaluatedExpression(item._route.options?.badge?.count, item._model?.context);
   const navigate = useNavigateNoUpdate();
   const routerBasename = useRouterBasename();
   const { closeMobileMenu } = useContext(MobileMenuControlContext);
   const ariaLabel =
-    typeof item.name === 'string' || typeof item.name === 'number'
-      ? String(item.name)
-      : typeof item._route?.title === 'string' || typeof item._route?.title === 'number'
-        ? String(item._route.title)
-        : undefined;
+    getMenuItemText(item.name) ??
+    (typeof item._route?.title === 'string' || typeof item._route?.title === 'number'
+      ? String(item._route.title)
+      : undefined);
   const runtimePath = item._runtimePath;
   const spaRuntimePath = runtimePath ? toRouterNavigationPath(runtimePath, routerBasename) : runtimePath;
 
@@ -633,7 +651,12 @@ const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRender
   return (
     <ParentRouteContext.Provider value={item._parentRoute}>
       <NocoBaseRouteContext.Provider value={item._route}>
-        <div aria-label={ariaLabel} role="none" style={menuItemStyle}>
+        <div
+          aria-label={ariaLabel}
+          title={inHeader || item._route?.tooltip ? undefined : ariaLabel}
+          role="none"
+          style={inHeader ? menuItemStyle : siderMenuItemStyle}
+        >
           {content}
           {landingEntry}
           {badgeCount != null && (
@@ -650,24 +673,9 @@ const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRender
   );
 };
 
-const WithTooltip: FC<{ title: React.ReactNode; hidden: boolean; badgeProps: any }> = (props) => {
-  const { inHeader } = useContext(HeaderContext);
-
-  if (props.hidden || inHeader) {
-    return props.children;
-  }
-
-  return (
-    <Tooltip title={props.title} placement="right">
-      <Badge {...props.badgeProps} style={{ transform: 'none', maxWidth: '10em' }} dot={false}>
-        {props.children}
-      </Badge>
-    </Tooltip>
-  );
-};
-
 const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderOptions }> = (props) => {
   const { item } = props;
+  const { inHeader } = useContext(HeaderContext);
   const location = useLocation();
   const badgeCount = useEvaluatedExpression(item._route.options?.badge?.count, item._model?.context);
   const navigate = useNavigateNoUpdate();
@@ -677,7 +685,10 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
   const runtimePath = item._runtimePath || path;
   const spaRuntimePath = runtimePath ? toRouterNavigationPath(runtimePath, basenameOfCurrentRouter) : runtimePath;
   const isDocumentNavigation = item._navigationMode === 'document';
-  const badgeProps = { ...item._route.options?.badge, count: badgeCount };
+  const { textColor: badgeTextColor, ...antdBadgeOptions } = item._route.options?.badge || {};
+  const badgeProps = { ...antdBadgeOptions, count: badgeCount };
+  const menuItemText = getMenuItemText(item.name);
+  const nativeTitle = inHeader || item._route?.tooltip ? undefined : menuItemText;
 
   const canUseNativeAnchor = !!runtimePath && isDocumentNavigation;
 
@@ -767,17 +778,25 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
     return (
       <ParentRouteContext.Provider value={item._parentRoute}>
         <NocoBaseRouteContext.Provider value={item._route}>
-          <div role="none" style={menuItemStyle}>
-            <div onClick={handleClickLink}>
-              <Link to={location.pathname} aria-label={typeof item.name === 'string' ? item.name : undefined}>
+          <div role="none" style={inHeader ? menuItemStyle : siderMenuItemStyle}>
+            <div onClick={handleClickLink} style={inHeader ? undefined : siderMenuItemContentStyle}>
+              <Link
+                to={location.pathname}
+                aria-label={menuItemText}
+                title={nativeTitle}
+                style={inHeader ? undefined : siderMenuItemLinkStyle}
+              >
                 {props.children}
               </Link>
             </div>
             {badgeCount != null && (
               <Badge
-                {...item._route.options?.badge}
-                count={badgeCount}
-                style={{ marginLeft: 4, color: item._route.options?.badge?.textColor, maxWidth: '10em' }}
+                {...badgeProps}
+                style={{
+                  marginLeft: 4,
+                  ...(badgeTextColor == null ? {} : { color: badgeTextColor }),
+                  maxWidth: '10em',
+                }}
                 dot={false}
               ></Badge>
             )}
@@ -787,45 +806,45 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
     );
   }
 
-  const itemContent = (
-    <WithTooltip
-      title={item.name}
-      hidden={
-        item._route.type === NocoBaseDesktopRouteType.group || (item._depth || 0) > 0 || !props.options?.collapsed
-      }
-      badgeProps={badgeProps}
+  const itemContent = canUseNativeAnchor ? (
+    <a
+      href={runtimePath}
+      aria-label={menuItemText}
+      title={nativeTitle}
+      onClick={handleClickMenuItem}
+      style={inHeader ? undefined : siderMenuItemLinkStyle}
     >
-      {canUseNativeAnchor ? (
-        <a
-          href={runtimePath}
-          aria-label={typeof item.name === 'string' ? item.name : undefined}
-          onClick={handleClickMenuItem as any}
-        >
-          {props.children}
-        </a>
-      ) : runtimePath ? (
-        <Link
-          to={spaRuntimePath}
-          aria-label={typeof item.name === 'string' ? item.name : undefined}
-          onClick={handleClickMenuItem}
-        >
-          {props.children}
-        </Link>
-      ) : (
-        <span aria-label={typeof item.name === 'string' ? item.name : undefined}>{props.children}</span>
-      )}
-    </WithTooltip>
+      {props.children}
+    </a>
+  ) : runtimePath ? (
+    <Link
+      to={spaRuntimePath}
+      aria-label={menuItemText}
+      title={nativeTitle}
+      onClick={handleClickMenuItem}
+      style={inHeader ? undefined : siderMenuItemLinkStyle}
+    >
+      {props.children}
+    </Link>
+  ) : (
+    <span aria-label={menuItemText} title={nativeTitle} style={inHeader ? undefined : siderMenuItemLinkStyle}>
+      {props.children}
+    </span>
   );
 
   return (
     <ParentRouteContext.Provider value={item._parentRoute}>
       <NocoBaseRouteContext.Provider value={item._route}>
-        <div role="none" style={menuItemStyle}>
+        <div role="none" style={inHeader ? menuItemStyle : siderMenuItemStyle}>
           {itemContent}
           {badgeCount != null && (
             <Badge
               {...badgeProps}
-              style={{ marginLeft: 4, color: item._route.options?.badge?.textColor, maxWidth: '10em' }}
+              style={{
+                marginLeft: 4,
+                ...(badgeTextColor == null ? {} : { color: badgeTextColor }),
+                maxWidth: '10em',
+              }}
               dot={false}
             ></Badge>
           )}

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutMenuModels.test.ts

@@ -19,6 +19,7 @@ import {
   AdminLayoutMenuItemModel,
   AdminLayoutModel,
   ADMIN_LAYOUT_MODEL_UID,
+  buildMenuTitleWithIcon,
   getAdminLayoutMenuMovePositionOptions,
   normalizeAdminLayoutMenuLegacyVariables,
   openAdminLayoutMenuLink,
@@ -119,6 +120,233 @@ describe('AdminLayoutModel menu items', () => {
     ...options,
   });
 
+  type MenuTitleOptions = {
+    title: string;
+    collapsed: boolean;
+    name?: React.ReactNode;
+    routeTitle?: string;
+    renderType?: 'item' | 'group';
+    tooltip?: string;
+    badgeCount?: number;
+    badgeIndicatorColor?: string;
+    badgeTextColor?: string;
+    depth?: number;
+  };
+
+  const createMenuTitle = (options: MenuTitleOptions) => {
+    const {
+      title,
+      collapsed,
+      name = title,
+      routeTitle = title,
+      renderType = 'item',
+      tooltip,
+      badgeCount,
+      badgeIndicatorColor,
+      badgeTextColor,
+      depth = 1,
+    } = options;
+
+    return React.createElement(
+      FlowEngineProvider,
+      { engine },
+      React.createElement(
+        MemoryRouter,
+        { initialEntries: ['/admin/current-page'] },
+        React.createElement(AdminLayoutMenuItemRenderer, {
+          renderType,
+          item: {
+            name,
+            path: '/admin/menu-title',
+            _runtimePath: '/apps/demo/v2/admin/menu-title',
+            _navigationMode: 'spa',
+            _isLegacy: false,
+            _depth: depth,
+            _route: {
+              type: NocoBaseDesktopRouteType.flowPage,
+              title: routeTitle,
+              tooltip,
+              schemaUid: 'menu-title',
+              options:
+                badgeCount == null
+                  ? {}
+                  : {
+                      badge: {
+                        count: badgeCount,
+                        styles: badgeIndicatorColor ? { indicator: { color: badgeIndicatorColor } } : undefined,
+                        textColor: badgeTextColor,
+                      },
+                    },
+            },
+          },
+          dom: React.createElement(
+            'span',
+            { className: 'ant-pro-base-menu-inline-item-text' },
+            collapsed ? title.slice(0, 1) : title,
+          ),
+          options: { isMobile: false, collapsed },
+        }),
+      ),
+    );
+  };
+
+  const renderMenuTitle = (options: MenuTitleOptions) => render(createMenuTitle(options));
+
+  it.each([false, true])(
+    'should use a native title without an extra tooltip trigger when collapsed is %s',
+    async (collapsed) => {
+      vi.useFakeTimers();
+      const title = 'A complete menu title that may be truncated';
+
+      try {
+        const { container } = renderMenuTitle({ title, collapsed });
+        const link = screen.getByRole('link', { name: title });
+        const menuItem = link.closest<HTMLElement>('[role="none"]');
+
+        expect(link).toHaveAttribute('title', title);
+        expect(link.parentElement).toBe(menuItem);
+        expect(menuItem).toHaveStyle({ width: '100%', minWidth: 0 });
+        expect(link).toHaveStyle({ display: 'block', width: '100%', minWidth: 0, overflow: 'hidden' });
+        expect(container.querySelector('.ant-tooltip')).not.toBeInTheDocument();
+
+        await act(async () => {
+          fireEvent.mouseEnter(link);
+          await vi.advanceTimersByTimeAsync(500);
+        });
+
+        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+      } finally {
+        vi.clearAllTimers();
+        vi.useRealTimers();
+      }
+    },
+  );
+
+  it('should use the translated native title for an icon-wrapped nested menu name', () => {
+    const title = 'A translated nested menu title';
+    const { name } = buildMenuTitleWithIcon(
+      { title: 'menu.nested.title', icon: 'AppstoreOutlined' },
+      () => title,
+      true,
+    );
+
+    renderMenuTitle({ title, name, collapsed: true, depth: 2 });
+
+    expect(screen.getByRole('link', { name: title })).toHaveAttribute('title', title);
+  });
+
+  it('should use the translated native title for an icon-wrapped nested group name', () => {
+    const title = 'A translated nested group title';
+    const { name } = buildMenuTitleWithIcon(
+      { title: 'menu.nested.group', icon: 'AppstoreOutlined' },
+      () => title,
+      true,
+    );
+    const { container } = renderMenuTitle({
+      title,
+      name,
+      routeTitle: 'menu.nested.group',
+      renderType: 'group',
+      collapsed: true,
+      depth: 2,
+    });
+    const group = container.querySelector('[role="none"]');
+
+    expect(group).toHaveAttribute('title', title);
+    expect(group).toHaveAttribute('aria-label', title);
+  });
+
+  it('should preserve a numeric group name as the native title', () => {
+    const { container } = renderMenuTitle({
+      title: '0',
+      name: 0,
+      routeTitle: 'menu.numeric.group',
+      renderType: 'group',
+      collapsed: true,
+    });
+    const group = container.querySelector('[role="none"]');
+
+    expect(group).toHaveAttribute('title', '0');
+    expect(group).toHaveAttribute('aria-label', '0');
+  });
+
+  it.each(['item', 'group'] as const)(
+    'should let an explicit route tooltip own hover behavior for a sider %s',
+    (renderType) => {
+      const title = 'A menu title with an explicit description';
+      const { container } = renderMenuTitle({
+        title,
+        renderType,
+        collapsed: false,
+        tooltip: 'An explicitly configured menu description',
+      });
+      const titleTarget =
+        renderType === 'item' ? screen.getByRole('link', { name: title }) : container.querySelector('[role="none"]');
+
+      expect(titleTarget).not.toHaveAttribute('title');
+      expect(screen.getByRole('img', { name: 'question-circle' })).toBeInTheDocument();
+    },
+  );
+
+  it('should keep the same menu link when the sider expands', async () => {
+    vi.useFakeTimers();
+    const title = 'A title that fits after expanding';
+
+    try {
+      const { rerender } = renderMenuTitle({ title, collapsed: true });
+      const link = screen.getByRole('link', { name: title });
+
+      await act(async () => {
+        rerender(createMenuTitle({ title, collapsed: false }));
+        await vi.runOnlyPendingTimersAsync();
+      });
+
+      expect(screen.getByRole('link', { name: title })).toBe(link);
+      expect(link).toHaveAttribute('title', title);
+    } finally {
+      vi.clearAllTimers();
+      vi.useRealTimers();
+    }
+  });
+
+  it.each([true, false])(
+    'should render one badge indicator for a nested menu title when collapsed is %s',
+    (collapsed) => {
+      const title = 'A nested menu title with a badge';
+      const { container } = renderMenuTitle({ title, collapsed, badgeCount: 7 });
+
+      expect(container.querySelectorAll('.ant-badge-count')).toHaveLength(1);
+    },
+  );
+
+  it('should render one badge indicator for a top-level collapsed menu title', () => {
+    const title = 'A top-level collapsed menu title with a badge';
+    const { container } = renderMenuTitle({
+      title,
+      collapsed: true,
+      badgeCount: 7,
+      badgeTextColor: 'rgb(1, 2, 3)',
+      depth: 0,
+    });
+    const indicator = container.querySelector<HTMLElement>('.ant-badge-count');
+
+    expect(container.querySelectorAll('.ant-badge-count')).toHaveLength(1);
+    expect(indicator).toHaveStyle({ color: 'rgb(1, 2, 3)' });
+  });
+
+  it('should preserve the Ant Design indicator color when collapsed badge textColor is unset', () => {
+    const title = 'A top-level collapsed menu title with an indicator color';
+    const { container } = renderMenuTitle({
+      title,
+      collapsed: true,
+      badgeCount: 7,
+      badgeIndicatorColor: 'rgb(4, 5, 6)',
+      depth: 0,
+    });
+
+    expect(container.querySelector('.ant-badge-count')).toHaveStyle({ color: 'rgb(4, 5, 6)' });
+  });
+
   it('should normalize legacy variables only inside template expressions', () => {
     expect(normalizeAdminLayoutMenuLegacyVariables('https://a.com?id={{ $user.id }}')).toBe(
       'https://a.com?id={{ ctx.user.id }}',

package/src/flow/components/filter/VariableFilterItem.tsx

@@ -34,6 +34,8 @@ const { DateFilterDynamicComponent: DateFilterDynamicComponentLazy } = lazy(
   'DateFilterDynamicComponent',
 );
 
+const fallbackInputComponents = new Set(['Input', 'Input.URL', 'NanoIDInput', 'DatePicker']);
+
 // 简化的本地辅助：按需获取 ctx.collection 的字段树（MetaTreeNode[]）
 async function buildCollectionLeftMetaTreeLocal(ctx: any): Promise<MetaTreeNode[]> {
   const resolve = async (sub: any): Promise<MetaTreeNode[]> => {
@@ -276,9 +278,9 @@ function createStaticInputRenderer(
           onChange={(v: unknown) => onChange?.(v as VariableFilterItemValue['value'])}
         />
       );
-    // 未内置的 x-component：尝试从 app 解析组件
+    // 未直接处理的 x-component：尝试从 app 解析组件，可由筛选器接管的过渡组件查找失败时静默回退到 Input
     if (xComp && app?.getComponent) {
-      const Comp = app.getComponent(xComp as any);
+      const Comp = app.getComponent(xComp, !fallbackInputComponents.has(xComp));
       if (Comp) {
         return (
           <Comp
@@ -595,8 +597,14 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
 
     const renderRightValueComponent = useCallback(() => {
       // 文本类多关键词：优先使用操作符 schema 声明的组件
-      const resolved = resolveOperatorComponent(model.context.app, operator, operatorMetaList);
       const supportKeyword = operator === '$in' || operator === '$notIn';
+      const operatorComponent = currentOpMeta?.schema?.['x-component'] as string | undefined;
+      const isLocallyRenderedComponent =
+        operatorComponent === 'Select' ||
+        (typeof operatorComponent === 'string' && fallbackInputComponents.has(operatorComponent));
+      const resolved = supportKeyword
+        ? resolveOperatorComponent(model.context.app, operator, operatorMetaList, !isLocallyRenderedComponent)
+        : null;
       if (resolved && supportKeyword) {
         const { Comp, props: xProps } = resolved;
         const nextProps = { ...xProps };
@@ -642,6 +650,7 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
       disabled,
       operator,
       operatorMetaList,
+      currentOpMeta,
       rightValue,
       staticInputRenderer,
       model.context.app,

package/src/flow/components/filter/__tests__/VariableFilterItem.test.tsx

@@ -47,6 +47,10 @@ vi.mock('@nocobase/flow-engine', async () => {
   return { ...actual, VariableInput: MockVariableInput };
 });
 
+vi.mock('../../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent', () => ({
+  DateFilterDynamicComponent: () => <div data-testid="date-filter-dynamic-component" />,
+}));
+
 const getRenderedSelectTexts = (root: ParentNode = document.body) =>
   Array.from(root.querySelectorAll('.ant-select-selection-item')).map((node) => (node.textContent || '').trim());
 
@@ -158,6 +162,127 @@ describe('VariableFilterItem', () => {
     expect(value.value).toBe('abc');
   });
 
+  it.each([
+    { operator: '$includes', xComponent: 'Input' },
+    { operator: '$eq', xComponent: 'Select' },
+    { operator: '$in', xComponent: 'Select' },
+  ])('uses a silent app registry lookup for the local $xComponent control', async ({ operator, xComponent }) => {
+    const value = observable({ path: '', operator: '', value: '' }) as VariableFilterItemValue;
+    const model = CreateModel();
+    const app = model.context.app as unknown as ReturnType<typeof createMockFlowApp>;
+    const getComponent = vi.spyOn(app, 'getComponent');
+
+    (globalThis as { __TEST_PATH__?: string }).__TEST_PATH__ = 'status';
+    (globalThis as { __TEST_META__?: MetaTreeNode }).__TEST_META__ = {
+      interface: 'input',
+      uiSchema: {
+        'x-component': xComponent,
+        enum: [{ label: 'Draft', value: 'draft' }],
+        'x-filter-operators': [
+          {
+            value: operator,
+            label: 'Operator',
+            selected: true,
+            schema: {
+              'x-component': xComponent,
+              'x-component-props': xComponent === 'Select' ? { mode: operator === '$in' ? 'tags' : null } : {},
+            },
+          },
+        ],
+      },
+      paths: ['collection', 'status'],
+      name: 'status',
+      title: 'Status',
+      type: 'string',
+    };
+
+    render(<VariableFilterItem value={value} model={model} rightAsVariable={false} />);
+    fireEvent.click(screen.getByTestId('variable-input'));
+
+    await waitFor(() => {
+      expect(value.operator).toBe(operator);
+    });
+    if (xComponent === 'Select' && operator === '$eq') {
+      expect(getComponent).not.toHaveBeenCalled();
+    } else {
+      expect(getComponent).toHaveBeenCalledWith(xComponent, false);
+    }
+  });
+
+  it('silently handles the DatePicker field schema before the date operator component takes over', async () => {
+    const value = observable({ path: '', operator: '', value: '' }) as VariableFilterItemValue;
+    const model = CreateModel();
+    const app = model.context.app as unknown as ReturnType<typeof createMockFlowApp>;
+    const getComponent = vi.spyOn(app, 'getComponent');
+
+    (globalThis as { __TEST_PATH__?: string }).__TEST_PATH__ = 'createdAt';
+    (globalThis as { __TEST_META__?: MetaTreeNode }).__TEST_META__ = {
+      interface: 'createdAt',
+      uiSchema: {
+        'x-component': 'DatePicker',
+        'x-filter-operators': [
+          {
+            value: '$dateOn',
+            label: 'Is',
+            selected: true,
+            schema: {
+              'x-component': 'DateFilterDynamicComponent',
+              'x-component-props': { isRange: false },
+            },
+          },
+        ],
+      },
+      paths: ['collection', 'createdAt'],
+      name: 'createdAt',
+      title: 'Created at',
+      type: 'date',
+    };
+
+    render(<VariableFilterItem value={value} model={model} rightAsVariable={false} />);
+    fireEvent.click(screen.getByTestId('variable-input'));
+
+    await waitFor(() => {
+      expect(value.operator).toBe('$dateOn');
+    });
+    expect(getComponent).toHaveBeenCalledWith('DatePicker', false);
+    expect(await screen.findByTestId('date-filter-dynamic-component')).toBeInTheDocument();
+  });
+
+  it('continues resolving plugin-provided keyword controls from the app registry', async () => {
+    const value = observable({ path: '', operator: '', value: '' }) as VariableFilterItemValue;
+    const model = CreateModel();
+    const app = model.context.app as unknown as ReturnType<typeof createMockFlowApp>;
+    const MultipleKeywordsInput: React.FC = () => <div data-testid="multiple-keywords-input" />;
+    app.addComponents({ MultipleKeywordsInput });
+    const getComponent = vi.spyOn(app, 'getComponent');
+
+    (globalThis as { __TEST_PATH__?: string }).__TEST_PATH__ = 'name';
+    (globalThis as { __TEST_META__?: MetaTreeNode }).__TEST_META__ = {
+      interface: 'input',
+      uiSchema: {
+        'x-component': 'Input',
+        'x-filter-operators': [
+          {
+            value: '$in',
+            label: 'Is any of',
+            selected: true,
+            schema: { 'x-component': 'MultipleKeywordsInput' },
+          },
+        ],
+      },
+      paths: ['collection', 'name'],
+      name: 'name',
+      title: 'Name',
+      type: 'string',
+    };
+
+    render(<VariableFilterItem value={value} model={model} rightAsVariable={false} />);
+    fireEvent.click(screen.getByTestId('variable-input'));
+
+    expect(await screen.findByTestId('multiple-keywords-input')).toBeTruthy();
+    expect(getComponent).toHaveBeenCalledWith('MultipleKeywordsInput');
+  });
+
   it('passes disabled through to the left selector, operator select, and right variable input', async () => {
     const value: VariableFilterItemValue = { path: '', operator: '', value: '' };
     const model = CreateModel();