@nocobase/client-v2 2.1.0-alpha.31 → 2.1.0-alpha.32

package/src/flow/models/fields/DateTimeFieldModel/__tests__/DateTimeNoTzFieldModel.dateLimit.test.tsx

@@ -0,0 +1,242 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { Form } from 'antd';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, waitFor } from '@nocobase/test/client';
+import { dayjs } from '@nocobase/utils/client';
+import { DateTimeNoTzPicker } from '../DateTimeNoTzFieldModel';
+
+let capturedDatePickerProps: any;
+let currentForm: any;
+const mockResolveJsonTemplate = vi.fn();
+
+vi.mock('@nocobase/flow-engine', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
+  return {
+    ...actual,
+    useFlowModelContext: () => ({
+      isMobileLayout: false,
+      model: {
+        context: {
+          form: currentForm,
+        },
+      },
+    }),
+    useFlowContext: () => ({
+      resolveJsonTemplate: mockResolveJsonTemplate,
+    }),
+  };
+});
+
+vi.mock('antd', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('antd')>();
+  return {
+    ...actual,
+    DatePicker: (props: any) => {
+      capturedDatePickerProps = props;
+      return <div data-testid="date-picker" />;
+    },
+    Form: actual.Form,
+  };
+});
+
+const TestWrapper = (props: any) => {
+  const [form] = Form.useForm();
+  currentForm = form;
+
+  return (
+    <Form form={form} initialValues={{ b: '2026-05-10 12:34:56' }}>
+      <DateTimeNoTzPicker {...props} />
+    </Form>
+  );
+};
+
+describe('DateTimeNoTzPicker date range limit', () => {
+  beforeEach(() => {
+    currentForm = undefined;
+    capturedDatePickerProps = undefined;
+    mockResolveJsonTemplate.mockReset();
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _maxDate: currentForm?.getFieldValue?.('b'),
+    }));
+  });
+
+  it('applies maxDate from current form field b', async () => {
+    render(<TestWrapper picker="date" showTime _maxDate={'{{ $nForm.b }}'} onChange={vi.fn()} value={null} />);
+
+    await waitFor(() => {
+      expect(mockResolveJsonTemplate).toHaveBeenCalledWith({
+        _minDate: undefined,
+        _maxDate: '{{ $nForm.b }}',
+      });
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(true);
+    });
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-10 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toContain(13);
+    expect(timeConfig?.disabledHours?.()).not.toContain(12);
+    expect(timeConfig?.disabledMinutes?.(12)).toContain(35);
+    expect(timeConfig?.disabledMinutes?.(12)).not.toContain(34);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).toContain(57);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).not.toContain(56);
+  });
+
+  it('updates field a maxDate immediately when field b changes', async () => {
+    render(<TestWrapper picker="date" showTime _maxDate={'{{ $nForm.b }}'} onChange={vi.fn()} value={null} />);
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(true);
+    });
+
+    currentForm.setFieldValue('b', '2026-05-12 08:09:10');
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(false);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-13 00:00:00'))).toBe(true);
+    });
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-12 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toContain(9);
+    expect(timeConfig?.disabledHours?.()).not.toContain(8);
+    expect(timeConfig?.disabledMinutes?.(8)).toContain(10);
+    expect(timeConfig?.disabledMinutes?.(8)).not.toContain(9);
+    expect(timeConfig?.disabledSeconds?.(8, 9)).toContain(11);
+    expect(timeConfig?.disabledSeconds?.(8, 9)).not.toContain(10);
+  });
+
+  it('applies minDate from current form field b', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _minDate: currentForm?.getFieldValue?.('b'),
+      _maxDate: undefined,
+    }));
+
+    render(<TestWrapper picker="date" showTime _minDate={'{{ $nForm.b }}'} onChange={vi.fn()} value={null} />);
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-10 00:00:00'))).toBe(false);
+    });
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-10 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toContain(11);
+    expect(timeConfig?.disabledHours?.()).not.toContain(12);
+    expect(timeConfig?.disabledMinutes?.(12)).toContain(33);
+    expect(timeConfig?.disabledMinutes?.(12)).not.toContain(34);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).toContain(55);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).not.toContain(56);
+  });
+
+  it('applies both minDate and maxDate together', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _minDate: '2026-05-10 08:00:00',
+      _maxDate: '2026-05-12 18:30:40',
+    }));
+
+    render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={'{{ $nForm.min }}'}
+        _maxDate={'{{ $nForm.max }}'}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-13 00:00:00'))).toBe(true);
+    });
+
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(false);
+
+    const minDayTimeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-10 00:00:00'));
+    expect(minDayTimeConfig?.disabledHours?.()).toContain(7);
+    expect(minDayTimeConfig?.disabledHours?.()).not.toContain(8);
+
+    const maxDayTimeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-12 00:00:00'));
+    expect(maxDayTimeConfig?.disabledHours?.()).toContain(19);
+    expect(maxDayTimeConfig?.disabledHours?.()).not.toContain(18);
+    expect(maxDayTimeConfig?.disabledMinutes?.(18)).toContain(31);
+    expect(maxDayTimeConfig?.disabledMinutes?.(18)).not.toContain(30);
+    expect(maxDayTimeConfig?.disabledSeconds?.(18, 30)).toContain(41);
+    expect(maxDayTimeConfig?.disabledSeconds?.(18, 30)).not.toContain(40);
+  });
+
+  it('uses first minDate and last maxDate when resolved values are arrays', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _minDate: ['2026-05-10 08:00:00', '2026-05-11 09:00:00'],
+      _maxDate: ['2026-05-12 10:00:00', '2026-05-13 11:12:13'],
+    }));
+
+    render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={'{{ $nForm.min }}'}
+        _maxDate={'{{ $nForm.max }}'}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-14 00:00:00'))).toBe(true);
+    });
+
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-10 00:00:00'))).toBe(false);
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-13 00:00:00'))).toBe(false);
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-13 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toContain(12);
+    expect(timeConfig?.disabledHours?.()).not.toContain(11);
+    expect(timeConfig?.disabledMinutes?.(11)).toContain(13);
+    expect(timeConfig?.disabledMinutes?.(11)).not.toContain(12);
+    expect(timeConfig?.disabledSeconds?.(11, 12)).toContain(14);
+    expect(timeConfig?.disabledSeconds?.(11, 12)).not.toContain(13);
+  });
+
+  it('clears date and time restrictions when resolved values are empty', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _minDate: undefined,
+      _maxDate: undefined,
+    }));
+
+    render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={'{{ $nForm.min }}'}
+        _maxDate={'{{ $nForm.max }}'}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps).toBeTruthy();
+    });
+
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-01 00:00:00'))).toBe(false);
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-31 00:00:00'))).toBe(false);
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-15 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toEqual([]);
+    expect(timeConfig?.disabledMinutes?.(12)).toEqual([]);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).toEqual([]);
+  });
+});

