@nocobase/client-v2 2.2.0-beta.2 → 2.2.0-beta.5

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

@@ -26,6 +26,7 @@ import {
   observer,
   FlowModelProvider,
   FlowErrorFallback,
+  extractUsedVariablePaths,
 } from '@nocobase/flow-engine';
 import { TableColumnProps, Tooltip, Input, Space, Divider } from 'antd';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -37,6 +38,14 @@ import { FieldDeletePlaceholder, CustomWidth, normalizeTableColumnWidth } from '
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
 import { getSubTableRowIdentity } from './rowIdentity';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
+import {
+  buildCurrentItemTitle,
+  createAssociationItemChainContextPropertyOptions,
+  createItemChainGetter,
+  createParentItemAccessorsFromContext,
+  createRootItemChain,
+  type ItemChain,
+} from '../itemChain';
 
 export const SUB_TABLE_COLUMN_FIELD_COMPONENT_CONTEXT = 'subTableColumn';
 
@@ -180,6 +189,25 @@ const handleModelName = (modelName) => {
   return modelName;
 };
 
+const DATA_SCOPE_FLOW_KEYS = ['selectSettings', 'cascadeSelectSettings'];
+
+function hasFormValueDrivenDataScope(filter: any) {
+  if (!filter) return false;
+  try {
+    const usage = extractUsedVariablePaths(filter) || {};
+    return ['item', 'formValues'].some((name) => Object.prototype.hasOwnProperty.call(usage, name));
+  } catch {
+    return false;
+  }
+}
+
+function hasFormValueDrivenDataScopeField(fieldModel: any) {
+  return DATA_SCOPE_FLOW_KEYS.some((flowKey) => {
+    const params = fieldModel?.getStepParams?.(flowKey, 'dataScope');
+    return hasFormValueDrivenDataScope(params?.filter);
+  });
+}
+
 const MemoFieldRenderer = React.memo(FieldModelRenderer, (prev, next) => {
   return prev.value === next.value && prev.model === next.model;
 });
@@ -203,6 +231,20 @@ export function getLatestSubTableRowRecord(form: any, fieldIndex: unknown, fallb
   return typeof latestRecord === 'undefined' ? fallbackRecord : latestRecord;
 }
 
