@nocobase/client-v2 2.1.0-beta.43 → 2.1.0-beta.45

package/src/flow/models/blocks/filter-manager/flow-actions/customizeFilterRender.tsx

@@ -7,25 +7,13 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
 import { defineAction } from '@nocobase/flow-engine';
 import { FilterFormItemModel } from '../../filter-form/FilterFormItemModel';
-import { InputFieldModel } from '../../../fields/InputFieldModel';
-import { resolveOperatorComponent } from '../../../../internal/utils/operatorSchemaHelper';
-
-const KEYWORD_OPERATORS = new Set(['$in', '$notIn']);
-
-function isOperatorSupported(model: FilterFormItemModel, operator: string) {
-  const ops = model.collectionField?.filterable?.operators || [];
-  return ops.some((op) => op.value === operator);
-}
-
-// 重新包裹 render，确保仍由 flow-engine 的响应式包装驱动
-function rewrapReactiveRender(fieldModel: any) {
-  if (!fieldModel) return;
-  fieldModel._reactiveWrapperCache = undefined;
-  fieldModel.setupReactiveRender?.();
-}
+import {
+  applyOperatorComponentRender,
+  restoreOperatorComponentRender,
+} from '../../../../internal/utils/operatorSchemaHelper';
+import { getFilterFormOperatorList } from '../utils';
 
 function applyCustomizeFilterRender(model: FilterFormItemModel) {
   const operator = model.operator;
@@ -37,37 +25,19 @@ function applyCustomizeFilterRender(model: FilterFormItemModel) {
     key: `${model.uid}-${operator || ''}`,
   });
 