package/src/flow/models/fields/DateTimeFieldModel/dateLimit.ts

@@ -0,0 +1,152 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { autorun } from '@formily/reactive';
+import { Form } from 'antd';
+import { useFlowContext } from '@nocobase/flow-engine';
+import { dayjs } from '@nocobase/utils/client';
+import { first, last } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
+
+type DateLimitProps = {
+  _minDate?: any;
+  _maxDate?: any;
+  currentForm?: any;
+};
+
+export function useDateLimit(props: DateLimitProps) {
+  const ctx = useFlowContext();
+  const isAntdFormInstance = typeof props.currentForm?.getFieldsValue === 'function';
+  const currentFormValues = Form.useWatch([], isAntdFormInstance ? props.currentForm : undefined);
+  const [minDate, setMinDate] = useState<dayjs.Dayjs | null>(null);
+  const [maxDate, setMaxDate] = useState<dayjs.Dayjs | null>(null);
+  const [disabledDate, setDisabledDate] = useState<any>(null);
+  const [disabledTime, setDisabledTime] = useState<any>(null);
+  const disposeRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (disposeRef.current) {
+      disposeRef.current();
+    }
+
+    disposeRef.current = autorun(() => {
+      void limitDate();
+    });
+
+    return () => {
+      disposeRef.current?.();
+    };
+  }, [ctx, currentFormValues, props._maxDate, props._minDate]);
+
+  const limitDate = async () => {
+    const resolvedParams = await ctx.resolveJsonTemplate({
+      _minDate: props._minDate,
+      _maxDate: props._maxDate,
+    });
+
+    const nextMinRaw = Array.isArray(resolvedParams?._minDate)
+      ? first(resolvedParams._minDate)
+      : resolvedParams?._minDate;
+    const nextMaxRaw = Array.isArray(resolvedParams?._maxDate)
+      ? last(resolvedParams._maxDate)
+      : resolvedParams?._maxDate;
+    const nextMinDate = nextMinRaw ? dayjs(nextMinRaw) : null;
+    const nextMaxDate = nextMaxRaw ? dayjs(nextMaxRaw) : null;
+
+    setMinDate(nextMinDate?.isValid?.() ? nextMinDate : null);
+    setMaxDate(nextMaxDate?.isValid?.() ? nextMaxDate : null);
+
+    const fullTimeArr = Array.from({ length: 60 }, (_, i) => i);
+
+    const nextDisabledDate = (current: dayjs.Dayjs) => {
+      if (!dayjs.isDayjs(current)) return false;
+
+      const min = nextMinDate?.isValid?.() ? nextMinDate.startOf('day') : null;
+      const max = nextMaxDate?.isValid?.() ? nextMaxDate.endOf('day') : null;
+
+      if (min && current.startOf('day').isBefore(min)) {
+        return true;
+      }
+      if (max && current.startOf('day').isAfter(max)) {
+        return true;
+      }
+      return false;
+    };
+
+    const nextDisabledTime = (current: dayjs.Dayjs) => {
+      if (!current || (!nextMinDate?.isValid?.() && !nextMaxDate?.isValid?.())) {
+        return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [] };
+      }
+
+      const isCurrentMinDay = !!nextMinDate?.isValid?.() && current.isSame(nextMinDate, 'day');
+      const isCurrentMaxDay = !!nextMaxDate?.isValid?.() && current.isSame(nextMaxDate, 'day');
+
+      const disabledHours = () => {
+        const hours = [];
+        if (isCurrentMinDay && nextMinDate) {
+          for (let hour = 0; hour < nextMinDate.hour(); hour++) {
+            hours.push(hour);
+          }
+        }
+        if (isCurrentMaxDay && nextMaxDate) {
+          for (let hour = nextMaxDate.hour() + 1; hour < 24; hour++) {
+            hours.push(hour);
+          }
+        }
+        return hours;
+      };
+
+      const disabledMinutes = (selectedHour: number) => {
+        if (isCurrentMinDay && nextMinDate && selectedHour === nextMinDate.hour()) {
+          return fullTimeArr.filter((minute) => minute < nextMinDate.minute());
+        }
+        if (isCurrentMaxDay && nextMaxDate && selectedHour === nextMaxDate.hour()) {
+          return fullTimeArr.filter((minute) => minute > nextMaxDate.minute());
+        }
+        return [];
+      };
+
+      const disabledSeconds = (selectedHour: number, selectedMinute: number) => {
+        if (
+          isCurrentMinDay &&
+          nextMinDate &&
+          selectedHour === nextMinDate.hour() &&
+          selectedMinute === nextMinDate.minute()
+        ) {
+          return fullTimeArr.filter((second) => second < nextMinDate.second());
+        }
+        if (
+          isCurrentMaxDay &&
+          nextMaxDate &&
+          selectedHour === nextMaxDate.hour() &&
+          selectedMinute === nextMaxDate.minute()
+        ) {
+          return fullTimeArr.filter((second) => second > nextMaxDate.second());
+        }
+        return [];
+      };
+
+      return {
+        disabledHours,
+        disabledMinutes,
+        disabledSeconds,
+      };
+    };
+
+    setDisabledDate(() => nextDisabledDate);
+    setDisabledTime(() => nextDisabledTime);
+  };
+
+  return {
+    minDate,
+    maxDate,
+    disabledDate,
+    disabledTime,
+  };
+}

