@nocobase/client-v2 2.1.0-alpha.34 → 2.1.0-alpha.35

package/src/flow/models/blocks/form/__tests__/FormBlockModel.test.tsx

@@ -14,6 +14,11 @@ import { FlowEngine, FlowModel, SingleRecordResource } from '@nocobase/flow-engi
 // 直接从 models 聚合导入，避免局部文件相互引用顺序导致的循环依赖
 import { FormBlockContent, FormBlockModel, FormComponent } from '../../../..';
 import { Form } from 'antd';
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
 // -----------------------------
 // Helpers
 // -----------------------------
@@ -319,6 +324,31 @@ describe('FormBlockModel (form/formValues injection & server resolve anchors)',
     expect(flows.has('eventSettings')).toBe(true);
   });
 
+  it('replays linkage rules after the settings rerender tick', async () => {
+    vi.useFakeTimers();
+    const engine = new FlowEngine();
+    const TestFormModel = await createTestFormModelSubclass();
+    const model = new TestFormModel({ uid: 'form-linkage-save', flowEngine: engine } as any);
+    const applyFlow = vi.spyOn(model, 'applyFlow').mockResolvedValue(undefined as any);
+    const flow = model.getFlow('eventSettings') as any;
+    const afterParamsSave = flow?.steps?.linkageRules?.afterParamsSave;
+    const ctx: any = {
+      model,
+      form: {
+        getFieldsValue: vi.fn(() => ({ status: 'draft' })),
+      },
+    };
+
+    afterParamsSave(ctx);
+
+    expect(applyFlow).not.toHaveBeenCalled();
+    await vi.advanceTimersByTimeAsync(0);
+    expect(applyFlow).toHaveBeenCalledWith('eventSettings', {
+      changedValues: {},
+      allValues: { status: 'draft' },
+    });
+  });
+
   it('delegates layout/assignRules/linkageRules stepParams to grid model', async () => {
     const model = await setupFormModel();
     const engine = model.flowEngine as FlowEngine;

package/src/flow/models/blocks/form/__tests__/legacyDefaultValueMigration.test.ts

@@ -18,6 +18,7 @@ function createMockFieldModel(options: { uid: string; props?: Record<string, any
   const model: any = {
     uid: options.uid,
     props: { ...(options.props || {}) },
+    _options: { props: { ...(options.props || {}) } },
     stepParams: { ...(options.stepParams || {}) },
     emitter: { emit: vi.fn() },
     setProps(patch: any) {
@@ -124,7 +125,9 @@ describe('legacyDefaultValueMigration', () => {
 
     // field1: props.initialValue removed, stepParams cleared for initialValue
     expect(field1.props.initialValue).toBeUndefined();
+    expect(field1._options.props.initialValue).toBeUndefined();
     expect(field1.props.keep).toBe(true);
+    expect(field1._options.props.keep).toBe(true);
     expect(field1.stepParams.editItemSettings?.initialValue).toBeUndefined();
     expect(field1.stepParams.otherFlow?.s?.x).toBe(1);
     // field2: legacy flow cleared

package/src/flow/models/blocks/form/value-runtime/rules.ts

@@ -1508,16 +1508,21 @@ export class RuleEngine {
   private getRowTargetKey(baseCtx: any, rowPath: NamePath): string | string[] {
     let collection = this.getRootCollection() || this.getCollectionFromContext(baseCtx);
     let field: any;
+    let lastAssociationField: any;
     for (const seg of rowPath) {
       if (typeof seg === 'number') continue;
       if (typeof seg !== 'string' || !seg || !collection?.getField) break;
 
       field = collection?.getField?.(seg);
       if (!field?.isAssociationField?.()) break;
+      lastAssociationField = field;
       collection = field?.targetCollection;
     }
 
-    const raw = field?.targetCollection?.filterTargetKey ?? field?.targetCollection?.filterByTk ?? field?.targetKey;
+    const raw =
+      lastAssociationField?.targetCollection?.filterTargetKey ??
+      lastAssociationField?.targetCollection?.filterByTk ??
+      lastAssociationField?.targetKey;
     if (Array.isArray(raw)) {
       const keys = raw.filter((key): key is string => typeof key === 'string' && !!key);
       return keys.length ? keys : 'id';

package/src/flow/models/blocks/form/value-runtime/runtime.ts

@@ -394,16 +394,21 @@ export class FormValueRuntime {
   private getArrayItemTargetKey(arrayPath?: NamePath): string | string[] {
     let collection = this.model?.context?.collection;
     let field: any;
+    let lastAssociationField: any;
     for (const seg of arrayPath || []) {
       if (typeof seg === 'number') continue;
       if (typeof seg !== 'string' || !collection?.getField) break;
 
       field = collection?.getField?.(seg);
       if (!field?.isAssociationField?.()) break;
+      lastAssociationField = field;
       collection = field?.targetCollection;
     }
 
-    const raw = field?.targetCollection?.filterTargetKey ?? field?.targetCollection?.filterByTk ?? field?.targetKey;
+    const raw =
+      lastAssociationField?.targetCollection?.filterTargetKey ??
+      lastAssociationField?.targetCollection?.filterByTk ??
+      lastAssociationField?.targetKey;
     if (Array.isArray(raw)) {
       const keys = raw.filter((key): key is string => typeof key === 'string' && !!key);
       return keys.length ? keys : 'id';

package/src/flow/models/blocks/shared/legacyDefaultValueMigrationBase.ts

@@ -23,6 +23,11 @@ export interface LegacyClearer {
   (model: any): void;
 }
 
+export function hasPersistedAssignRulesValue(model: any, flowKey: string, stepKey: string): boolean {
+  const params = model?.getStepParams?.(flowKey, stepKey);
+  return !!params && Object.prototype.hasOwnProperty.call(params, 'value');
+}
+
 function getPropsInitialValue(model: any): any | undefined {
   if (!model) return undefined;
   const props = typeof model.getProps === 'function' ? model.getProps() : model.props;
@@ -70,15 +75,26 @@ function deleteStepParams(model: any, flowKey: string, stepKey: string) {
   model.emitter?.emit?.('onStepParamsChanged');
 }
 
+function deletePropsInitialValue(model: any) {
+  if (!model) return;
+
+  model.setProps?.({ initialValue: undefined });
+
+  if (model.props && Object.prototype.hasOwnProperty.call(model.props, 'initialValue')) {
+    delete model.props.initialValue;
+  }
+
+  const optionsProps = model._options?.props;
+  if (optionsProps && Object.prototype.hasOwnProperty.call(optionsProps, 'initialValue')) {
+    delete optionsProps.initialValue;
+  }
+}
+
 export function createLegacyClearer(flowKeys: string[]): LegacyClearer {
   return (model: any): void => {
     if (!model) return;
 
-    model.setProps?.({ initialValue: undefined });
-
-    if (model.props && Object.prototype.hasOwnProperty.call(model.props, 'initialValue')) {
-      delete model.props.initialValue;
-    }
+    deletePropsInitialValue(model);
 
     for (const flowKey of flowKeys) {
       deleteStepParams(model, flowKey, 'initialValue');

package/src/flow/models/blocks/table/TableBlockModel.tsx

@@ -932,12 +932,12 @@ const HighPerformanceTable = React.memo(
 
         return {
           onClick: async (event) => {
-            if (highlightedRowKey !== rowKey) {
-              defineClickedRowRecordVariable(model, record);
-              await model.dispatchEvent('rowClick', { record, rowIndex, event });
+            const selected = highlightedRowKey !== rowKey;
+            defineClickedRowRecordVariable(model, selected ? record : null);
+            try {
+              await model.dispatchEvent('rowClick', { record, rowIndex, event, selected });
+            } finally {
               removeClickedRowRecordVariable(model);
-            } else {
-              await model.dispatchEvent('rowClick', { record, rowIndex, event });
             }
           },
           rowIndex,
@@ -1072,7 +1072,12 @@ TableBlockModel.registerEvents({
 
       const model = ctx.model as TableBlockModel;
       const rowKey = getRowKey(ctx.inputArgs.record, model.collection.filterTargetKey);
-      if (model.props.highlightedRowKey !== rowKey) {
+      const selected = ctx.inputArgs.selected;
+      if (selected === true) {
+        model.highlightRow(ctx.inputArgs.record);
+      } else if (selected === false) {
+        model.clearHighlight();
+      } else if (model.props.highlightedRowKey !== rowKey) {
         model.highlightRow(ctx.inputArgs.record);
       } else {
         model.clearHighlight();

package/src/flow/models/blocks/table/TableColumnModel.tsx

@@ -449,6 +449,9 @@ TableColumnModel.registerFlow({
     quickEdit: {
       title: tExpr('Enable quick edit'),
       uiMode: { type: 'switch', key: 'editable' },
+      hideInSettings(ctx) {
+        return !!ctx.model.associationPathName;
+      },
       defaultParams(ctx) {
         if (ctx.model.collectionField.readonly || ctx.model.associationPathName) {
           return {
@@ -460,7 +463,7 @@ TableColumnModel.registerFlow({
         };
       },
       handler(ctx, params) {
-        ctx.model.setProps('editable', params.editable);
+        ctx.model.setProps('editable', ctx.model.associationPathName ? false : params.editable);
       },
     },
     model: {
@@ -535,10 +538,13 @@ TableColumnModel.registerFlow({
           fieldModel.setStepParams('fieldSettings', 'init', fieldSettingsInit);
           await fieldModel.dispatchEvent('beforeRender', undefined, { useCache: false });
         }
+        if (targetUse) {
+          ctx.model.setStepParams('tableColumnSettings', 'model', { use: targetUse });
+        }
         ctx.model.setProps(targetCollectionField.getComponentProps());
       },
       defaultParams: (ctx: any) => {
-        const titleField = ctx.model.context.collectionField.targetCollectionTitleFieldName;
+        const titleField = ctx.model?.context?.collectionField?.targetCollectionTitleFieldName;
         return {
           label: getSavedAssociationTitleField(ctx.model) || titleField,
         };

package/src/flow/models/blocks/table/TableSelectModel.tsx

@@ -12,45 +12,55 @@ import { castArray } from 'lodash';
 import { BlockSceneEnum } from '../../base/BlockModel';
 import { TableBlockModel } from './TableBlockModel';
 
+export function getAssociationSelectForeignKeyFilter(collectionField: any) {
+  const isOToAny = ['oho', 'o2m'].includes(collectionField?.interface);
+  const foreignKey = collectionField?.foreignKey;
+  if (!isOToAny || !foreignKey) {
+    return null;
+  }
+  return {
+    [foreignKey]: {
+      $is: null,
+    },
+  };
+}
+
+export function getAssociationSelectAssociatedRecordsFilter(collection: any, associatedRecords: any[] = []) {
+  const targetKey = collection?.filterTargetKey || 'id';
+  const filterKeys = associatedRecords
+    .map((record) => record?.[targetKey])
+    .filter((value) => value !== undefined && value !== null && value !== '');
+
+  if (!filterKeys.length) {
+    return null;
+  }
+
+  return {
+    [`${targetKey}.$ne`]: filterKeys,
+  };
+}
+
 export class TableSelectModel extends TableBlockModel {
   static scene = BlockSceneEnum.select;
   rowSelectionProps: any = observable.deep({});
   onInit(options: any) {
     super.onInit(options);
     const collectionField = this.context.view.inputArgs.collectionField || {};
-    const isOToAny = ['oho', 'o2m'].includes(collectionField?.interface);
-    const sourceId = this.context.view.inputArgs.sourceId;
-    if (isOToAny) {
-      const foreignKey = collectionField.foreignKey;
+    const foreignKeyFilter = getAssociationSelectForeignKeyFilter(collectionField);
+    if (foreignKeyFilter) {
       const filterGroupKey = `${this.uid}-${collectionField.name}`;
-      if (foreignKey) {
-        if (sourceId != null) {
-          this.resource.addFilterGroup(filterGroupKey, {
-            $or: [{ [foreignKey]: { $is: null } }, { [foreignKey]: { $eq: sourceId } }],
-          });
-        } else {
-          this.resource.addFilterGroup(filterGroupKey, {
-            [foreignKey]: {
-              $is: null,
-            },
-          });
-        }
-      }
+      this.resource.addFilterGroup(filterGroupKey, foreignKeyFilter);
     }
 
     Object.assign(this.rowSelectionProps, this.context.view.inputArgs.rowSelectionProps || {});
 
     const getSelectedRows = this.rowSelectionProps?.defaultSelectedRows;
     const selectData = typeof getSelectedRows === 'function' ? getSelectedRows() : getSelectedRows;
-    const data = (selectData && castArray(selectData)) || [];
-    const filterKeys = data
-      .map((v) => {
-        return v[this.collection.filterTargetKey];
-      })
-      .filter(Boolean);
-    this.resource.addFilterGroup(`${this.uid}-select`, {
-      [`${this.collection.filterTargetKey}.$ne`]: filterKeys,
-    });
+    const data = [...castArray(selectData || []), ...castArray(this.context.view.inputArgs.associatedRecords || [])];
+    const associatedRecordsFilter = getAssociationSelectAssociatedRecordsFilter(this.collection, data);
+    if (associatedRecordsFilter) {
+      this.resource.addFilterGroup(`${this.uid}-select`, associatedRecordsFilter);
+    }
   }
 }
 

package/src/flow/models/blocks/table/__tests__/TableBlockModel.rowClick.test.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+import '@nocobase/client';
+import { TableBlockModel } from '../TableBlockModel';
+
+function createTableModel() {
+  const engine = new FlowEngine();
+  engine.registerModels({ TableBlockModel });
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number' },
+      { name: 'title', type: 'string', interface: 'input' },
+    ],
+  });
+
+  return engine.createModel<TableBlockModel>({
+    uid: 'posts-table',
+    use: 'TableBlockModel',
+    stepParams: {
+      resourceSettings: {
+        init: {
+          dataSourceKey: 'main',
+          collectionName: 'posts',
+        },
+      },
+    },
+  });
+}
+
+describe('TableBlockModel rowClick event', () => {
+  it('highlights the clicked row when selected is true', async () => {
+    const model = createTableModel();
+    const record = { id: 1, title: 'first post' };
+    const rowClick = model.getEvent('rowClick');
+
+    await rowClick?.handler({ model, inputArgs: { record, selected: true } } as any, {
+      condition: { logic: '$and', items: [] },
+    });
+
+    expect(model.props.highlightedRowKey).toBe(1);
+  });
+
+  it('clears the highlighted row when selected is false', async () => {
+    const model = createTableModel();
+    const record = { id: 1, title: 'first post' };
+    const rowClick = model.getEvent('rowClick');
+
+    model.highlightRow(record);
+
+    await rowClick?.handler({ model, inputArgs: { record, selected: false } } as any, {
+      condition: { logic: '$and', items: [] },
+    });
+
+    expect(model.props.highlightedRowKey).toBeNull();
+  });
+});

package/src/flow/models/blocks/table/__tests__/TableColumnModel.test.tsx

@@ -8,10 +8,46 @@
  */
 
 import { FlowEngine } from '@nocobase/flow-engine';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { TableColumnModel } from '../TableColumnModel';
 
 describe('TableColumnModel sorter settings', () => {
+  it('hides quick edit setting for relation path columns added from association groups', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-relation-path-quick-edit', flowEngine: engine } as any);
+    const quickEditStep = model.getFlow('tableColumnSettings')?.steps?.quickEdit as any;
+
+    const hidden = await quickEditStep.hideInSettings({
+      model: {
+        associationPathName: 'department',
+      },
+    });
+
+    expect(hidden).toBe(true);
+  });
+
+  it('keeps quick edit disabled for relation path columns even when params enable it', () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({
+      uid: 'table-column-relation-path-disable-quick-edit',
+      flowEngine: engine,
+    } as any);
+    const quickEditStep = model.getFlow('tableColumnSettings')?.steps?.quickEdit as any;
+    const setProps = vi.fn();
+
+    quickEditStep.handler(
+      {
+        model: {
+          associationPathName: 'department',
+          setProps,
+        },
+      },
+      { editable: true },
+    );
+
+    expect(setProps).toHaveBeenCalledWith('editable', false);
+  });
+
   it('hides sortable setting for association fields', async () => {
     const engine = new FlowEngine();
     const model = new TableColumnModel({ uid: 'table-column-association-sorter', flowEngine: engine } as any);
@@ -69,4 +105,99 @@ describe('TableColumnModel sorter settings', () => {
 
     expect(hidden).toBe(true);
   });
+
+  it('updates field component setting when association title field changes', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-title-field-component', flowEngine: engine } as any);
+    const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
+    const setStepParams = vi.fn();
+    const setProps = vi.fn();
+    const dispatchEvent = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({}),
+    };
+
+    await titleFieldStep.beforeParamsSave(
+      {
+        collectionField: {
+          isAssociationField: () => true,
+          targetCollection: {
+            name: 'departments',
+            getField: () => targetCollectionField,
+          },
+        },
+        model: {
+          collectionField: {
+            dataSourceKey: 'main',
+          },
+          constructor: {
+            getDefaultBindingByField: () => ({
+              modelName: 'DisplayTextFieldModel',
+            }),
+          },
+          subModels: {
+            field: {
+              use: 'DisplayTextFieldModel',
+              setStepParams,
+              dispatchEvent,
+            },
+          },
+          setStepParams,
+          setProps,
+        },
+      },
+      { label: 'code' },
+      { label: 'name' },
+    );
+
+    expect(setStepParams).toHaveBeenCalledWith('tableColumnSettings', 'model', { use: 'DisplayTextFieldModel' });
+  });
+
+  it('does not update field component setting when title field refresh fails', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-title-field-component-failed', flowEngine: engine } as any);
+    const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
+    const setStepParams = vi.fn();
+    const setProps = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({}),
+    };
+
+    await expect(
+      titleFieldStep.beforeParamsSave(
+        {
+          collectionField: {
+            isAssociationField: () => true,
+            targetCollection: {
+              name: 'departments',
+              getField: () => targetCollectionField,
+            },
+          },
+          model: {
+            collectionField: {
+              dataSourceKey: 'main',
+            },
+            constructor: {
+              getDefaultBindingByField: () => ({
+                modelName: 'DisplayTextFieldModel',
+              }),
+            },
+            subModels: {
+              field: {
+                use: 'DisplayTextFieldModel',
+                setStepParams: vi.fn(),
+                dispatchEvent: vi.fn().mockRejectedValue(new Error('beforeRender failed')),
+              },
+            },
+            setStepParams,
+            setProps,
+          },
+        },
+        { label: 'code' },
+        { label: 'name' },
+      ),
+    ).rejects.toThrow('beforeRender failed');
+
+    expect(setStepParams).not.toHaveBeenCalledWith('tableColumnSettings', 'model', expect.anything());
+  });
 });

package/src/flow/models/blocks/table/__tests__/TableSelectModel.test.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 } from 'vitest';
+import '@nocobase/client';
+import { getAssociationSelectAssociatedRecordsFilter, getAssociationSelectForeignKeyFilter } from '../TableSelectModel';
+
+describe('TableSelectModel', () => {
+  it('filters out already associated o2m records in association select table', () => {
+    expect(
+      getAssociationSelectForeignKeyFilter({
+        interface: 'o2m',
+        name: 'orders',
+        foreignKey: 'f_y2quq75zibi',
+      }),
+    ).toEqual({
+      f_y2quq75zibi: {
+        $is: null,
+      },
+    });
+  });
+
+  it('filters out already associated m2m records in association select table', () => {
+    expect(
+      getAssociationSelectAssociatedRecordsFilter(
+        {
+          filterTargetKey: 'id',
+        },
+        [{ id: 11 }, { id: 12 }],
+      ),
+    ).toEqual({
+      'id.$ne': [11, 12],
+    });
+  });
+});

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

@@ -14,6 +14,7 @@ import React from 'react';
 import { EllipsisWithTooltip } from '../../components/EllipsisWithTooltip';
 import { openViewFlow } from '../../flows/openViewFlow';
 import { FieldModel } from '../base/FieldModel';
+import { hasDisplayValue, normalizeDisplayValue } from '../utils/displayValueUtils';
 
 export function transformNestedData(inputData) {
   const resultArray = [];
@@ -150,11 +151,15 @@ export class ClickableFieldModel extends FieldModel {
 
   renderInDisplayStyle(value, record?, isToMany?, wrap?) {
     const { clickToOpen = false, displayStyle, titleField, overflowMode, disabled, ...restProps } = this.props;
-    if (value && typeof value === 'object' && restProps.target) {
+    const titleCollectionField = titleField
+      ? this.context.collectionField?.targetCollection?.getField?.(titleField) || this.context.collectionField
+      : this.context.collectionField;
+    const displayValue = normalizeDisplayValue(value, { collectionField: titleCollectionField });
+    if (!hasDisplayValue(displayValue) && value && typeof value === 'object' && restProps.target) {
       return;
     }
-    const result = this.renderComponent(value, wrap);
-    const display = record ? (value ? result : 'N/A') : result;
+    const result = this.renderComponent(displayValue, wrap);
+    const display = record ? (hasDisplayValue(displayValue) ? result : 'N/A') : result;
     const isTag = displayStyle === 'tag';
     const handleClick = (e) => {
       clickToOpen && this.onClick(e, record);
@@ -170,7 +175,7 @@ export class ClickableFieldModel extends FieldModel {
 
     if (isTag) {
       return (
-        value && (
+        hasDisplayValue(displayValue) && (
           <Tag {...restProps} style={commonStyle} onClick={handleClick} className={restProps.className}>
             {display}
           </Tag>

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

@@ -48,6 +48,13 @@ export class DisplayEnumFieldModel extends ClickableFieldModel {
     return value === null || value === undefined || value === '';
   }
 
+  private isEmptyEnumValue(value: any) {
+    if (Array.isArray(value)) {
+      return value.length === 0;
+    }
+    return this.isEmpty(value);
+  }
+
   public renderComponent(value) {
     const { options = [], dataSource } = this.props;
     const currentOptions = getCurrentOptions(value, dataSource || options, fieldNames);
@@ -61,6 +68,43 @@ export class DisplayEnumFieldModel extends ClickableFieldModel {
       </Tag>
     ));
   }
+
+  /**
+   * Keep array values for multipleSelect/checkboxGroup.
+   * ClickableFieldModel will normalize arrays to joined strings, which breaks option label mapping.
+   */
+  renderInDisplayStyle(value, record?, isToMany?, wrap?) {
+    const { clickToOpen = false, ...restProps } = this.props;
+    void wrap;
+
+    const result = this.renderComponent(value);
+    const display = record ? (this.isEmptyEnumValue(value) ? 'N/A' : result) : result;
+
+    const commonStyle = {
+      cursor: clickToOpen ? 'pointer' : 'default',
+      alignItems: 'center',
+      gap: 4,
+      display: isToMany && 'inline-block',
+    };
+
+    const handleClick = (e) => {
+      clickToOpen && this.onClick(e, record);
+    };
+
+    if (clickToOpen) {
+      return (
+        <a {...restProps} style={commonStyle} onClick={handleClick}>
+          {display}
+        </a>
+      );
+    }
+
+    return (
+      <span {...restProps} style={commonStyle} className={restProps.className}>
+        {display}
+      </span>
+    );
+  }
 }
 DisplayEnumFieldModel.define({
   label: tExpr('Select'),