@nocobase/client-v2 2.3.0-beta.2 → 2.3.0-beta.21

package/src/flow/models/fields/DisplayAssociationField/__tests__/DisplaySubTableFieldModel.test.tsx

@@ -0,0 +1,351 @@
+/**
+ * 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 React from 'react';
+import { Form, type FormInstance, type TableProps } from 'antd';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import { DisplayItemModel, FlowEngine, FlowEngineProvider, FlowModelProvider } from '@nocobase/flow-engine';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  DetailsItemModel,
+  DisplaySubTableFieldModel,
+  DisplayTextFieldModel,
+  FormAssociationItemModel,
+  FormItemModel,
+  TableColumnModel,
+  aclCheck,
+  displayFieldComponent,
+  fixed,
+  overflowMode,
+  titleField,
+} from '../../../../index';
+import { buildAssociationOptions } from '../../../../actions/displayFieldComponent';
+import { rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
+
+type Row = Record<string, unknown>;
+type TableOptions = TableProps<Row>;
+
+const { tableRender } = vi.hoisted(() => ({ tableRender: vi.fn() }));
+
+vi.mock('react-i18next', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('react-i18next')>()),
+  useTranslation: () => ({ t: (value: string) => value }),
+}));
+
+vi.mock('antd', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('antd')>()),
+  Table: (props: TableOptions) => {
+    tableRender(props);
+    return <div data-testid="rows">{JSON.stringify(props.dataSource)}</div>;
+  },
+}));
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  tableRender.mockClear();
+});
+
+function setup(parentUse = 'FormAssociationItemModel') {
+  const engine = new FlowEngine();
+  engine.registerActions({ aclCheck, displayFieldComponent, fixed, overflowMode, titleField });
+  engine.registerModels({
+    DetailsItemModel,
+    DisplaySubTableFieldModel,
+    DisplayTextFieldModel,
+    FormAssociationItemModel,
+    FormItemModel,
+    TableColumnModel,
+  });
+  const dataSource = engine.dataSourceManager.getDataSource('main');
+  dataSource.addCollection({
+    name: 'users',
+    filterTargetKey: 'id',
+    titleField: 'name',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'integer' },
+      { name: 'name', type: 'string', interface: 'input' },
+    ],
+  });
+  dataSource.addCollection({
+    name: 'orgs',
+    fields: [
+      { name: 'staff', type: 'belongsToMany', interface: 'm2m', target: 'users' },
+      { name: 'reports', type: 'hasMany', interface: 'o2m', target: 'users' },
+      { name: 'members', type: 'belongsToArray', interface: 'mbm', target: 'users' },
+      { name: 'manager', type: 'belongsTo', interface: 'm2o', target: 'users' },
+      { name: 'name', type: 'string', interface: 'input' },
+    ],
+  });
+  dataSource.addCollection({
+    name: 'posts',
+    fields: [{ name: 'org', type: 'belongsTo', interface: 'm2o', target: 'orgs' }],
+  });
+  const parent = engine.createModel<FormAssociationItemModel>({
+    use: parentUse,
+    stepParams: {
+      fieldSettings: {
+        init: { dataSourceKey: 'main', collectionName: 'posts', fieldPath: 'org.staff' },
+      },
+    },
+  });
+  const resource = { getAppends: vi.fn(() => ['staff']), setAppends: vi.fn(), refresh: vi.fn() };
+  parent.context.defineProperty('blockModel', {
+    value: { collection: dataSource.getCollection('posts'), resource, addAppends: vi.fn() },
+  });
+  parent.context.defineProperty('flowSettingsEnabled', { value: false });
+  parent.context.defineProperty('aclCheck', { value: vi.fn().mockResolvedValue(true) });
+  const field = parent.setSubModel('field', { use: 'DisplaySubTableFieldModel', props: { pageSize: 10 } });
+  return { engine, parent, field: field as DisplaySubTableFieldModel, resource, dataSource };
+}
+
+function tableProps(): TableOptions {
+  return tableRender.mock.lastCall[0] as TableOptions;
+}
+
+describe('DisplaySubTableFieldModel in association display fields', () => {
+  it.each(['staff', 'reports', 'members'])('offers a subtable for the to-many field %s', (fieldName) => {
+    const { parent, dataSource } = setup();
+    const collectionField = dataSource.getCollection('orgs').getField(fieldName);
+    const bindings = FormAssociationItemModel.getBindingsByField(parent.context, collectionField);
+    expect(bindings.map((binding) => binding.modelName)).toContain('DisplaySubTableFieldModel');
+    expect(buildAssociationOptions(parent.context, FormAssociationItemModel)).toContainEqual({
+      label: expect.any(String),
+      value: 'DisplaySubTableFieldModel',
+    });
+  });
+
+  it('keeps the binding scoped and preserves the default title-field display', () => {
+    const { parent, dataSource } = setup();
+    const collection = dataSource.getCollection('orgs');
+    for (const itemModel of [DisplayItemModel, TableColumnModel, FormItemModel]) {
+      expect(itemModel.getBindingsByField(parent.context, collection.getField('staff'))).not.toEqual(
+        expect.arrayContaining([expect.objectContaining({ modelName: 'DisplaySubTableFieldModel' })]),
+      );
+    }
+    for (const fieldName of ['manager', 'name']) {
+      expect(FormAssociationItemModel.getBindingsByField(parent.context, collection.getField(fieldName))).not.toEqual(
+        expect.arrayContaining([expect.objectContaining({ modelName: 'DisplaySubTableFieldModel' })]),
+      );
+    }
+    expect(DetailsItemModel.getBindingsByField(parent.context, collection.getField('staff'))).toEqual(
+      expect.arrayContaining([expect.objectContaining({ modelName: 'DisplaySubTableFieldModel' })]),
+    );
+    expect(
+      FormAssociationItemModel.getDefaultBindingByField(parent.context, collection.getField('staff'), {
+        fallbackToTargetTitleField: true,
+      })?.modelName,
+    ).toBe('DisplayTextFieldModel');
+  });
+
+  it.each([undefined, null, [], { rows: [] }])('renders an empty table for %j', (value) => {
+    const { field } = setup();
+    field.setProps({ value });
+    render(field.render());
+    expect(tableProps().dataSource).toEqual([]);
+  });
+
+  it('updates rows and resets pagination when the association changes or is cleared', async () => {
+    const { field, resource } = setup();
+    field.setProps({ value: [{ id: 1, name: 'Alice' }] });
+    const view = render(field.render());
+    await act(async () => {
+      const pagination = tableProps().pagination;
+      if (pagination) pagination.onChange?.(3, 10);
+    });
+    expect(tableProps().pagination).toMatchObject({ current: 3 });
+    act(() => {
+      field.setProps({ value: { rows: [{ id: 2, name: 'Bob' }] } });
+      view.rerender(field.render());
+    });
+    expect(screen.getByTestId('rows').textContent).toContain('Bob');
+    expect(screen.getByTestId('rows').textContent).not.toContain('Alice');
+    expect(tableProps().pagination).toMatchObject({ current: 1 });
+    act(() => {
+      field.setProps({ value: null });
+      view.rerender(field.render());
+    });
+    expect(tableProps().dataSource).toEqual([]);
+    expect(resource.refresh).not.toHaveBeenCalled();
+  });
+
+  it('sorts nested columns locally without mutating form values or refreshing the form resource', async () => {
+    const { field, resource } = setup();
+    const rows = [
+      { id: 1, name: 'Bob' },
+      { id: 2, name: 'Alice' },
+    ];
+    const original = structuredClone(rows);
+    field.setProps({ value: rows });
+    render(field.render());
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'org.staff.name', order: 'ascend' },
+        {
+          action: 'sort',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual([rows[1], rows[0]]);
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'org.staff.name', order: 'descend' },
+        {
+          action: 'sort',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual(rows);
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'org.staff.name' },
+        {
+          action: 'sort',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual(rows);
+    expect(rows).toEqual(original);
+    expect(resource.setAppends).not.toHaveBeenCalled();
+    expect(resource.refresh).not.toHaveBeenCalled();
+  });
+
+  it('retains resource-based sorting in details fields', async () => {
+    const { field, resource } = setup('DetailsItemModel');
+    field.setProps({ value: [{ id: 1 }] });
+    render(field.render());
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'name', order: 'ascend' },
+        {
+          action: 'sort',
+          currentDataSource: [],
+        },
+      );
+    });
+    expect(resource.setAppends).toHaveBeenCalledWith(['staff(sort=name)']);
+    expect(resource.refresh).toHaveBeenCalledOnce();
+  });
+
+  it('uses the configured sort field and keeps local ordering when paginating', async () => {
+    const { field, resource } = setup();
+    const rows = [{ id: 10 }, { id: 2 }];
+    field.setProps({ value: rows });
+    render(field.render());
+    const column: NonNullable<TableOptions['columns']>[number] & { sortField: string } = {
+      sortField: 'org.staff.id',
+    };
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'other', column, order: 'ascend' },
+        {
+          action: 'sort',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual([rows[1], rows[0]]);
+    await act(async () => {
+      await tableProps().onChange?.(
+        { current: 2 },
+        {},
+        {},
+        {
+          action: 'paginate',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual([rows[1], rows[0]]);
+    expect(resource.refresh).not.toHaveBeenCalled();
+  });
+
+  it('follows form association changes without writing displayed records into the form', async () => {
+    vi.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+    const { engine, parent, resource } = setup();
+    let form: FormInstance;
+    const firstOrg = { id: 1, staff: [{ id: 1, name: 'Alice' }] };
+    const secondOrg = { id: 2, staff: [{ id: 2, name: 'Bob' }] };
+    function TestForm() {
+      const [formInstance] = Form.useForm();
+      form = formInstance;
+      parent.context.defineProperty('form', { value: formInstance });
+      parent.context.defineProperty('formValues', { get: () => formInstance.getFieldsValue(true), cache: false });
+      return (
+        <Form form={formInstance} initialValues={{ org: firstOrg, note: 'unsaved' }}>
+          <FlowModelProvider model={parent}>{parent.renderItem()}</FlowModelProvider>
+        </Form>
+      );
+    }
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestForm />
+      </FlowEngineProvider>,
+    );
+    await waitFor(() => expect(screen.getByTestId('rows').textContent).toContain('Alice'));
+    act(() => form.setFieldValue('org', secondOrg));
+    await waitFor(() => expect(screen.getByTestId('rows').textContent).toContain('Bob'));
+    expect(form.getFieldsValue(true)).toEqual({ org: secondOrg, note: 'unsaved' });
+    act(() => form.setFieldValue('org', null));
+    await waitFor(() => expect(tableProps().dataSource).toEqual([]));
+    expect(form.getFieldsValue(true)).toEqual({ org: null, note: 'unsaved' });
+    expect(resource.refresh).not.toHaveBeenCalled();
+  });
+
+  it('keeps nested column paths and column configuration when switching components', async () => {
+    const { parent, field } = setup();
+    vi.spyOn(parent, 'save').mockResolvedValue(undefined);
+    const column = field.addSubModel('columns', {
+      use: 'TableColumnModel',
+      stepParams: {
+        fieldSettings: {
+          init: { dataSourceKey: 'main', collectionName: 'posts', fieldPath: 'org.staff.name' },
+        },
+      },
+      subModels: { field: { use: 'DisplayTextFieldModel' } },
+    });
+    expect(field.context.prefixFieldPath).toBe('org.staff');
+    expect(field.collection.name).toBe('users');
+    const columnField = column.subModels.field as DisplayTextFieldModel;
+    const createFork = vi.spyOn(columnField, 'createFork');
+    (column as TableColumnModel).renderItem()(undefined, { id: 1, name: 'Alice' }, 0);
+    expect(createFork.mock.results[0].value.props.value).toBe('Alice');
+    expect(createFork.mock.results[0].value.context.record).toEqual({ id: 1, name: 'Alice' });
+    await rebuildFieldSubModel({ parentModel: parent, targetUse: 'DisplayTextFieldModel' });
+    await rebuildFieldSubModel({ parentModel: parent, targetUse: 'DisplaySubTableFieldModel' });
+    const rebuilt = parent.subModels.field as DisplaySubTableFieldModel;
+    expect(rebuilt.uid).toBe(field.uid);
+    expect(rebuilt.serialize().subModels.columns[0]).toMatchObject({
+      uid: column.uid,
+      stepParams: { fieldSettings: { init: { fieldPath: 'org.staff.name' } } },
+    });
+  });
+});

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

@@ -8,6 +8,7 @@
  */
 
 import { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
 import React from 'react';
 import { DisplayMarkdown } from '../../internal/components/Markdown/DisplayMarkdown';
 import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
@@ -15,7 +16,7 @@ import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
 export class DisplayHtmlFieldModel extends DisplayTitleFieldModel {
   public renderComponent(value) {
     const { textOnly = true } = this.props;
-    return <DisplayMarkdown {...this.props} textOnly={textOnly} value={value} />;
+    return <DisplayMarkdown {...this.props} sanitizeHtml={sanitizeRichTextHtml} textOnly={textOnly} value={value} />;
   }
 }
 

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

@@ -58,7 +58,7 @@ export class InputFieldModel extends FieldModel {
       return <ScanInput {...this.props} />;
     }
     const { enableScan, disableManualInput, ...inputProps } = this.props;
-    return <IMESafeInput {...inputProps} />;
+    return <IMESafeInput {...inputProps} style={{ verticalAlign: 'top', ...inputProps.style }} />;
   }
 }
 

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