package/src/flow/models/fields/JSEditableFieldModel.tsx

@@ -35,6 +35,10 @@ function JsEditableField() {
     ctx.setValue?.(v);
   };
 
+  if (ctx.readOnly) {
+    return <span>{String(value ?? '')}</span>;
+  }
+
   return (
     <Input
       {...ctx.model.props}
@@ -48,6 +52,23 @@ function JsEditableField() {
 ctx.render(<JsEditableField />);
 `;
 
+function getEffectivePattern(model?: JSEditableFieldModel) {
+  return (
+    model?.props?.pattern ??
+    (model?.context as { pattern?: string } | undefined)?.pattern ??
+    (model?.parent as { props?: { pattern?: string } } | undefined)?.props?.pattern
+  );
+}
+
+function isReadOnlyMode(model?: JSEditableFieldModel) {
+  return !!model?.props?.readOnly || getEffectivePattern(model) === 'readPretty';
+}
+
+function resolveScriptCode(codeParam?: string) {
+  const raw = codeParam ?? DEFAULT_CODE;
+  return typeof raw === 'string' ? raw.trim() : '';
+}
+
 const JSFormRuntime: React.FC<{
   model: JSEditableFieldModel;
   value?: any;
@@ -66,26 +87,27 @@ const JSFormRuntime: React.FC<{
   // 统一获取&裁剪脚本代码，直接依赖具体 code 字符串，避免顶层 stepParams 引用未变化导致不更新
   const codeParam = model.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
   const scriptCode = useMemo(() => {
-    const raw = codeParam ?? DEFAULT_CODE;
-    return typeof raw === 'string' ? raw.trim() : '';
+    return resolveScriptCode(codeParam);
   }, [codeParam]);
 
+  useEffect(() => {
+    if (!containerRef.current || !scriptCode) return;
+    model.scheduleApplyJsSettings();
+  }, [model, scriptCode]);
+
   useEffect(() => {
     if (!containerRef.current || !scriptCode) return;
     const event = new CustomEvent('js-field:value-change', { detail: value });
     containerRef.current.dispatchEvent(event);
   }, [value, scriptCode]);
 
-  // 无自定义 JS 时默认渲染 Input，保持可用性
+  if (readOnly && !scriptCode) {
+    return <span>{String(value ?? '')}</span>;
+  }
+
   if (!scriptCode) {
     return (
-      <Input
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        disabled={disabled}
-        readOnly={readOnly}
-        style={{ width: '100%' }}
-      />
+      <Input value={value} onChange={(e) => onChange?.(e.target.value)} disabled={disabled} style={{ width: '100%' }} />
     );
   }
 
@@ -100,14 +122,77 @@ const JSFormRuntime: React.FC<{
  */
 export class JSEditableFieldModel extends FieldModel {
   private _mountedOnce = false;
+  private _pendingJsSettingsApply = false;
+  private _lastAppliedJsSettings?: {
+    code: string;
+    disabled: boolean;
+    readOnly: boolean;
+    element: HTMLSpanElement | null;
+  };
+
+  scheduleApplyJsSettings() {
+    const codeParam = this.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
+    if (!resolveScriptCode(codeParam)) return;
+
+    if (this._pendingJsSettingsApply) {
+      return;
+    }
+
+    this._pendingJsSettingsApply = true;
+    queueMicrotask(() => {
+      this._pendingJsSettingsApply = false;
+
+      const nextCodeParam = this.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
+      const nextCode = resolveScriptCode(nextCodeParam);
+      const nextElement = this.context.ref?.current as HTMLSpanElement | null;
+      if (!nextCode || !nextElement) {
+        return;
+      }
+
+      const nextRun = {
+        code: nextCode,
+        disabled: !!this.props?.disabled,
+        readOnly: isReadOnlyMode(this),
+        element: nextElement,
+      };
+      const lastRun = this._lastAppliedJsSettings;
+      if (
+        lastRun &&
+        lastRun.code === nextRun.code &&
+        lastRun.disabled === nextRun.disabled &&
+        lastRun.readOnly === nextRun.readOnly &&
+        lastRun.element === nextRun.element
+      ) {
+        return;
+      }
+
+      this._lastAppliedJsSettings = nextRun;
+      void this.applyFlow('jsSettings');
+    });
+  }
+
+  useHooksBeforeRender() {
+    const codeParam = this.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
+    const scriptCode = resolveScriptCode(codeParam);
+    const disabled = this.props?.disabled;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (!scriptCode) return;
+      this.scheduleApplyJsSettings();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scriptCode, disabled]);
+  }
+
   render() {
+    const readOnly = isReadOnlyMode(this);
     return (
       <JSFormRuntime
         model={this as JSEditableFieldModel}
         value={this.props?.value}
         onChange={this.props?.onChange}
         disabled={this.props?.disabled}
-        readOnly={this.props?.readOnly}
+        readOnly={readOnly}
       />
     );
   }
@@ -128,13 +213,17 @@ export class JSEditableFieldModel extends FieldModel {
   }
 }
 
-JSEditableFieldModel.define({
+const jsEditableFieldModelMeta = {
   label: tExpr('JS field'),
-});
+  preserveOnPatternChange: true,
+};
+
+JSEditableFieldModel.define(jsEditableFieldModelMeta);
 
 JSEditableFieldModel.registerFlow({
   key: 'jsSettings',
   title: tExpr('JavaScript settings'),
+  manual: true,
   steps: {
     runJs: {
       title: tExpr('Write JavaScript'),
@@ -174,6 +263,10 @@ JSEditableFieldModel.registerFlow({
       },
       async handler(ctx, params) {
         const { code, version } = resolveRunJsParams(ctx, params);
+        if (!code?.trim()) {
+          return;
+        }
+
         ctx.onRefReady(ctx.ref, async (element) => {
           // 暴露容器与读写能力（使用动态 getter 绑定 ref.current，避免容器变更失效）
           ctx.defineProperty('element', {
@@ -201,7 +294,10 @@ JSEditableFieldModel.registerFlow({
           });
           ctx.defineProperty('namePath', { get: () => ctx.model.props?.name, cache: false });
           ctx.defineProperty('disabled', { get: () => !!ctx.model.props?.disabled, cache: false });
-          ctx.defineProperty('readOnly', { get: () => !!ctx.model.props?.readOnly, cache: false });
+          ctx.defineProperty('readOnly', {
+            get: () => isReadOnlyMode(ctx.model),
+            cache: false,
+          });
           const navigator = createSafeNavigator();
           await ctx.runjs(
             code,

package/src/flow/models/fields/__tests__/ClickableFieldModel.test.ts

@@ -0,0 +1,87 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { FlowEngine } from '@nocobase/flow-engine';
+import { ClickableFieldModel } from '../ClickableFieldModel';
+
+function createRolesFieldModel(sourceRecord: Record<string, any>) {
+  const engine = new FlowEngine();
+  engine.registerModels({ ClickableFieldModel });
+
+  const usersCollection = {
+    name: 'users',
+    filterTargetKey: 'id',
+  };
+  const rolesCollection = {
+    name: 'roles',
+    filterTargetKey: 'name',
+  };
+  const rolesField = {
+    name: 'roles',
+    target: 'roles',
+    targetKey: 'name',
+    type: 'belongsToMany',
+    interface: 'm2m',
+    collection: usersCollection,
+    targetCollection: rolesCollection,
+    isAssociationField: () => true,
+  };
+
+  const model = engine.createModel<ClickableFieldModel>({
+    use: ClickableFieldModel,
+    uid: `clickable-roles-${sourceRecord?.id ?? 'new'}`,
+  });
+  model.context.defineProperty('collectionField', { value: rolesField });
+  model.context.defineProperty('blockModel', { value: { collection: usersCollection } });
+  model.context.defineProperty('record', { value: sourceRecord });
+
+  const dispatchEvent = vi.spyOn(model, 'dispatchEvent').mockResolvedValue([]);
+  return { model, dispatchEvent };
+}
+
+describe('ClickableFieldModel', () => {
+  it('opens an association display value as a normal target record when source record has no id', () => {
+    const { model, dispatchEvent } = createRolesFieldModel({});
+    const event = { type: 'click' };
+
+    model.onClick(event, { name: 'admin', title: 'Admin' });
+
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      'click',
+      {
+        event,
+        filterByTk: 'admin',
+        collectionName: 'roles',
+        associationName: null,
+        sourceId: null,
+      },
+      { debounce: true },
+    );
+  });
+
+  it('keeps using the association resource when the source record has an id', () => {
+    const { model, dispatchEvent } = createRolesFieldModel({ id: 1 });
+    const event = { type: 'click' };
+
+    model.onClick(event, { name: 'admin', title: 'Admin' });
+
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      'click',
+      {
+        event,
+        filterByTk: 'admin',
+        collectionName: 'users',
+        associationName: 'users.roles',
+        sourceId: 1,
+      },
+      { debounce: true },
+    );
+  });
+});