+export function buildSubTableColumnNamePath(
+  fieldPath: Array<string | number>,
+  rowIdx: number,
+  namePath: string | number,
+  rowFieldIndex: unknown,
+): Array<string | number> {
+  const currentRowPath = buildRowPathFromFieldIndex(rowFieldIndex);
+  if (currentRowPath?.length) {
+    return [...currentRowPath, namePath];
+  }
+
+  return [...fieldPath, rowIdx, namePath];
+}
+
 function shouldCommitImmediately(value: any) {
   if (Array.isArray(value)) {
     return true;
@@ -344,11 +386,23 @@ const MemoCell: React.FC<CellProps> = React.memo(
         {parent.mapSubModels('field', (action: FieldModel) => {
           const fieldPath = action.context.fieldPath.split('.');
           const namePath = fieldPath.pop();
+          if (typeof namePath === 'undefined') {
+            return null;
+          }
+          const fieldNamePath = buildSubTableColumnNamePath(fieldPath, rowIdx, namePath, rowFork?.context?.fieldIndex);
+          const formItemName = buildDynamicNamePath([...fieldPath, rowIdx, namePath], parentFieldIndex);
 
           const fork: any = action.createFork({}, `${id}`);
           fork.context.defineProperty('currentObject', { get: () => record });
+          fork.context.defineProperty('fieldPathArray', {
+            get: () => fieldNamePath,
+            cache: false,
+          });
           if (rowFork) {
+            const itemOptions = rowFork.context.getPropertyOptions?.('item');
+            const { value: _value, ...itemOptionsWithoutValue } = (itemOptions || {}) as any;
             fork.context.defineProperty('item', {
+              ...itemOptionsWithoutValue,
               get: () => rowFork.context.item,
               cache: false,
             });
@@ -384,7 +438,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
             <FormItem
               {...parent.props}
               key={id}
-              name={buildDynamicNamePath([...fieldPath, rowIdx, namePath], parentFieldIndex)}
+              name={formItemName}
               style={{ marginBottom: 0 }}
               showLabel={false}
               disabled={
@@ -445,6 +499,57 @@ export class SubTableColumnModel<
   static renderMode = ModelRenderMode.RenderFunction;
   static fieldComponentContext = SUB_TABLE_COLUMN_FIELD_COMPONENT_CONTEXT;
 
+  private getAssociationField() {
+    return (this.parent as any)?.context?.collectionField;
+  }
+
+  private getParentFormValues() {
+    return (this.context?.blockModel as any)?.context?.formValues;
+  }
+
+  private createParentItemAccessors(parentItemAccessor?: () => ItemChain | undefined) {
+    const baseAccessors = createParentItemAccessorsFromContext({
+      parentContextAccessor: () => (this.parent as any)?.context,
+      fallbackParentPropertiesAccessor: () => this.getParentFormValues(),
+    });
+
+    if (!parentItemAccessor) {
+      return baseAccessors;
+    }
+
+    return {
+      parentPropertiesAccessor: (ctx?: any) =>
+        parentItemAccessor()?.value ?? baseAccessors.parentPropertiesAccessor(ctx),
+      parentItemMetaAccessor: baseAccessors.parentItemMetaAccessor,
+      parentItemResolverAccessor: baseAccessors.parentItemResolverAccessor,
+    };
+  }
+
+  private createRowItemContextPropertyOptions(
+    options: {
+      resolverPropertiesAccessor?: () => unknown;
+      parentItemAccessor?: () => ItemChain | undefined;
+      showParentIndex?: boolean;
+    } = {},
+  ) {
+    const associationField = this.getAssociationField();
+
+    return createAssociationItemChainContextPropertyOptions({
+      t: this.context.t,
+      title: buildCurrentItemTitle(this.context.t, associationField, this.props?.name),
+      showIndex: true,
+      showParentIndex:
+        options.showParentIndex ??
+        (Array.isArray((this.parent as any)?.context?.fieldIndex) &&
+          (this.parent as any).context.fieldIndex.length > 0),
+      collectionAccessor: () => (this.parent as any)?.collection ?? associationField?.targetCollection ?? null,
+      propertiesAccessor: (ctx) => ctx?.item?.value,
+      resolverPropertiesAccessor: options.resolverPropertiesAccessor ?? (() => undefined),
+      parentCollectionAccessor: () => associationField?.collection,
+      parentAccessors: this.createParentItemAccessors(options.parentItemAccessor),
+    });
+  }
+
   renderHiddenInConfig() {
     return <FieldWithoutPermissionPlaceholder targetModel={this} />;
   }
@@ -505,6 +610,14 @@ export class SubTableColumnModel<
     ).some(Boolean);
   }
 
+  get hasFormValueDrivenDataScopeColumn() {
+    return (
+      this.parent?.mapSubModels('columns', (column: SubTableColumnModel) => {
+        return hasFormValueDrivenDataScopeField(column?.subModels?.field);
+      }) || []
+    ).some(Boolean);
+  }
+
   onInit(options: any): void {
     super.onInit(options);
     this.context.defineProperty('resourceName', {
@@ -516,6 +629,10 @@ export class SubTableColumnModel<
     this.context.defineProperty('actionName', {
       get: () => 'view',
     });
+    this.context.defineProperty('item', {
+      get: () => undefined,
+      ...this.createRowItemContextPropertyOptions(),
+    });
     this.emitter.on('onSubModelAdded', (subModel: FieldModel) => {
       if (this.collectionField) {
         subModel.setProps(this.collectionField.getComponentProps());
@@ -673,25 +790,30 @@ export class SubTableColumnModel<
             value: [...baseArr, `${associationKey}:${rowIndex}`],
           });
         }
-        fork.context.defineProperty('item', {
-          get: () => {
-            const form = (fork.context as any)?.form || (this.context?.blockModel as any)?.context?.form;
-            const rowRecord = getLatestSubTableRowRecord(form, fork.context.fieldIndex, record);
-            const parentItemCtx = (parentItem ?? this.context?.item) as any;
-            const isNew = rowRecord?.__is_new__;
-            const isStored = rowRecord?.__is_stored__;
+        const getRowRecord = () => {
+          const form = (fork.context as any)?.form || (this.context?.blockModel as any)?.context?.form;
+          return getLatestSubTableRowRecord(form, fork.context.fieldIndex, record);
+        };
+        const getParentItem = () => {
+          const parentItemCtx = (parentItem ?? (this.parent as any)?.context?.item) as ItemChain | undefined;
+          return parentItemCtx ?? createRootItemChain(this.getParentFormValues());
+        };
+        const getRowItem = createItemChainGetter({
+          valueAccessor: getRowRecord,
+          parentItemAccessor: getParentItem,
+          indexAccessor: () => (Number.isFinite(rowIndex) ? rowIndex : undefined),
+          lengthAccessor: () => {
             const list = (this.parent as any)?.props?.value;
-            const length = Array.isArray(list) ? list.length : undefined;
-            return {
-              index: Number.isFinite(rowIndex) ? rowIndex : undefined,
-              length,
-              __is_new__: isNew,
-              __is_stored__: isStored,
-              value: rowRecord,
-              parentItem: parentItemCtx,
-            };
+            return Array.isArray(list) ? list.length : undefined;
           },
-          cache: false,
+        });
+        fork.context.defineProperty('item', {
+          get: getRowItem,
+          ...this.createRowItemContextPropertyOptions({
+            resolverPropertiesAccessor: getRowRecord,
+            parentItemAccessor: getParentItem,
+            showParentIndex: baseArr.length > 0,
+          }),
         });
         return fork;
       })();
@@ -707,7 +829,7 @@ export class SubTableColumnModel<
           rowFork={rowFork}
           memoKey={cellModeKey}
           width={this.props.width}
-          commitOnChange={this.hasFormulaColumn}
+          commitOnChange={this.hasFormulaColumn || this.hasFormValueDrivenDataScopeColumn}
         />
       );
     };

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/__tests__/SubTableColumnModel.rowRecord.test.ts

@@ -15,18 +15,50 @@ import {
   SubTableColumnModel,
   getLatestSubTableRowRecord,
   buildRowPathFromFieldIndex,
+  buildSubTableColumnNamePath,
   isSubTableColumnConfiguredReadPretty,
   getSubTableColumnTitleField,
   getSubTableColumnReadPrettyFieldProps,
   isSubTableColumnReadPretty,
 } from '../SubTableColumnModel';
 
+function createMockCollection(name: string, fields: any[] = []) {
+  const collection: any = {
+    name,
+    title: name,
+    dataSourceKey: 'main',
+    filterTargetKey: 'id',
+    fields,
+    getFields: () => collection.fields,
+    getField: (fieldName: string) => collection.fields.find((field) => field.name === fieldName),
+  };
+
+  collection.fields.forEach((field) => {
+    field.collection = field.collection ?? collection;
+    field.filterable = field.filterable ?? true;
+    field.isAssociationField = field.isAssociationField ?? (() => false);
+  });
+
+  return collection;
+}
+
 describe('SubTableColumnModel row record helpers', () => {
   it('builds the row path from fieldIndex entries', () => {
     expect(buildRowPathFromFieldIndex(['roles:0'])).toEqual(['roles', 0]);
     expect(buildRowPathFromFieldIndex(['users:1', 'roles:2'])).toEqual(['users', 1, 'roles', 2]);
   });
 
+  it('builds absolute form item paths for nested sub-table columns', () => {
+    expect(buildSubTableColumnNamePath(['roles'], 0, 'name', ['roles:0'])).toEqual(['roles', 0, 'name']);
+    expect(buildSubTableColumnNamePath(['orders', 'lines'], 1, 'product', ['orders:0', 'lines:1'])).toEqual([
+      'orders',
+      0,
+      'lines',
+      1,
+      'product',
+    ]);
+  });
+
   it('prefers the latest row value from form over the fallback record', () => {
     const form = {
       getFieldValue: vi.fn((path: any) => {
@@ -51,6 +83,171 @@ describe('SubTableColumnModel row record helpers', () => {
     expect(getLatestSubTableRowRecord(form, ['roles:0'], fallback)).toBe(fallback);
   });
 
+  it('provides current item meta for sub-table column data scope variables', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ SubTableColumnModel });
+
+    const tagsCollection = createMockCollection('tags', [
+      { name: 'id', title: 'ID', type: 'integer', interface: 'integer' },
+      { name: 'name', title: 'Name', type: 'string', interface: 'input' },
+    ]);
+    const rolesCollection = createMockCollection('roles', [
+      { name: 'id', title: 'ID', type: 'integer', interface: 'integer' },
+      { name: 'name', title: 'Name', type: 'string', interface: 'input' },
+      {
+        name: 'tags',
+        title: 'Tags',
+        type: 'hasMany',
+        interface: 'o2m',
+        target: 'tags',
+        targetCollection: tagsCollection,
+        isAssociationField: () => true,
+      },
+    ]);
+    const usersCollection = createMockCollection('users', [
+      { name: 'id', title: 'ID', type: 'integer', interface: 'integer' },
+      { name: 'nickname', title: 'Nickname', type: 'string', interface: 'input' },
+    ]);
+    const rolesField = {
+      name: 'roles',
+      title: 'Roles',
+      type: 'hasMany',
+      interface: 'o2m',
+      collection: usersCollection,
+      target: 'roles',
+      targetCollection: rolesCollection,
+      isAssociationField: () => true,
+    };
+
+    const form = {
+      getFieldValue: vi.fn((path: any) => {
+        if (JSON.stringify(path) === JSON.stringify(['roles', 0])) {
+          return { id: 11, name: 'Admin', tags: [{ id: 7 }] };
+        }
+      }),
+    };
+    const blockModel: any = engine.createModel({ use: 'FlowModel', uid: 'form-block', structure: {} as any });
+    blockModel.context.defineProperty('form', { value: form });
+    blockModel.context.defineProperty('formValues', {
+      value: {
+        id: 1,
+        nickname: 'Alice',
+        roles: [{ id: 11, name: 'Admin' }],
+      },
+    });
+
+    const subTableFieldModel: any = engine.createModel({
+      use: 'FlowModel',
+      uid: 'users.roles',
+      structure: {} as any,
+    });
+    subTableFieldModel.collection = rolesCollection;
+    subTableFieldModel.setProps({ value: [{ id: 11, name: 'Admin' }] });
+    subTableFieldModel.context.defineProperty('collectionField', { value: rolesField });
+    subTableFieldModel.context.defineProperty('fieldPath', { value: 'roles' });
+    subTableFieldModel.context.defineProperty('blockModel', { value: blockModel });
+
+    const column: any = engine.createModel({
+      use: 'SubTableColumnModel',
+      uid: 'users.roles.tags',
+      stepParams: {
+        fieldSettings: {
+          init: {
+            fieldPath: 'roles.tags',
+          },
+        },
+      },
+      structure: {} as any,
+    });
+    column.setParent(subTableFieldModel);
+    column.context.defineProperty('blockModel', { value: blockModel });
+    column.subModels = { field: [] };
+
+    const designTimeItemOptions = column.context.getPropertyOptions('item');
+    expect(typeof designTimeItemOptions.meta).toBe('function');
+    const designTimeMeta = await designTimeItemOptions.meta();
+    expect(designTimeMeta.properties.value.title).toBe('Attributes');
+    expect(designTimeMeta.properties.parentItem.properties.value.title).toBe('Attributes');
+
+    const renderCell = column.renderItem();
+    renderCell({
+      id: 'cell-roles-tags-0',
+      rowIdx: 0,
+      record: { id: 11, name: 'Stale admin', tags: [{ id: 7 }] },
+      parentItem: {
+        value: { id: 1, nickname: 'Alice' },
+      },
+    });
+
+    const [rowFork] = Array.from(column.forks ?? []) as any[];
+    const rowItemOptions = rowFork.context.getPropertyOptions('item');
+    expect(typeof rowItemOptions.meta).toBe('function');
+    expect(rowItemOptions.resolveOnServer('value.tags.name')).toBe(true);
+
+    const rowMeta = await rowItemOptions.meta();
+    expect(rowMeta.properties.value.title).toBe('Attributes');
+    expect(rowMeta.properties.parentItem.properties.value.title).toBe('Attributes');
+    expect(rowFork.context.item).toMatchObject({
+      index: 0,
+      length: 1,
+      value: { id: 11, name: 'Admin', tags: [{ id: 7 }] },
+      parentItem: {
+        value: { id: 1, nickname: 'Alice' },
+      },
+    });
+  });
+
+  it('detects variable data scope columns for immediate row commits', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ SubTableColumnModel });
+
+    const inputColumn: any = engine.createModel({
+      use: 'SubTableColumnModel',
+      uid: 'users.roles.name',
+      structure: {} as any,
+    });
+    const scopedColumn: any = engine.createModel({
+      use: 'SubTableColumnModel',
+      uid: 'users.roles.tags',
+      structure: {} as any,
+    });
+
+    inputColumn.subModels = {
+      field: {
+        getStepParams: vi.fn(() => undefined),
+      },
+    };
+    scopedColumn.subModels = {
+      field: {
+        getStepParams: vi.fn((flowKey: string, stepKey: string) => {
+          if (flowKey !== 'selectSettings' || stepKey !== 'dataScope') {
+            return undefined;
+          }
+          return {
+            filter: {
+              logic: '$and',
+              items: [{ path: 'name', operator: '$eq', value: '{{ ctx.item.value.name }}' }],
+            },
+          };
+        }),
+      },
+    };
+
+    const parent: any = engine.createModel({
+      use: 'FlowModel',
+      uid: 'users.roles-table',
+      structure: {} as any,
+    });
+    parent.mapSubModels = vi.fn((key: string, iterator: (column: SubTableColumnModel) => unknown) => {
+      if (key !== 'columns') return [];
+      return [inputColumn, scopedColumn].map(iterator);
+    });
+    inputColumn.setParent(parent);
+    scopedColumn.setParent(parent);
+
+    expect(inputColumn.hasFormValueDrivenDataScopeColumn).toBe(true);
+  });
+
   it('treats a display-only column pattern as read-pretty mode', () => {
     expect(isSubTableColumnReadPretty({ props: { pattern: 'readPretty' } })).toBe(true);
     expect(isSubTableColumnReadPretty({ props: { readPretty: true } })).toBe(true);

package/src/flow/models/fields/AssociationFieldModel/__tests__/RecordPickerFieldModel.itemContext.test.ts

@@ -28,6 +28,7 @@ import {
   normalizeRecordPickerValue,
   shouldClearRecordPickerValueOnMultipleChange,
 } from '../RecordPickerFieldModel';
+import { getAssociationHydrationNamePath, getAssociationHydrationSetterContext } from '../RecordSelectFieldModel';
 
 function createMockCollection() {
   return {
@@ -93,6 +94,28 @@ describe('RecordPickerFieldModel item context', () => {
     expect(shouldClearRecordPickerValueOnMultipleChange({ type: 'belongsTo' }, true, false)).toBe(false);
   });
 
+  it('uses the current field context for association hydration writes', () => {
+    const setFormValue = vi.fn();
+    const blockSetFormValue = vi.fn();
+    const model = {
+      props: {
+        name: 'orders',
+      },
+      context: {
+        fieldPathArray: ['orders', 0, 'lines', 1, 'product'],
+        setFormValue,
+        blockModel: {
+          context: {
+            setFormValue: blockSetFormValue,
+          },
+        },
+      },
+    };
+
+    expect(getAssociationHydrationNamePath(model)).toEqual(['orders', 0, 'lines', 1, 'product']);
+    expect(getAssociationHydrationSetterContext(model)).toBe(model.context);
+  });
+
   it('itemChain helpers: createParentItemAccessorsFromInputArgs works', () => {
     const inputArgs = {
       parentItem: { value: { id: 1 } },

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

@@ -197,6 +197,11 @@ export class ClickableFieldModel extends FieldModel {
       titleField,
       overflowMode,
       disabled,
+      dateOnly,
+      dateFormat,
+      format,
+      picker,
+      showTime,
       timeFormat,
       ...restProps
     } = this.props;

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

@@ -8,14 +8,42 @@
  */
 
 import { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import { getDateTimeFormat, getPickerFormat } from '@nocobase/utils/client';
 import dayjs from 'dayjs';
 import React from 'react';
 import { ClickableFieldModel } from './ClickableFieldModel';
 
+const stripTimeFromFormat = (format?: string) =>
+  format ? format.replace(/\s*[Hh]{1,2}:mm(?::ss)?(?:\.SSS)?(?:\s*[aA])?/g, '').trim() : format;
+
+interface DisplayDateTimeFormatProps {
+  dateOnly?: boolean;
+  picker?: string;
+  format?: string;
+  dateFormat?: string;
+  showTime?: boolean;
+  timeFormat?: string;
+}
+
+const resolveDisplayDateTimeFormat = (props: DisplayDateTimeFormatProps) => {
+  const { dateOnly, picker = 'date', format, dateFormat, showTime, timeFormat } = props;
+  const normalizedFormat = stripTimeFromFormat(format);
+  if (picker !== 'date') {
+    return dateFormat || normalizedFormat || getPickerFormat(picker);
+  }
+
+  if (!dateOnly && !dateFormat && typeof showTime === 'undefined' && !timeFormat && normalizedFormat) {
+    return format;
+  }
+
+  const normalizedDateFormat = dateFormat || normalizedFormat || getPickerFormat(picker);
+  return getDateTimeFormat(picker, normalizedDateFormat, showTime, timeFormat);
+};
+
 export class DisplayDateTimeFieldModel extends ClickableFieldModel {
   public renderComponent(value) {
     const { className, style } = this.props;
-    const finalFormat = this.props.format;
+    const finalFormat = resolveDisplayDateTimeFormat(this.props);
     let formattedValue = '';
     if (value) {
       const day = dayjs(value);

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

@@ -9,18 +9,64 @@
 
 import { EditableItemModel, FilterableItemModel, tExpr } from '@nocobase/flow-engine';
 import { Input } from 'antd';
-import React from 'react';
+import type { InputProps, InputRef } from 'antd';
+import React, { useEffect, useRef } from 'react';
 import { customAlphabet as Alphabet } from 'nanoid';
 import { FieldModel } from '../base/FieldModel';
 import { ScanInput } from '../../../components/form/ScanInput';
 
+function IMESafeInput(props: InputProps) {
+  const { value, onChange, onCompositionStart, onCompositionEnd, ...rest } = props;
+  const inputRef = useRef<InputRef>(null);
+  const previousValueRef = useRef(value);
+  const defaultValue = typeof value === 'bigint' ? String(value) : value;
+
+  useEffect(() => {
+    if (Object.is(previousValueRef.current, value)) {
+      return;
+    }
+    previousValueRef.current = value;
+
+    const input = inputRef.current?.input;
+    if (input) {
+      const nextValue = value == null ? '' : String(value);
+      if (input.value !== nextValue) {
+        input.value = nextValue;
+      }
+    }
+  }, [value]);
+
+  const getEventValue = (event: React.ChangeEvent<HTMLInputElement> | React.CompositionEvent<HTMLInputElement>) =>
+    event.currentTarget.value;
+
+  return (
+    <Input
+      {...rest}
+      ref={inputRef}
+      defaultValue={defaultValue}
+      onChange={(event) => {
+        previousValueRef.current = getEventValue(event);
+        onChange?.(event);
+      }}
+      onCompositionStart={(event) => {
+        previousValueRef.current = getEventValue(event);
+        onCompositionStart?.(event);
+      }}
+      onCompositionEnd={(event) => {
+        previousValueRef.current = getEventValue(event);
+        onCompositionEnd?.(event);
+      }}
+    />
+  );
+}
+
 export class InputFieldModel extends FieldModel {
   render() {
     if (this.props.enableScan) {
       return <ScanInput {...this.props} />;
     }
     const { enableScan, disableManualInput, ...inputProps } = this.props;
-    return <Input {...inputProps} />;
+    return <IMESafeInput {...inputProps} />;
   }
 }
 

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

@@ -15,17 +15,20 @@ import { MobileSelect } from './mobile-components/MobileSelect';
 import { enumToOptions, getSelectedEnumLabels, translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
 
 const getOriginalEnumOptions = (model: SelectFieldModel) => {
-  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, (text) => text) || [];
+  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, model.translate) || [];
   if (fromEnum.length > 0) {
     return fromEnum.map((option) => ({ ...option }));
   }
   const current = Array.isArray(model.props.options) ? model.props.options : [];
-  return current.map((option) => ({ ...option }));
+  return current.map((option) => ({
+    ...option,
+    label: translateOptionLabel(option.label, model.translate),
+  }));
 };
-
 export class SelectFieldModel extends FieldModel {
   render() {
     const fallbackOptions = getOriginalEnumOptions(this);
+
     const options = this.props.options?.map((v) => {
       return {
         ...v,
@@ -46,7 +49,6 @@ export class SelectFieldModel extends FieldModel {
     if (this.context.isMobileLayout) {
       return <MobileSelect {...this.props} options={options} displayValue={value} />;
     }
-
     return (
       <Select
         {...this.props}