@nocobase/client-v2 2.2.0-beta.17 → 2.2.0-beta.18

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

@@ -7,7 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowContext } from '@nocobase/flow-engine';
+import { FlowContext, FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { renderHook, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import {
   buildCurrentItemTitle,
@@ -21,6 +22,7 @@ import {
 } from '../itemChain';
 import { injectRecordPickerPopupContext } from '@nocobase/client-v2';
 import {
+  RecordPickerFieldModel,
   canRecordPickerSelectMultiple,
   getRecordPickerClearedValue,
   getRecordPickerEmptyValue,
@@ -28,8 +30,12 @@ import {
   normalizeRecordPickerValue,
   shouldClearRecordPickerValueOnMultipleChange,
 } from '../RecordPickerFieldModel';
-import { getAssociationHydrationNamePath, getAssociationHydrationSetterContext } from '../RecordSelectFieldModel';
-
+import {
+  collectAssociationHydrationCandidates,
+  useAssociationValueHydration,
+  getAssociationHydrationNamePath,
+  getAssociationHydrationSetterContext,
+} from '../recordSelectShared';
 function createMockCollection() {
   return {
     name: 'users',
@@ -78,6 +84,118 @@ describe('RecordPickerFieldModel item context', () => {
     expect(normalizeRecordPickerValue(undefined, fieldNames, false)).toBeUndefined();
   });
 
+  it('queues ID-only picker values for association label hydration', () => {
+    const statusMap = new Map<string, 'pending' | 'done'>();
+    const fieldNames = { label: 'name', value: 'id' };
+
+    expect(
+      collectAssociationHydrationCandidates({
+        value: [{ id: 1 }, { id: 2, name: 'Already hydrated' }],
+        isMultiple: true,
+        valueKey: fieldNames.value,
+        labelKey: fieldNames.label,
+        statusMap,
+      }),
+    ).toEqual([{ item: { id: 1 }, tk: 1, tkKey: '1' }]);
+    expect(statusMap).toEqual(new Map([['1', 'pending']]));
+
+    expect(
+      collectAssociationHydrationCandidates({
+        value: { id: 1 },
+        isMultiple: false,
+        valueKey: fieldNames.value,
+        labelKey: fieldNames.label,
+        statusMap,
+      }),
+    ).toEqual([]);
+  });
+
+  it('hydrates an ID-only picker value back into the form', async () => {
+    const resource = {
+      get: vi.fn().mockResolvedValue({ id: 1, name: '北京启明教育' }),
+    };
+    const setFormValue = vi.fn();
+    const onChange = vi.fn();
+    const model = {
+      resource,
+      props: { name: 'company' },
+      context: {
+        fieldPathArray: ['company'],
+        setFormValue,
+      },
+    };
+
+    const { rerender } = renderHook(() =>
+      useAssociationValueHydration({
+        model,
+        value: { id: 1 },
+        isMultiple: false,
+        fieldNames: { label: 'name', value: 'id' },
+        onChange,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(setFormValue).toHaveBeenCalledWith(
+        ['company'],
+        { id: 1, name: '北京启明教育' },
+        { source: 'default', markExplicit: false, triggerEvent: false },
+      );
+    });
+    rerender();
+
+    expect(resource.get).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('initializes a target resource before hydrating an ID-only picker value', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RecordPickerFieldModel });
+
+    const formItem = engine.createModel<FlowModel>({
+      use: 'FlowModel',
+      uid: 'form-item',
+    });
+    const field = engine.createModel<RecordPickerFieldModel>({
+      use: 'RecordPickerFieldModel',
+      uid: 'company-field',
+      parentId: formItem.uid,
+    });
+    const setFormValue = vi.fn();
+    field.context.defineProperty('collectionField', {
+      value: {
+        dataSourceKey: 'main',
+        target: 'rp_na_companies',
+      },
+    });
+    field.context.defineProperty('fieldPathArray', { value: ['company'] });
+    field.context.defineProperty('setFormValue', { value: setFormValue });
+
+    await field.applyFlow('recordPickerSettings');
+    const get = vi.spyOn(field.resource, 'get').mockResolvedValue({ id: 1, name: '北京启明教育' });
+    const onChange = vi.fn();
+
+    renderHook(() =>
+      useAssociationValueHydration({
+        model: field,
+        value: { id: 1 },
+        isMultiple: false,
+        fieldNames: { label: 'name', value: 'id' },
+        onChange,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(get).toHaveBeenCalledWith(1);
+      expect(setFormValue).toHaveBeenCalledWith(
+        ['company'],
+        { id: 1, name: '北京启明教育' },
+        { source: 'default', markExplicit: false, triggerEvent: false },
+      );
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it('returns the empty popup select value for the current multiple mode', () => {
     expect(getRecordPickerEmptyValue(true)).toEqual([]);
     expect(getRecordPickerEmptyValue(false)).toBeUndefined();

package/src/flow/models/fields/AssociationFieldModel/recordSelectShared.tsx

@@ -119,6 +119,162 @@ export interface LazySelectProps extends Omit<SelectProps<any>, 'mode' | 'option
   allowEdit?: boolean;
 }
 
+type AssociationHydrationSetterOptions = {
+  source?: string;
+  markExplicit?: boolean;
+  triggerEvent?: boolean;
+};
+
+type AssociationHydrationSetterContext = {
+  setFormValue?: (
+    namePath: unknown,
+    value: unknown,
+    options?: AssociationHydrationSetterOptions,
+  ) => Promise<unknown> | void;
+};
+
+export type AssociationHydrationModel = {
+  resource?: {
+    get?: (tk: unknown) => Promise<unknown> | unknown;
+  };
+  context?: unknown;
+  props?: {
+    name?: unknown;
+  };
+};
+
+type AssociationHydrationStatus = 'pending' | 'done';
+
+type AssociationHydrationCandidate = {
+  item: AssociationOption;
+  tk: unknown;
+  tkKey: string;
+};
+
+export function isAssociationRecord(value: unknown): value is AssociationOption {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function collectAssociationHydrationCandidates(options: {
+  value: LazySelectProps['value'];
+  isMultiple: boolean;
+  valueKey: string;
+  labelKey: string;
+  statusMap: Map<string, AssociationHydrationStatus>;
+}): AssociationHydrationCandidate[] {
+  const { value, isMultiple, valueKey, labelKey, statusMap } = options;
+  const list = isMultiple ? (Array.isArray(value) ? value : []) : value != null ? [value] : [];
+  const activeTkKeys = new Set<string>();
+
+  for (const item of list) {
+    if (!isAssociationRecord(item)) continue;
+    const tk = item[valueKey];
+    if (tk == null) continue;
+    const tkKey = typeof tk === 'object' ? JSON.stringify(tk) : String(tk);
+    if (tkKey) activeTkKeys.add(tkKey);
+  }
+
+  for (const key of Array.from(statusMap.keys())) {
+    if (!activeTkKeys.has(key)) statusMap.delete(key);
+  }
+
+  const candidates: AssociationHydrationCandidate[] = [];
+  for (const item of list) {
+    if (!isAssociationRecord(item)) continue;
+    const tk = item[valueKey];
+    if (tk == null || item[labelKey] != null) continue;
+
+    const tkKey = typeof tk === 'object' ? JSON.stringify(tk) : String(tk);
+    if (!tkKey || statusMap.has(tkKey)) continue;
+
+    statusMap.set(tkKey, 'pending');
+    candidates.push({ item, tk, tkKey });
+  }
+
+  return candidates;
+}
+
+function hasAssociationHydrationSetter(value: unknown): value is AssociationHydrationSetterContext {
+  return isAssociationRecord(value) && typeof value.setFormValue === 'function';
+}
+
+export function getAssociationHydrationNamePath(model: AssociationHydrationModel) {
+  const context = isAssociationRecord(model.context) ? model.context : undefined;
+  return context?.fieldPathArray ?? context?.fieldPath ?? model.props?.name;
+}
+
+export function getAssociationHydrationSetterContext(model: AssociationHydrationModel) {
+  if (hasAssociationHydrationSetter(model.context)) return model.context;
+
+  const context = isAssociationRecord(model.context) ? model.context : undefined;
+  const blockModel = isAssociationRecord(context?.blockModel) ? context.blockModel : undefined;
+  return hasAssociationHydrationSetter(blockModel?.context) ? blockModel.context : undefined;
+}
+
+export function useAssociationValueHydration(options: {
+  model: AssociationHydrationModel;
+  value: LazySelectProps['value'];
+  isMultiple: boolean;
+  fieldNames: AssociationFieldNames;
+  onChange: LazySelectProps['onChange'];
+}) {
+  const { model, value, isMultiple, fieldNames, onChange } = options;
+  const hydrateStatusRef = React.useRef<Map<string, AssociationHydrationStatus>>(new Map());
+
+  React.useEffect(() => {
+    const resource = model.resource;
+    if (typeof resource?.get !== 'function' || !fieldNames.value || !fieldNames.label) return;
+
+    const current = value;
+    const candidates = collectAssociationHydrationCandidates({
+      value: current,
+      isMultiple,
+      valueKey: fieldNames.value,
+      labelKey: fieldNames.label,
+      statusMap: hydrateStatusRef.current,
+    });
+    if (!candidates.length) return;
+
+    const namePath = getAssociationHydrationNamePath(model);
+    const setterContext = getAssociationHydrationSetterContext(model);
+
+    const hydrateCandidate = async ({ item, tk, tkKey }: AssociationHydrationCandidate) => {
+      try {
+        const record = await resource.get?.(tk);
+        if (!isAssociationRecord(record)) return;
+
+        const merged = { ...item, ...record };
+        if (merged[fieldNames.label] == null) return;
+
+        const nextValue = isMultiple
+          ? (Array.isArray(current) ? current : []).map((entry) =>
+              isAssociationRecord(entry) && entry[fieldNames.value] === tk ? merged : entry,
+            )
+          : merged;
+
+        if (typeof setterContext?.setFormValue === 'function' && namePath != null) {
+          await setterContext.setFormValue(namePath, nextValue, {
+            source: 'default',
+            markExplicit: false,
+            triggerEvent: false,
+          });
+          return;
+        }
+
+        onChange(nextValue);
+      } catch {
+        // Keep the original ID-only value when the related record cannot be loaded.
+      } finally {
+        hydrateStatusRef.current.set(tkKey, 'done');
+      }
+    };
+
+    candidates.forEach((candidate) => {
+      hydrateCandidate(candidate);
+    });
+  }, [fieldNames.label, fieldNames.value, isMultiple, model, onChange, value]);
+}
+
 export interface LabelByFieldProps {
   option: AssociationOption;
   fieldNames: AssociationFieldNames;

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

@@ -71,7 +71,7 @@ function formatBigNumberWithSeparator(value, format = '0.00', step = 1, formatSt
   let number = value;
 
   if (formatStyle) {
-    number = new BigNumber(value).toString();
+    number = new BigNumber(value).toFixed();
   }
 
   let formattedNumber = '';

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

@@ -20,7 +20,7 @@ function toSafeNumber(value) {
     return value;
   }
   if (value > Number.MAX_SAFE_INTEGER || value < Number.MIN_SAFE_INTEGER) {
-    return new BigNumber(value).toString();
+    return new BigNumber(value).toFixed();
   } else {
     return Number(value);
   }

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

@@ -0,0 +1,33 @@
+/**
+ * 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 { formatNumber } from '../DisplayNumberFieldModel';
+
+describe('formatNumber', () => {
+  it('formats a 30-digit decimal without scientific notation or precision loss', () => {
+    expect(
+      formatNumber({
+        value: '123456789012345678901234567890',
+        formatStyle: 'normal',
+        step: '1',
+      }),
+    ).toBe('123,456,789,012,345,678,901,234,567,890');
+  });
+
+  it('formats the 22-digit value from the reported v2 scenario', () => {
+    expect(
+      formatNumber({
+        value: '1234567890123458152112',
+        formatStyle: 'normal',
+        step: '1',
+      }),
+    ).toBe('1,234,567,890,123,458,152,112');
+  });
+});

package/src/flow/models/fields/__tests__/NumberFieldModel.test.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { InputNumberField } from '../NumberFieldModel';
+
+describe('InputNumberField', () => {
+  it('keeps the existing number value type for regular input', () => {
+    const onChange = vi.fn();
+
+    render(<InputNumberField stringMode onChange={onChange} />);
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '123' } });
+
+    expect(onChange).toHaveBeenLastCalledWith(123);
+    expect(onChange).not.toHaveBeenCalledWith('123');
+  });
+
+  it('preserves a high-precision decimal string in string mode', () => {
+    const onChange = vi.fn();
+    const value = '123456789012345678901234567890';
+
+    render(<InputNumberField stringMode onChange={onChange} />);
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value } });
+
+    expect(onChange).toHaveBeenLastCalledWith(value);
+    expect(screen.getByRole('spinbutton')).toHaveValue(value);
+  });
+
+  it('does not switch to scientific notation at the 22-digit boundary', () => {
+    const onChange = vi.fn();
+    const value = '1234567890123458152112';
+
+    render(<InputNumberField stringMode onChange={onChange} />);
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value } });
+
+    expect(onChange).toHaveBeenLastCalledWith(value);
+    expect(onChange).not.toHaveBeenCalledWith('1.234567890123458152112e+21');
+  });
+});

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

@@ -206,6 +206,11 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
         return;
       }
       const selectedId = vals[0];
+      if (selectedId === undefined) {
+        onChange(undefined as unknown as AssociationOption);
+        handleClose();
+        return;
+      }
       const record = optionMap.get(selectedId);
       if (record) {
         if (valueMode === 'value') {

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

@@ -9,7 +9,7 @@
 
 import { useFlowModelContext } from '@nocobase/flow-engine';
 import { Select } from 'antd';
-import { Button, CheckList, Popup, SearchBar } from 'antd-mobile';
+import { Button, CheckList, ConfigProvider, Popup, SearchBar, useConfig } from 'antd-mobile';
 import React, { useEffect, useMemo, useState } from 'react';
 
 const mobileSelectSafeAreaPaddingBottom = 'calc(12px + env(safe-area-inset-bottom, 0px))';
@@ -26,11 +26,28 @@ function getMobileSelectListStyle(hasConfirmFooter: boolean): React.CSSPropertie
   };
 }
 
+function normalizeMobileLocale(locale?: string) {
+  return locale === 'zh-CH' ? 'zh-CN' : locale;
+}
+
 export function MobileSelect(props) {
   const { value, displayValue, onChange, onChangeComplete, disabled, options = [], mode } = props;
   const isMultiple = ['multiple', 'tags'].includes(mode);
   const ctx = useFlowModelContext();
   const t = ctx.t;
+  const { locale: mobileLocale } = useConfig();
+  const searchBarLocale = useMemo(() => {
+    const currentLocale = normalizeMobileLocale(ctx.locale);
+    const inheritedLocale = normalizeMobileLocale(mobileLocale.locale);
+
+    return {
+      ...mobileLocale,
+      SearchBar: {
+        ...mobileLocale.SearchBar,
+        name: currentLocale === inheritedLocale ? mobileLocale.SearchBar.name : t('Search'),
+      },
+    };
+  }, [ctx.locale, mobileLocale, t]);
   const [visible, setVisible] = useState(false);
   const [selected, setSelected] = useState(value || []);
   const [searchText, setSearchText] = useState(null);
@@ -77,7 +94,15 @@ export function MobileSelect(props) {
         destroyOnClose
       >
         <div style={{ margin: '10px' }}>
-          <SearchBar placeholder={t('search')} value={searchText} onChange={(v) => setSearchText(v)} showCancelButton />
+          <ConfigProvider locale={searchBarLocale}>
+            <SearchBar
+              placeholder={t('search')}
+              value={searchText}
+              onChange={(v) => setSearchText(v)}
+              cancelText={t('Cancel')}
+              showCancelButton
+            />
+          </ConfigProvider>
         </div>
         <div style={getMobileSelectListStyle(isMultiple)}>
           <CheckList

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

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 import { beforeEach, describe, it, expect, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@nocobase/test/client';
 import { MobileLazySelect } from '../MobileLazySelect';
@@ -23,11 +23,29 @@ const RELATION_OPTIONS = [
   { uuid: 'c7d99828-a1de-9e70-4c2d-b0139abdf02e' },
 ];
 
+type SelectProps = ComponentProps<(typeof import('antd'))['Select']>;
+type PopupProps = ComponentProps<(typeof import('antd-mobile'))['Popup']>;
+type CheckListProps = ComponentProps<(typeof import('antd-mobile'))['CheckList']>;
+type ButtonProps = ComponentProps<(typeof import('antd-mobile'))['Button']>;
+type SearchBarProps = ComponentProps<(typeof import('antd-mobile'))['SearchBar']>;
+type ConfigProviderProps = ComponentProps<(typeof import('antd-mobile'))['ConfigProvider']>;
+type MobileLocale = {
+  locale: string;
+  common: { cancel: string };
+  SearchBar: { name: string };
+};
+
 const mockState = vi.hoisted(() => ({
-  selectProps: undefined as any,
-  popupProps: undefined as any,
-  checklistProps: undefined as any,
-  confirmButtonProps: undefined as any,
+  selectProps: undefined as SelectProps | undefined,
+  popupProps: undefined as PopupProps | undefined,
+  checklistProps: undefined as CheckListProps | undefined,
+  confirmButtonProps: undefined as ButtonProps | undefined,
+  mobileLocale: {
+    locale: 'zh-CH',
+    common: { cancel: '取消' },
+    SearchBar: { name: '搜索框' },
+  },
+  flowLocale: 'en-US',
 }));
 
 function resetMockState() {
@@ -35,6 +53,12 @@ function resetMockState() {
   mockState.popupProps = undefined;
   mockState.checklistProps = undefined;
   mockState.confirmButtonProps = undefined;
+  mockState.mobileLocale = {
+    locale: 'zh-CH',
+    common: { cancel: '取消' },
+    SearchBar: { name: '搜索框' },
+  };
+  mockState.flowLocale = 'en-US';
 }
 
 function clickTrigger() {
@@ -115,7 +139,20 @@ vi.mock('@nocobase/flow-engine', async () => {
   return {
     ...actual,
     useFlowModelContext: () => ({
-      t: (value: string) => value,
+      locale: mockState.flowLocale,
+      t: (value: string) =>
+        ({
+          'zh-CN': {
+            Cancel: '取消',
+            Search: '搜索',
+            search: '搜索',
+          },
+          'zh-TW': {
+            Cancel: '取消',
+            Search: '搜尋',
+            search: '搜尋',
+          },
+        })[mockState.flowLocale]?.[value] || value,
     }),
     useFlowModel: () => ({
       context: {
@@ -130,7 +167,7 @@ vi.mock('antd', async () => {
   const actual = await vi.importActual<any>('antd');
   return {
     ...actual,
-    Select: (props: any) => {
+    Select: (props: SelectProps) => {
       mockState.selectProps = props;
       return <div data-testid="antd-select" />;
     },
@@ -138,15 +175,22 @@ vi.mock('antd', async () => {
 });
 
 vi.mock('antd-mobile', () => {
-  const MockCheckList: any = (props: any) => {
+  const MockCheckList = (props: CheckListProps) => {
     mockState.checklistProps = props;
     return <div data-testid="checklist">{props.children}</div>;
   };
 
-  MockCheckList.Item = ({ value, children }: any) => <div data-testid={`item-${value}`}>{children}</div>;
+  MockCheckList.Item = ({ value, children }: { value: string | number; children?: ReactNode }) => (
+    <div data-testid={`item-${value}`}>{children}</div>
+  );
 
   return {
-    Button: (props: any) => {
+    ConfigProvider: ({ children, locale }: ConfigProviderProps) => {
+      mockState.mobileLocale = locale as MobileLocale;
+      return <>{children}</>;
+    },
+    useConfig: () => ({ locale: mockState.mobileLocale }),
+    Button: (props: ButtonProps) => {
       mockState.confirmButtonProps = props;
       return (
         <button type="button" data-testid="confirm" onClick={props.onClick}>
@@ -154,16 +198,23 @@ vi.mock('antd-mobile', () => {
         </button>
       );
     },
-    Popup: (props: any) => {
+    Popup: (props: PopupProps) => {
       mockState.popupProps = props;
       return props.visible ? <div data-testid="popup">{props.children}</div> : null;
     },
-    SearchBar: ({ value, onChange, onCancel, cancelText, showCancelButton }: any) => (
+    SearchBar: ({ value, onChange, onCancel, cancelText, placeholder, showCancelButton }: SearchBarProps) => (
       <div>
-        <input data-testid="search" value={value ?? ''} onChange={(e) => onChange?.(e.target.value)} />
+        <input
+          aria-label={mockState.mobileLocale.SearchBar.name}
+          data-testid="search"
+          placeholder={placeholder}
+          type="search"
+          value={value ?? ''}
+          onChange={(e) => onChange?.(e.target.value)}
+        />
         {showCancelButton && value ? (
           <button type="button" onClick={onCancel}>
-            {cancelText ?? '取消'}
+            {cancelText ?? mockState.mobileLocale.common.cancel}
           </button>
         ) : null}
       </div>
@@ -206,6 +257,47 @@ describe('MobileSelect', () => {
     expect(onChangeComplete).toHaveBeenCalledTimes(1);
   });
 
+  it('localizes the search input accessible name', () => {
+    renderMobileSelect();
+
+    openPopup();
+
+    expect(screen.getByRole('searchbox', { name: 'Search' })).toBeInTheDocument();
+  });
+
+  it('renders a translated cancel action after searching', () => {
+    renderMobileSelect();
+
+    openPopup();
+    act(() => {
+      fireEvent.change(screen.getByTestId('search'), { target: { value: 'Option' } });
+    });
+
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
+
+  it('preserves the Chinese search input accessible name', () => {
+    mockState.flowLocale = 'zh-CN';
+    renderMobileSelect();
+
+    openPopup();
+    act(() => {
+      fireEvent.change(screen.getByTestId('search'), { target: { value: 'Option' } });
+    });
+
+    expect(screen.getByRole('searchbox', { name: '搜索框' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '取消' })).toBeInTheDocument();
+  });
+
+  it('does not reuse the simplified Chinese accessible name for traditional Chinese', () => {
+    mockState.flowLocale = 'zh-TW';
+    renderMobileSelect();
+
+    openPopup();
+
+    expect(screen.getByRole('searchbox', { name: '搜尋' })).toBeInTheDocument();
+  });
+
   it('defers commit until confirm in multiple mode', () => {
     const { onChange, onChangeComplete } = renderMobileSelect({ value: [], mode: 'multiple' });
     openPopup();
@@ -307,6 +399,22 @@ describe('MobileLazySelect', () => {
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
   });
 
+  it('clears the selected relation record when it is tapped again in single mode', () => {
+    const { onChange } = renderMobileLazySelect({
+      value: RELATION_OPTIONS[0],
+      multiple: false,
+    });
+
+    openLazyPopup();
+    expect(mockState.checklistProps?.value).toEqual([RELATION_OPTIONS[0].uuid]);
+
+    selectValues([]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(undefined);
+    expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
+  });
+
   it('keeps pending relation records selected until confirm', () => {
     const { onChange, rerender } = renderMobileLazySelect();