@@ -0,0 +1,74 @@
+/**
+ * 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 { act, render } from '@nocobase/test/client';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { RichTextField } from '..';
+
+const mockState = vi.hoisted(() => ({
+  onChange: undefined as ((value: string) => void) | undefined,
+  value: undefined as unknown,
+}));
+
+vi.mock('../../../../../flow-compat', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../../../flow-compat')>();
+  return {
+    ...actual,
+    lazy: () => (props: { onChange?: (value: string) => void; value?: unknown }) => {
+      mockState.onChange = props.onChange;
+      mockState.value = props.value;
+      return null;
+    },
+  };
+});
+
+describe('RichTextField edit mode sanitization', () => {
+  beforeEach(() => {
+    mockState.onChange = undefined;
+    mockState.value = undefined;
+  });
+
+  it('sanitizes stored HTML before passing it to ReactQuill', () => {
+    const payload = '<p>safe</p><img src="https://example.com/image.png" onerror="alert(1)"><script>alert(1)</script>';
+
+    render(<RichTextField value={payload} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(sanitizeRichTextHtml(payload));
+  });
+
+  it('preserves Delta values', () => {
+    const delta = { ops: [{ insert: 'safe\n' }] };
+
+    render(<RichTextField value={delta} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(delta);
+  });
+
+  it('does not normalize active editor feedback', () => {
+    const editorValue = '<p>Hello<br>World</p>';
+    expect(sanitizeRichTextHtml(editorValue)).not.toBe(editorValue);
+
+    const { rerender } = render(<RichTextField value="" onChange={vi.fn()} />);
+    act(() => mockState.onChange?.(editorValue));
+    rerender(<RichTextField value={editorValue} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(editorValue);
+  });
+
+  it('sanitizes subsequent external values', () => {
+    const payload = '<img src=x onerror="alert(1)">';
+    const { rerender } = render(<RichTextField value="" onChange={vi.fn()} />);
+
+    rerender(<RichTextField value={payload} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(sanitizeRichTextHtml(payload));
+  });
+});

package/src/flow/models/fields/RichTextFieldModel/index.tsx

@@ -9,6 +9,8 @@
 
 import React from 'react';
 import { largeField, EditableItemModel } from '@nocobase/flow-engine';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import type ReactQuillComponent from 'react-quill';
 import { lazy } from '../../../../flow-compat';
 import { useRichTextStyles } from './style';
 import { FieldModel } from '../../base';
@@ -26,6 +28,8 @@ const ReactQuill = lazy(async () => {
   return import('react-quill');
 });
 
+type ReactQuillValue = ReactQuillComponent.ReactQuillProps['value'];
+
 export const RichTextField = (props) => {
   const richTextClass = useRichTextStyles();
   const boundsClass = React.useMemo(() => `quill-bounds-${Math.random().toString(36).slice(2, 9)}`, []);
@@ -83,19 +87,36 @@ export const RichTextField = (props) => {
     'break',
   ];
   const { value, onChange, disabled, modules: propsModules, formats: propsFormats } = props;
+  const previousIncomingValueRef = React.useRef(value);
+  const pendingEditorValueRef = React.useRef<{ value: ReactQuillValue }>();
+  const [editorValue, setEditorValue] = React.useState<ReactQuillValue>(() =>
+    typeof value === 'string' ? sanitizeRichTextHtml(value) : value,
+  );
+
+  React.useEffect(() => {
+    if (Object.is(value, previousIncomingValueRef.current)) {
+      return;
+    }
+    previousIncomingValueRef.current = value;
+    const pendingEditorValue = pendingEditorValueRef.current;
+    pendingEditorValueRef.current = undefined;
+    if (pendingEditorValue && Object.is(value, pendingEditorValue.value)) {
+      return;
+    }
+    setEditorValue(typeof value === 'string' ? sanitizeRichTextHtml(value) : value);
+  }, [value]);
 
   return (
     <ReactQuill
       className={`${richTextClass} ${boundsClass}`}
       modules={propsModules || modules}
       formats={propsFormats || formats}
-      value={value}
+      value={editorValue}
       onChange={(value) => {
-        if (value === '<p><br></p>') {
-          onChange('');
-        } else {
-          onChange(value);
-        }
+        const nextValue = value === '<p><br></p>' ? '' : value;
+        pendingEditorValueRef.current = { value: nextValue };
+        setEditorValue(nextValue);
+        onChange(nextValue);
       }}
       readOnly={disabled}
       bounds={`.${boundsClass}`}

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

@@ -13,6 +13,7 @@ import React from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { MobileSelect } from './mobile-components/MobileSelect';
 import { enumToOptions, getSelectedEnumLabels, translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
+import { syncQuickEditPreventClose } from '../../internal/utils/quickEditViewContainer';
 
 const getOriginalEnumOptions = (model: SelectFieldModel) => {
   const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, model.translate) || [];
@@ -62,6 +63,10 @@ export class SelectFieldModel extends FieldModel {
           this.props.onChange?.(nextValue?.value);
         }}
         options={options}
+        onDropdownVisibleChange={(open) => {
+          syncQuickEditPreventClose(this, open);
+          this.props.onDropdownVisibleChange?.(open);
+        }}
         labelRender={(item) => item.label}
         maxTagCount="responsive"
         maxTagPlaceholder={(omittedValues) => (

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

@@ -27,6 +27,22 @@ function createInputFieldModel(props?: Record<string, unknown>) {
 }
 
 describe('InputFieldModel', () => {
+  it('aligns plain inputs with the top of other filter form controls', () => {
+    const model = createInputFieldModel();
+
+    render(<>{model.render()}</>);
+
+    expect(screen.getByRole('textbox')).toHaveStyle({ verticalAlign: 'top' });
+  });
+
+  it('preserves explicitly configured input styles', () => {
+    const model = createInputFieldModel({ style: { verticalAlign: 'middle', width: 200 } });
+
+    render(<>{model.render()}</>);
+
+    expect(screen.getByRole('textbox')).toHaveStyle({ verticalAlign: 'middle', width: '200px' });
+  });
+
   it('renders the normal input when scan input is disabled', () => {
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
     const model = createInputFieldModel({ disableManualInput: true, enableScan: false });

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

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { SelectFieldModel } from '../SelectFieldModel';
 
 function mockT(text: string) {
@@ -40,4 +40,32 @@ describe('SelectFieldModel', () => {
 
     expect(element.props.value).toEqual({ label: '是', value: true });
   });
+
+  it('keeps the quick edit popover open while the dropdown is open', () => {
+    vi.useFakeTimers();
+    try {
+      const update = vi.fn();
+      const onDropdownVisibleChange = vi.fn();
+      const model = {
+        props: { value: undefined, onDropdownVisibleChange },
+        parent: { use: 'QuickEditFormModel', viewContainer: { update } },
+        context: { collectionField: { uiSchema: { enum: [] } } },
+        translate: mockT,
+      } as unknown as SelectFieldModel;
+
+      const element = SelectFieldModel.prototype.render.call(model) as React.ReactElement;
+
+      element.props.onDropdownVisibleChange(true);
+      expect(update).toHaveBeenCalledWith({ preventClose: true });
+      expect(onDropdownVisibleChange).toHaveBeenCalledWith(true);
+
+      element.props.onDropdownVisibleChange(false);
+      expect(onDropdownVisibleChange).toHaveBeenCalledWith(false);
+      expect(update).toHaveBeenCalledTimes(1);
+      vi.runAllTimers();
+      expect(update).toHaveBeenLastCalledWith({ preventClose: false });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });

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

@@ -263,6 +263,7 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
     <>
       <Select
         {...restProps}
+        disabled={disabled}
         dropdownStyle={buildDropdownStyle(dropdownStyle)}
         fieldNames={fieldNames}
         options={realOptions}

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

@@ -388,6 +388,26 @@ describe('MobileLazySelect', () => {
     resetMockState();
   });
 
+  it.each([false, true])('updates the disabled trigger state in %s multiple mode', (multiple) => {
+    const onDropdownVisibleChange = vi.fn();
+    const { rerender } = renderMobileLazySelect({ multiple, onDropdownVisibleChange });
+
+    rerender({ disabled: true });
+
+    expect(mockState.selectProps?.disabled).toBe(true);
+    act(() => {
+      mockState.selectProps?.onClick?.();
+    });
+    expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
+    expect(onDropdownVisibleChange).not.toHaveBeenCalled();
+
+    rerender({ disabled: false });
+
+    expect(mockState.selectProps?.disabled).toBe(false);
+    openLazyPopup();
+    expect(onDropdownVisibleChange).toHaveBeenCalledWith(true);
+  });
+
   it('renders a translated cancel action after searching', () => {
     renderMobileLazySelect();
 

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -201,12 +201,12 @@ function TopbarInternalSettingsLabel(props: { title: React.ReactNode; path?: str
       adminRoutePath: getTopbarAdminRoutePath(app),
     });
 
+    if (!shouldOpenInNewWindow) {
+      return <Link to={stripTopbarRouterBasePath(targetPathInCurrentApp, basename)}>{props.title}</Link>;
+    }
+
     return (
-      <a
-        href={href}
-        target={shouldOpenInNewWindow ? '_blank' : undefined}
-        rel={shouldOpenInNewWindow ? 'noopener noreferrer' : undefined}
-      >
+      <a href={href} target="_blank" rel="noopener noreferrer">
         {props.title}
       </a>
     );