-  // 非关键词操作符，恢复原始渲染
-  if (!KEYWORD_OPERATORS.has(operator)) {
-    const originalRender = fieldModel['__originalRender'];
-    if (typeof originalRender === 'function') {
-      // 清理缓存，防止沿用上一轮的 reactive wrapper
-      (fieldModel as any)._reactiveWrapperCache = undefined;
-      fieldModel.render = originalRender;
-    }
+  if (!operator) {
+    restoreOperatorComponentRender(fieldModel);
     return;
   }
 
-  if (!(fieldModel instanceof InputFieldModel)) return;
-  if (!isOperatorSupported(model, operator)) return;
-
-  const resolved = resolveOperatorComponent(
-    model.context.app,
+  const operatorList = getFilterFormOperatorList(model);
+  applyOperatorComponentRender({
+    app: model.context.app,
+    fieldModel,
     operator,
-    model.collectionField?.filterable?.operators || [],
-  );
-  if (!resolved) return;
-  const { Comp, props: xProps } = resolved;
-
-  // 缓存一次原始 render/props，用于回退
-  if (!fieldModel['__originalRender']) {
-    fieldModel['__originalRender'] = fieldModel.render;
-  }
-
-  fieldModel.render = () => (
-    <Comp {...xProps} {...fieldModel.props} onCompositionStart={null} onCompositionEnd={null} />
-  );
-  rewrapReactiveRender(fieldModel);
+    operators: operatorList,
+    propsPriority: 'field',
+  });
 }
 
 export const customizeFilterRender = defineAction<FilterFormItemModel>({

package/src/flow/models/blocks/filter-manager/flow-actions/defaultOperator.tsx

@@ -8,8 +8,8 @@
  */
 
 import { defineAction, tExpr, FlowModel } from '@nocobase/flow-engine';
-import { operators } from '../../../../../flow-compat';
 import { FilterFormFieldModel } from '../../filter-form/fields';
+import { getFilterFormOperatorList } from '../utils';
 
 export const defaultOperator: any = defineAction<FilterFormFieldModel>({
   name: 'defaultOperator',
@@ -37,12 +37,10 @@ export const defaultOperator: any = defineAction<FilterFormFieldModel>({
 
 function getOperatorOptions(model: FlowModel) {
   const meta = model.context.collectionField || model.context.filterField;
-  const operatorList =
-    model.context.collectionField?.filterable?.operators || operators[model.context.filterField.type];
-  return (operatorList || [])
+  return getFilterFormOperatorList(model)
     .filter((op) => !op.visible || op.visible(meta))
     .map((op) => ({
       ...op,
-      label: model.translate(op.label),
+      label: typeof op.label === 'string' ? model.translate(op.label) : op.label,
     }));
 }

package/src/flow/models/blocks/filter-manager/flow-actions/operatorComponentProps.tsx

@@ -9,20 +9,10 @@
 
 import { defineAction } from '@nocobase/flow-engine';
 import { FilterFormItemModel } from '../../filter-form/FilterFormItemModel';
-
-function getOperatorMeta(model: FilterFormItemModel) {
-  const ops = model.collectionField?.filterable?.operators || [];
-  if (!ops.length) {
-    return null;
-  }
-  if (!model.operator) {
-    return null;
-  }
-  return ops.find((op) => op.value === model.operator) || null;
-}
+import { getFilterFormOperatorMeta } from '../utils';
 
 function applyOperatorComponentProps(model: FilterFormItemModel) {
-  const meta = getOperatorMeta(model);
+  const meta = getFilterFormOperatorMeta(model, model.operator);
   if (!meta) {
     return;
   }

package/src/flow/models/blocks/filter-manager/utils.ts

@@ -8,14 +8,153 @@
  */
 
 import { FlowModel } from '@nocobase/flow-engine';
+import {
+  normalizeFilterableOperators,
+  type FieldFilterable,
+  type FieldFilterOperator,
+} from '../../../../collection-manager/filter-operators';
+import { operators } from '../../../../flow-compat';
 import { BlockGridModel, CollectionBlockModel } from '../../base';
 
-export function getDefaultOperator(model: any) {
+type FilterFormFieldMeta = {
+  filterable?: FieldFilterable<unknown> | false;
+  interface?: string;
+  type?: string;
+};
+
+type FilterFormOperatorModel = FlowModel & {
+  operator?: string;
+  collectionField?: FilterFormFieldMeta;
+  filterField?: FilterFormFieldMeta;
+  subModels?: {
+    field?: {
+      operator?: string;
+    };
+  };
+  getStepParams?: (flowKey: string, stepKey: string) => { value?: string } | undefined;
+};
+
+function getModelContext(model: FlowModel) {
+  return model.context as unknown as Record<string, unknown>;
+}
+
+function getModelField(model: FlowModel, key: 'collectionField' | 'filterField') {
+  const modelWithFields = model as FilterFormOperatorModel;
+  const field = modelWithFields[key] || getModelContext(model)?.[key];
+  return field && typeof field === 'object' ? (field as FilterFormFieldMeta) : undefined;
+}
+
+function getDataSourceManager(model: FlowModel) {
+  const contextManager = getModelContext(model)?.dataSourceManager;
+  if (contextManager) {
+    return contextManager as Record<string, unknown>;
+  }
+  return model.flowEngine?.context?.dataSourceManager as unknown as Record<string, unknown> | undefined;
+}
+
+function cloneFilterable(filterable: FieldFilterable<unknown>): FieldFilterable<unknown> {
+  return {
+    operatorGroup: filterable.operatorGroup,
+    operators: Array.isArray(filterable.operators) ? [...filterable.operators] : filterable.operators,
+    operatorOverrides: Array.isArray(filterable.operatorOverrides)
+      ? [...filterable.operatorOverrides]
+      : filterable.operatorOverrides,
+  };
+}
+
+function getFilterableOperators(filterable?: FieldFilterable<unknown> | false) {
+  if (filterable === false) {
+    return [];
+  }
+
+  if (!filterable || typeof filterable !== 'object') {
+    return;
+  }
+
+  const normalized = normalizeFilterableOperators(cloneFilterable(filterable));
+  if (Array.isArray(normalized?.operators) && normalized.operators.length > 0) {
+    return normalized.operators;
+  }
+
+  if (Array.isArray(normalized?.operatorOverrides) && normalized.operatorOverrides.length > 0) {
+    return normalized.operatorOverrides;
+  }
+}
+
+function getFieldInterfaceFilterable(model: FlowModel, field?: FilterFormFieldMeta) {
+  const interfaceName = typeof field?.interface === 'string' ? field.interface : undefined;
+  if (!interfaceName) {
+    return;
+  }
+
+  const dataSourceManager = getDataSourceManager(model);
+  const fieldInterfaceManager = dataSourceManager?.collectionFieldInterfaceManager as
+    | {
+        getFieldInterface?: (name: string) => { filterable?: FieldFilterable<unknown> | false } | undefined;
+      }
+    | undefined;
+  const fieldInterface = fieldInterfaceManager?.getFieldInterface?.(interfaceName);
+  return fieldInterface?.filterable;
+}
+
+function getFallbackOperators(field?: FilterFormFieldMeta) {
+  const fallbackKeys = [field?.interface, field?.type].filter((item): item is string => typeof item === 'string');
+  const standardOperators = operators as Record<string, FieldFilterOperator<unknown>[] | undefined>;
+  for (const key of fallbackKeys) {
+    const operatorList = standardOperators[key];
+    if (operatorList?.length) {
+      return operatorList;
+    }
+  }
+  return [];
+}
+
+export function getFilterFormOperatorList(model: FlowModel) {
+  const collectionField = getModelField(model, 'collectionField');
+  const filterField = getModelField(model, 'filterField');
+  const field = collectionField || filterField;
+
+  if (field?.filterable === false) {
+    return [];
+  }
+
+  const fieldOperators = getFilterableOperators(field?.filterable);
+  if (fieldOperators?.length) {
+    return fieldOperators;
+  }
+
+  const fieldInterfaceFilterable = getFieldInterfaceFilterable(model, field);
+  if (fieldInterfaceFilterable === false) {
+    return [];
+  }
+
+  const fieldInterfaceOperators = getFilterableOperators(fieldInterfaceFilterable);
+  if (fieldInterfaceOperators?.length) {
+    return fieldInterfaceOperators;
+  }
+
+  return getFallbackOperators(field);
+}
+
+export function getFilterFormOperatorMeta(model: FlowModel, operator = getDefaultOperator(model)) {
+  if (!operator) {
+    return null;
+  }
+
+  const meta = getModelField(model, 'collectionField') || getModelField(model, 'filterField');
+  return (
+    getFilterFormOperatorList(model).find((op) => op.value === operator && (!op.visible || op.visible(meta))) || null
+  );
+}
+
+export function getDefaultOperator(model: FilterFormOperatorModel) {
+  const operatorList = getFilterFormOperatorList(model);
   return (
     model.operator ||
-    model.getStepParams('filterFormItemSettings', 'defaultOperator')?.value ||
-    model.subModels.field?.operator ||
-    model.collectionField?.filterable?.operators?.[0]?.value ||
+    model.getStepParams?.('filterFormItemSettings', 'defaultOperator')?.value ||
+    model.subModels?.field?.operator ||
+    operatorList.find((op) => op.selected)?.value ||
+    operatorList[0]?.value ||
     '$includes'
   );
 }

package/src/flow/models/blocks/form/FormAssociationItemModel.tsx

@@ -22,6 +22,8 @@ import { FieldModel } from '../../base/FieldModel';
 import { rebuildFieldSubModel } from '../../../internal/utils/rebuildFieldSubModel';
 import { useJsonTemplateResolver } from '../../../utils/useJsonTemplateResolver';
 
+const MAX_FORM_ASSOCIATION_FIELD_DEPTH = 2;
+
 function mergeArrays(a, b) {
   if (!b) {
     return a;
@@ -84,10 +86,17 @@ const AssociationItem = (props) => {
 export class FormAssociationItemModel extends DisplayItemModel {
   static defineChildren(ctx: FlowModelContext) {
     const collection = ctx.collection as Collection;
+    const associationDepth = ctx.prefixFieldPath ? ctx.prefixFieldPath.split('.').filter(Boolean).length : 0;
 
     return collection
       .getFields()
       .map((field) => {
+        if (
+          associationDepth >= MAX_FORM_ASSOCIATION_FIELD_DEPTH &&
+          (field.isAssociationField?.() || field.target || field.targetCollection)
+        ) {
+          return null;
+        }
         const binding = this.getDefaultBindingByField(ctx, field, { fallbackToTargetTitleField: true });
         if (!binding) return null;
         const fieldModel = binding.modelName;

package/src/flow/models/blocks/form/FormItemModel.tsx

@@ -42,12 +42,21 @@ const interfacesOfUnsupportedDefaultValue = [
   'formula',
 ];
 
+const MAX_FORM_ASSOCIATION_FIELD_DEPTH = 2;
+
 export class FormItemModel<T extends DefaultStructure = DefaultStructure> extends EditableItemModel<T> {
   static defineChildren(ctx: FlowModelContext) {
     const collection = ctx.collection as Collection;
+    const associationDepth = ctx.prefixFieldPath ? ctx.prefixFieldPath.split('.').filter(Boolean).length : 0;
     return collection
       .getFields()
       .map((field) => {
+        if (
+          associationDepth >= MAX_FORM_ASSOCIATION_FIELD_DEPTH &&
+          (field.isAssociationField?.() || field.target || field.targetCollection)
+        ) {
+          return;
+        }
         const binding = this.getDefaultBindingByField(ctx, field);
         if (!binding) {
           return;

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

@@ -221,6 +221,23 @@ describe('FlowModel core behaviors (collected)', () => {
     expect(i1).toEqual({ ping: 1 });
   });
 
+  it('unchanged stepParams do not trigger a beforeRender rerun', async () => {
+    vi.useFakeTimers();
+    const spy = vi.fn().mockResolvedValue([]);
+    (engine as any).executor.dispatchEvent = spy;
+    const model = engine.createModel<FlowModel>({
+      use: 'FlowModel',
+      uid: 'm-flow-3-noop',
+      stepParams: { anyFlow: { anyStep: { x: 1 } } },
+    });
+
+    await model.dispatchEvent('beforeRender', { ping: 1 });
+    model.setStepParams('anyFlow', 'anyStep', { x: 1 });
+    await vi.advanceTimersByTimeAsync(150);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
   it('applyFlow delegates to executor.runFlow', async () => {
     const spyRun = vi.fn().mockResolvedValue('ok');
     (engine as any).executor.runFlow = spyRun;

package/src/flow/models/blocks/form/__tests__/FormItemModel.defineChildren.test.ts

@@ -12,7 +12,7 @@ import { FlowEngine, type FlowModelContext, type SubModelItem } from '@nocobase/
 // Import from the aggregate to preserve the model initialization order used by adjacent tests.
 import { FormItemModel, FormJSFieldItemModel, InputFieldModel, JSEditableFieldModel } from '../../../..';
 
-function createFormMenuContext(prefixFieldPath = 'roles') {
+function createFormMenuContext(prefixFieldPath = 'roles', collectionName = 'roles') {
   const engine = new FlowEngine();
   engine.registerModels({
     FormItemModel,
@@ -36,15 +36,29 @@ function createFormMenuContext(prefixFieldPath = 'roles') {
     fields: [
       { name: 'id', type: 'integer', interface: 'number', title: 'ID' },
       { name: 'name', type: 'string', interface: 'input', title: 'Name' },
+      { name: 'department', type: 'belongsTo', interface: 'm2o', target: 'departments', title: 'Department' },
     ],
   });
+  dataSource.addCollection({
+    name: 'departments',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'name', type: 'string', interface: 'input', title: 'Name' },
+      { name: 'company', type: 'belongsTo', interface: 'm2o', target: 'companies', title: 'Company' },
+    ],
+  });
+  dataSource.addCollection({
+    name: 'companies',
+    filterTargetKey: 'id',
+    fields: [{ name: 'name', type: 'string', interface: 'input', title: 'Name' }],
+  });
 
   const blockModel = engine.createModel({ use: 'FlowModel', uid: 'users-form-block' });
   (blockModel as any).collection = dataSource.getCollection('users');
 
   const gridModel = engine.createModel({ use: 'FlowModel', uid: 'users-form-grid' });
   gridModel.context.defineProperty('blockModel', { value: blockModel });
-  gridModel.context.defineProperty('collection', { value: dataSource.getCollection('roles') });
+  gridModel.context.defineProperty('collection', { value: dataSource.getCollection(collectionName) });
   gridModel.context.defineProperty('prefixFieldPath', { value: prefixFieldPath });
 
   return gridModel.context as FlowModelContext;
@@ -105,4 +119,15 @@ describe('FormItemModel defineChildren', () => {
 
     expect((jsNameItem?.toggleable as (model: any) => boolean)(createModelLike(normalCreateOptions))).toBe(true);
   });
+
+  it('hides association fields after two association levels in form add-field menus', async () => {
+    const ctx = createFormMenuContext('roles.department', 'departments');
+    const formItems = FormItemModel.defineChildren(ctx) as SubModelItem[];
+    const jsItems = (await FormJSFieldItemModel.defineChildren(ctx)) as SubModelItem[];
+
+    expect(formItems.map((item) => item.key)).toContain('roles.department.name');
+    expect(formItems.map((item) => item.key)).not.toContain('roles.department.company');
+    expect(jsItems.map((item) => item.key)).toContain('roles.department.name');
+    expect(jsItems.map((item) => item.key)).not.toContain('roles.department.company');
+  });
 });

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

@@ -15,6 +15,7 @@ import { observable } from '@formily/reactive';
 import { get as lodashGet, merge as lodashMerge, set as lodashSet } from 'lodash';
 import { FlowContext, JSRunner } from '@nocobase/flow-engine';
 import { FormValueRuntime } from '..';
+import type { FormInstance } from 'antd';
 
 function createFormStub(initialValues: any = {}) {
   const store: any = JSON.parse(JSON.stringify(initialValues || {}));
@@ -121,6 +122,34 @@ function createFieldContext(runtime: FormValueRuntime) {
 }
 
 describe('FormValueRuntime (default rules)', () => {
+  it('skips object patches when values are unchanged', async () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({ name: 'old' });
+    const dispatchEvent = vi.fn();
+
+    const blockModel = {
+      uid: 'form-noop-patch',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent,
+      getAclActionName: () => 'create',
+    } as ConstructorParameters<typeof FormValueRuntime>[0]['model'];
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as unknown as FormInstance });
+    runtime.mount({ sync: true });
+
+    const blockCtx = createFieldContext(runtime);
+    await runtime.setFormValues(blockCtx, { name: 'old' }, { source: 'system' });
+
+    expect(dispatchEvent).not.toHaveBeenCalled();
+
+    await runtime.setFormValues(blockCtx, { name: 'new' }, { source: 'system' });
+
+    expect(formStub.getFieldValue(['name'])).toBe('new');
+    expect(dispatchEvent).toHaveBeenCalledTimes(1);
+  });
+
   it('recomputes default on dependency change when current equals last default; user change disables default permanently', async () => {
     const engineEmitter = new EventEmitter();
     const blockEmitter = new EventEmitter();

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

@@ -846,7 +846,11 @@ export class FormValueRuntime {
       const changedPaths: NamePath[] = [];
 
       if (!Array.isArray(patch)) {
-        const patchEntries = Object.entries(patch || {}).filter(([pathKey]) => !shouldSkipByLinkageScope(pathKey));
+        const patchEntries = Object.entries(patch || {}).filter(([pathKey, rawValue]) => {
+          if (shouldSkipByLinkageScope(pathKey)) return false;
+          const value = isObservable(rawValue) ? toJS(rawValue) : rawValue;
+          return !_.isEqual(this.getFormValueAtPath([pathKey]), value);
+        });
         const patchToApply = Object.fromEntries(patchEntries);
         const patchKeys = patchEntries.map(([pathKey]) => pathKey);
         if (!patchKeys.length) {

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

@@ -47,7 +47,7 @@ export function FieldDeletePlaceholder(props: any) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, name, t]);
   const content = t(`The {{type}} "{{name}}" may have been deleted. Please remove this {{blockType}}.`, {
     type: t('Field'),
     name: nameValue,
@@ -71,7 +71,7 @@ function FieldWithoutPermissionPlaceholder() {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, name, t]);
   const { actionName } = model.forbidden;
   const messageValue = useMemo(() => {
     return t(
@@ -81,7 +81,7 @@ function FieldWithoutPermissionPlaceholder() {
         actionName: t(capitalize(actionName)),
       },
     ).replaceAll('>', '>');
-  }, [nameValue, t]);
+  }, [actionName, nameValue, t]);
   return (
     <Tooltip title={messageValue}>
       <LockOutlined style={{ opacity: '0.3' }} />
@@ -89,6 +89,15 @@ function FieldWithoutPermissionPlaceholder() {
   );
 }
 
+export const TABLE_COLUMN_MIN_WIDTH = 10;
+
+export function normalizeTableColumnWidth(width: number | null | undefined) {
+  if (typeof width === 'number' && width < TABLE_COLUMN_MIN_WIDTH) {
+    return TABLE_COLUMN_MIN_WIDTH;
+  }
+  return width;
+}
+
 export const CustomWidth = ({ setOpen, t, handleChange, defaultValue }) => {
   const [customWidth, setCustomWidth] = useState(defaultValue);
   return (
@@ -104,13 +113,14 @@ export const CustomWidth = ({ setOpen, t, handleChange, defaultValue }) => {
       <Space.Compact block>
         <InputNumber
           placeholder={t('Custom column width')}
+          min={TABLE_COLUMN_MIN_WIDTH}
           value={customWidth}
           onChange={(val) => {
             setCustomWidth(val);
           }}
           style={{ width: '100%', minWidth: 200 }}
         />
-        <Button type="primary" onClick={() => handleChange(customWidth)}>
+        <Button type="primary" onClick={() => handleChange(normalizeTableColumnWidth(customWidth))}>
           OK
         </Button>
       </Space.Compact>
@@ -442,7 +452,7 @@ TableColumnModel.registerFlow({
         width: 150,
       },
       handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
+        ctx.model.setProps('width', normalizeTableColumnWidth(params.width));
       },
     },
     aclCheck: {

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

@@ -10,7 +10,7 @@
 import { tExpr, FlowModel, ModelRenderMode } from '@nocobase/flow-engine';
 import { Divider } from 'antd';
 import React from 'react';
-import { CustomWidth } from './TableColumnModel';
+import { CustomWidth, normalizeTableColumnWidth } from './TableColumnModel';
 export class TableCustomColumnModel extends FlowModel {
   static renderMode: ModelRenderMode = ModelRenderMode.RenderFunction;
 }
@@ -100,7 +100,7 @@ TableCustomColumnModel.registerFlow({
         width: 150,
       },
       handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
+        ctx.model.setProps('width', normalizeTableColumnWidth(params.width));
       },
     },
     fixed: {

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

@@ -12,6 +12,24 @@ import { describe, expect, it, vi } from 'vitest';
 import { TableColumnModel } from '../TableColumnModel';
 
 describe('TableColumnModel sorter settings', () => {
+  it('clamps custom column width to the minimum value', () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-min-width', flowEngine: engine } as any);
+    const widthStep = model.getFlow('tableColumnSettings')?.steps?.width as any;
+    const setProps = vi.fn();
+
+    widthStep.handler(
+      {
+        model: {
+          setProps,
+        },
+      },
+      { width: 0 },
+    );
+
+    expect(setProps).toHaveBeenCalledWith('width', 10);
+  });
+
   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);

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -33,7 +33,7 @@ import React, { useRef, useMemo, useEffect } from 'react';
 import { SubTableFieldModel } from '.';
 import { FieldModel } from '../../../base/FieldModel';
 import { DetailsItemModel } from '../../../blocks/details/DetailsItemModel';
-import { FieldDeletePlaceholder, CustomWidth } from '../../../blocks/table/TableColumnModel';
+import { FieldDeletePlaceholder, CustomWidth, normalizeTableColumnWidth } from '../../../blocks/table/TableColumnModel';
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
 import { getSubTableRowIdentity } from './rowIdentity';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
@@ -67,7 +67,7 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, name, t]);
   const { actionName } = fieldModel.forbidden || {};
   const messageValue = useMemo(() => {
     return t(
@@ -77,7 +77,7 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
         actionName: t(capitalize(actionName)),
       },
     ).replaceAll('>', '>');
-  }, [nameValue, t]);
+  }, [actionName, nameValue, t]);
   return (
     <Tooltip title={messageValue}>
       <LockOutlined style={{ opacity: '0.3' }} />
@@ -100,10 +100,9 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
     const handleChange = useMemo(
       () =>
         debounce((val) => {
-          if (props.onChange) props.onChange(val);
           if (onChange) onChange(val);
         }, 200),
-      [props.onChange, onChange],
+      [onChange],
     );
 
     return <FieldModelRenderer model={model} {...rest} onChange={handleChange} />;
@@ -149,7 +148,7 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
         </Space>
       );
     }
-  }, [collectionField.interface, defaultValue, fieldModel]);
+  }, [collectionField.interface, defaultValue, disabled, fieldModel]);
   return (
     <div
       ref={ref}
@@ -830,7 +829,7 @@ SubTableColumnModel.registerFlow({
         width: 200,
       },
       handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
+        ctx.model.setProps('width', normalizeTableColumnWidth(params.width));
       },
     },
     aclCheck: {