@nocobase/client-v2 2.1.0-beta.30 → 2.1.0-beta.32

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/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/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

@@ -535,6 +535,9 @@ 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) => {

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,7 +8,7 @@
  */
 
 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', () => {
@@ -69,4 +69,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/DisplayTitleFieldModel.tsx

@@ -12,7 +12,8 @@ import { Typography } from 'antd';
 import { castArray } from 'lodash';
 import { css } from '@emotion/css';
 import React from 'react';
-import { FieldModel } from '../base/FieldModel';
+import { FieldModel } from '../base';
+import { hasDisplayValue, normalizeDisplayValue } from '../utils/displayValueUtils';
 
 export class DisplayTitleFieldModel extends FieldModel {
   get collectionField(): CollectionField {
@@ -55,13 +56,20 @@ export class DisplayTitleFieldModel extends FieldModel {
     };
     if (titleField) {
       const result = castArray(value).flatMap((v, idx) => {
-        const result = this.renderComponent(v?.[titleField]);
-        const node = v?.[titleField] ? result : 'N/A';
+        const titleCollectionField =
+          this.context.collectionField?.targetCollection?.getField?.(titleField) || this.context.collectionField;
+        const displayValue = normalizeDisplayValue(v?.[titleField], { collectionField: titleCollectionField });
+        const result = this.renderComponent(displayValue);
+        const node = hasDisplayValue(displayValue) ? result : 'N/A';
         return idx === 0 ? [node] : [<span key={`sep-${idx}`}>, </span>, node];
       });
       return <Typography.Text {...typographyProps}>{result}</Typography.Text>;
     } else {
-      const textContent = <Typography.Text {...typographyProps}>{this.renderComponent(value)}</Typography.Text>;
+      const textContent = (
+        <Typography.Text {...typographyProps}>
+          {this.renderComponent(normalizeDisplayValue(value, { collectionField: this.context.collectionField }))}
+        </Typography.Text>
+      );
       return textContent;
     }
   }

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

@@ -12,25 +12,55 @@ import { Select, Tag, Tooltip } from 'antd';
 import React from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { MobileSelect } from './mobile-components/MobileSelect';
+import { enumToOptions, getSelectedEnumLabels } from '../../internal/utils/enumOptionsUtils';
+
+const getOriginalEnumOptions = (model: SelectFieldModel) => {
+  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, (text) => text) || [];
+  if (fromEnum.length > 0) {
+    return fromEnum.map((option) => ({ ...option }));
+  }
+  const current = Array.isArray(model.props.options) ? model.props.options : [];
+  return current.map((option) => ({ ...option }));
+};
 
 export class SelectFieldModel extends FieldModel {
   render() {
+    const fallbackOptions = getOriginalEnumOptions(this);
     const options = this.props.options?.map((v) => {
       return {
         ...v,
         label: this.translate(v.label),
       };
     });
+    const selectedLabels = getSelectedEnumLabels(this.props.value, fallbackOptions).map((item) => ({
+      ...item,
+      label: this.translate(item.label),
+    }));
+    const value = Array.isArray(this.props.value)
+      ? selectedLabels
+      : selectedLabels.length > 0
+        ? selectedLabels[0]
+        : this.props.value;
 
     // TODO: 移动端相关的代码需迁移到单独的插件中
     if (this.context.isMobileLayout) {
-      return <MobileSelect {...this.props} options={options} />;
+      return <MobileSelect {...this.props} options={options} displayValue={value} />;
     }
 
     return (
       <Select
         {...this.props}
+        value={value}
+        labelInValue
+        onChange={(nextValue) => {
+          if (Array.isArray(nextValue)) {
+            this.props.onChange?.(nextValue.map((item: any) => item?.value));
+            return;
+          }
+          this.props.onChange?.(nextValue?.value);
+        }}
         options={options}
+        labelRender={(item) => item.label}
         maxTagCount="responsive"
         maxTagPlaceholder={(omittedValues) => (
           <Tooltip

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

@@ -9,7 +9,9 @@
 
 import { describe, expect, it, vi } from 'vitest';
 import { FlowEngine } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
 import { ClickableFieldModel } from '../ClickableFieldModel';
+import { DisplayTextFieldModel } from '../DisplayTextFieldModel';
 
 function createRolesFieldModel(sourceRecord: Record<string, any>) {
   const engine = new FlowEngine();
@@ -84,4 +86,25 @@ describe('ClickableFieldModel', () => {
       { debounce: true },
     );
   });
+
+  it('renders object title field values by configured target title field', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTextFieldModel });
+
+    const model = engine.createModel<DisplayTextFieldModel>({
+      use: DisplayTextFieldModel,
+      uid: 'display-text-association-title',
+    });
+    model.context.defineProperty('collectionField', {
+      value: {
+        targetCollectionTitleFieldName: 'code',
+        isAssociationField: () => true,
+      },
+    });
+
+    render(model.renderInDisplayStyle({ id: 2, name: 'Sales', code: 'S-001' }, { id: 1 }, false));
+
+    expect(screen.getByText('S-001')).toBeInTheDocument();
+    expect(screen.queryByText('Sales')).not.toBeInTheDocument();
+  });
 });

package/src/flow/models/fields/mobile-components/MobileSelect.tsx

@@ -13,7 +13,7 @@ import { Button, CheckList, Popup, SearchBar } from 'antd-mobile';
 import React, { useEffect, useMemo, useState } from 'react';
 
 export function MobileSelect(props) {
-  const { value, onChange, onChangeComplete, disabled, options = [], mode } = props;
+  const { value, displayValue, onChange, onChangeComplete, disabled, options = [], mode } = props;
   const ctx = useFlowModelContext();
   const t = ctx.t;
   const [visible, setVisible] = useState(false);
@@ -44,6 +44,7 @@ export function MobileSelect(props) {
       <div onClick={() => !disabled && setVisible(true)}>
         <Select
           {...props}
+          value={displayValue ?? value}
           open={false}
           dropdownStyle={{ display: 'none' }}
           showSearch={false}

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -178,6 +178,13 @@ describe('MobileSelect', () => {
     clickTrigger();
     expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
   });
+
+  it('prefers displayValue for trigger rendering', () => {
+    const displayValue = [{ label: 'Published', value: 'published' }];
+    renderMobileSelect({ value: ['published'], displayValue, mode: 'multiple' });
+
+    expect(mockState.selectProps?.value).toEqual(displayValue);
+  });
 });
 
 function SubTableCellHarness({ value, onCommit, mode }: { value: any; onCommit: (value: any) => void; mode?: string }) {