@nocobase/client-v2 3.0.0-alpha.8 → 3.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "3.0.0-alpha.8",
-    "@nocobase/flow-engine": "3.0.0-alpha.8",
-    "@nocobase/sdk": "3.0.0-alpha.8",
-    "@nocobase/shared": "3.0.0-alpha.8",
-    "@nocobase/utils": "3.0.0-alpha.8",
+    "@nocobase/evaluators": "3.0.0-alpha.9",
+    "@nocobase/flow-engine": "3.0.0-alpha.9",
+    "@nocobase/sdk": "3.0.0-alpha.9",
+    "@nocobase/shared": "3.0.0-alpha.9",
+    "@nocobase/utils": "3.0.0-alpha.9",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -48,5 +48,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "ce017f3deb8b2414c6b13818042c4187270d1d8a"
+  "gitHead": "82aaad40c5be1120839a11301a48e7fe690f48c3"
 }

package/src/__tests__/settings-center.test.tsx

@@ -8,9 +8,10 @@
  */
 
 import { ACLRolesCheckProvider, Plugin } from '@nocobase/client-v2';
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import React from 'react';
 import { message } from 'antd';
+import { vi } from 'vitest';
 import { AdminSettingsLayoutModel as ClientV2AdminSettingsLayoutModel } from '../settings-center';
 import { AdminSettingsLayoutModel as ClientV1AdminSettingsLayoutModel } from '../../../client/src/pm/AdminSettingsLayoutModel';
 import zhCN from '../../../client/src/locale/zh-CN.json';
@@ -253,6 +254,50 @@ describe('settings center', () => {
     expect(await screen.findByText('Demo plugin')).toBeInTheDocument();
   });
 
+  it('should redirect to the admin app when the role cannot access settings', async () => {
+    const originalLocation = globalThis.window.location;
+    const originalModernClientPrefix = window.__nocobase_modern_client_prefix__;
+    const replace = vi.fn();
+    Object.defineProperty(globalThis.window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        replace,
+      },
+    });
+    window.__nocobase_modern_client_prefix__ = 'v';
+
+    try {
+      const app = createMockSettingsClient({
+        plugins: [SettingsBuildInPlugin, TestAclPlugin],
+        router: { type: 'memory', initialEntries: ['/settings/system-settings'] },
+      });
+      mockAdminRuntime(app, {
+        snippets: ['!pm', '!pm.system-settings.system-settings'],
+      });
+
+      await renderApp(app);
+      await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+      await waitFor(() => {
+        expect(replace).toHaveBeenCalledWith('/v/admin');
+      });
+      expect(
+        screen.queryByRole('heading', { name: 'Your current role cannot access Settings' }),
+      ).not.toBeInTheDocument();
+    } finally {
+      Object.defineProperty(globalThis.window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+      if (originalModernClientPrefix === undefined) {
+        delete window.__nocobase_modern_client_prefix__;
+      } else {
+        window.__nocobase_modern_client_prefix__ = originalModernClientPrefix;
+      }
+    }
+  });
+
   it('should hide plugin-manager menu item when pm snippet is missing', async () => {
     const app = createMockSettingsClient({
       plugins: [SettingsBuildInPlugin, TestAclPlugin],
@@ -274,7 +319,9 @@ describe('settings center', () => {
       plugins: [SettingsBuildInPlugin, TestAclPlugin],
       router: { type: 'memory', initialEntries: ['/settings/unknown'] },
     });
-    mockAdminRuntime(app);
+    mockAdminRuntime(app, {
+      snippets: ['!pm', '!pm.system-settings.system-settings'],
+    });
 
     await renderApp(app);
     await waitForGetRequests(app, ['/auth:check', 'roles:check']);
@@ -284,6 +331,7 @@ describe('settings center', () => {
     expect(
       within(result).getByText('The settings page you requested does not exist or has been removed.'),
     ).toBeInTheDocument();
+    expect(app.router.state.location.pathname).toBe('/settings/unknown');
   });
 
   it('should allow direct access to hidden page without showing menu entry', async () => {
@@ -311,6 +359,7 @@ describe('settings center', () => {
 
     expect(await screen.findByText('Hidden settings page')).toBeInTheDocument();
     expect(screen.queryByRole('menuitem', { name: 'Hidden demo' })).not.toBeInTheDocument();
+    expect(app.router.state.location.pathname).toBe('/settings/hidden-demo');
   });
 
   it('should show route empty state when direct access page has no permission', async () => {
@@ -344,43 +393,67 @@ describe('settings center', () => {
     expect(within(result).getByRole('heading', { name: '当前角色无权访问设置中心' })).toBeInTheDocument();
     expect(within(result).getByText('请切换至有权限的角色，或联系管理员获取访问权限。')).toBeInTheDocument();
     expect(screen.queryByText('Secure settings page')).not.toBeInTheDocument();
+    expect(app.router.state.location.pathname).toBe('/settings/secure-demo');
   });
 
-  it('should deny a protected child page when a sibling remains visible', async () => {
-    class MixedAccessSettingsPlugin extends Plugin {
+  it('should redirect a denied settings tab to the first accessible tab', async () => {
+    const renderDeniedTab = vi.fn(() => <div>Denied tab content</div>);
+
+    class ProtectedSettingsTabsPlugin extends Plugin {
       async load() {
-        this.pluginSettingsManager.addMenuItem({ key: 'mixed-access', title: 'Mixed access' });
+        this.pluginSettingsManager.addMenuItem({ key: 'protected-tabs', title: 'Protected tabs' });
         this.pluginSettingsManager.addPageTabItem({
-          menuKey: 'mixed-access',
-          key: 'index',
-          title: 'Allowed settings',
-          Component: () => <div>Allowed settings page</div>,
+          menuKey: 'protected-tabs',
+          key: 'a-second',
+          title: 'Second accessible tab',
+          aclSnippet: 'pm.protected-tabs.second',
+          sort: 20,
+          Component: () => <div>Second accessible tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'protected-tabs',
+          key: 'z-first',
+          title: 'First accessible tab',
+          aclSnippet: 'pm.protected-tabs.first',
+          sort: 10,
+          Component: () => <div>First accessible tab content</div>,
         });
         this.pluginSettingsManager.addPageTabItem({
-          menuKey: 'mixed-access',
-          key: 'restricted',
-          title: 'Restricted settings',
-          aclSnippet: 'pm.mixed-access.restricted',
-          Component: () => <div>Restricted settings page</div>,
+          menuKey: 'protected-tabs',
+          key: 'denied',
+          title: 'Denied tab',
+          aclSnippet: 'pm.protected-tabs.denied',
+          sort: 30,
+          Component: renderDeniedTab,
         });
       }
     }
 
     const app = createMockSettingsClient({
-      plugins: [SettingsBuildInPlugin, TestAclPlugin, MixedAccessSettingsPlugin],
-      router: { type: 'memory', initialEntries: ['/settings/mixed-access/restricted'] },
+      plugins: [SettingsBuildInPlugin, TestAclPlugin, ProtectedSettingsTabsPlugin],
+      router: { type: 'memory', initialEntries: ['/settings/protected-tabs/denied'] },
     });
     mockAdminRuntime(app, {
-      snippets: ['pm', 'pm.system-settings.system-settings', '!pm.mixed-access.restricted'],
+      snippets: ['pm', '!pm.protected-tabs.denied'],
     });
 
     await renderApp(app);
     await waitForGetRequests(app, ['/auth:check', 'roles:check']);
 
-    expect(
-      await screen.findByRole('heading', { name: 'Your current role cannot access Settings' }),
-    ).toBeInTheDocument();
-    expect(screen.queryByText('Restricted settings page')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/settings/protected-tabs/z-first');
+    });
+    expect(app.router.router.state.historyAction).toBe('REPLACE');
+    expect(await screen.findByText('First accessible tab content')).toBeInTheDocument();
+    expect(screen.queryByText('Denied tab content')).not.toBeInTheDocument();
+    expect(renderDeniedTab).not.toHaveBeenCalled();
+
+    await act(async () => {
+      await app.router.router.navigate('/settings/protected-tabs/a-second');
+    });
+
+    expect(await screen.findByText('Second accessible tab content')).toBeInTheDocument();
+    expect(app.router.router.state.location.pathname).toBe('/settings/protected-tabs/a-second');
   });
 
   it.each(['/settings/fallback-access', '/settings/fallback-access/'])(
@@ -424,6 +497,134 @@ describe('settings center', () => {
     },
   );
 
+  it('should skip an accessible dynamic tab when its route params cannot be resolved', async () => {
+    class DynamicSettingsTabsPlugin extends Plugin {
+      async load() {
+        this.pluginSettingsManager.addMenuItem({ key: 'dynamic-tabs', title: 'Dynamic tabs' });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-tabs',
+          key: ':name',
+          title: 'Dynamic tab',
+          aclSnippet: 'pm.dynamic-tabs.dynamic',
+          sort: 1,
+          Component: () => <div>Dynamic tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-tabs',
+          key: 'fallback',
+          title: 'Static fallback tab',
+          aclSnippet: 'pm.dynamic-tabs.fallback',
+          sort: 2,
+          Component: () => <div>Static fallback tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-tabs',
+          key: 'denied',
+          title: 'Denied tab',
+          aclSnippet: 'pm.dynamic-tabs.denied',
+          sort: 3,
+          Component: () => <div>Denied dynamic tab content</div>,
+        });
+      }
+    }
+
+    const app = createMockSettingsClient({
+      plugins: [SettingsBuildInPlugin, TestAclPlugin, DynamicSettingsTabsPlugin],
+      router: { type: 'memory', initialEntries: ['/settings/dynamic-tabs/denied'] },
+    });
+    mockAdminRuntime(app, {
+      snippets: ['pm', '!pm.dynamic-tabs.denied'],
+    });
+
+    await renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/settings/dynamic-tabs/fallback');
+    });
+    expect(await screen.findByText('Static fallback tab content')).toBeInTheDocument();
+  });
+
+  it('should preserve resolved route params when redirecting between dynamic tabs', async () => {
+    class DynamicSiblingTabsPlugin extends Plugin {
+      async load() {
+        this.pluginSettingsManager.addMenuItem({ key: 'dynamic-siblings', title: 'Dynamic sibling tabs' });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-siblings',
+          key: ':name/channels',
+          title: 'Dynamic channels tab',
+          aclSnippet: 'pm.dynamic-siblings.channels',
+          sort: 1,
+          Component: () => <div>Dynamic channels tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-siblings',
+          key: ':name/logs',
+          title: 'Dynamic logs tab',
+          aclSnippet: 'pm.dynamic-siblings.logs',
+          sort: 2,
+          Component: () => <div>Dynamic logs tab content</div>,
+        });
+      }
+    }
+
+    const app = createMockSettingsClient({
+      plugins: [SettingsBuildInPlugin, TestAclPlugin, DynamicSiblingTabsPlugin],
+      router: { type: 'memory', initialEntries: ['/settings/dynamic-siblings/email:primary/logs'] },
+    });
+    mockAdminRuntime(app, {
+      snippets: ['pm', '!pm.dynamic-siblings.logs'],
+    });
+
+    await renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/settings/dynamic-siblings/email:primary/channels');
+    });
+    expect(await screen.findByText('Dynamic channels tab content')).toBeInTheDocument();
+  });
+
+  it('should resolve hyphenated route param names when redirecting between dynamic tabs', async () => {
+    class HyphenatedParamTabsPlugin extends Plugin {
+      async load() {
+        this.pluginSettingsManager.addMenuItem({ key: 'hyphenated-params', title: 'Hyphenated param tabs' });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'hyphenated-params',
+          key: ':data-source/channels',
+          title: 'Hyphenated channels tab',
+          aclSnippet: 'pm.hyphenated-params.channels',
+          sort: 1,
+          Component: () => <div>Hyphenated channels tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'hyphenated-params',
+          key: ':data-source/logs',
+          title: 'Hyphenated logs tab',
+          aclSnippet: 'pm.hyphenated-params.logs',
+          sort: 2,
+          Component: () => <div>Hyphenated logs tab content</div>,
+        });
+      }
+    }
+
+    const app = createMockSettingsClient({
+      plugins: [SettingsBuildInPlugin, TestAclPlugin, HyphenatedParamTabsPlugin],
+      router: { type: 'memory', initialEntries: ['/settings/hyphenated-params/email/logs'] },
+    });
+    mockAdminRuntime(app, {
+      snippets: ['pm', '!pm.hyphenated-params.logs'],
+    });
+
+    await renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/settings/hyphenated-params/email/channels');
+    });
+    expect(await screen.findByText('Hyphenated channels tab content')).toBeInTheDocument();
+  });
+
   it('should keep menu visible when menu acl is denied but child page is visible', async () => {
     class MenuAclPlugin extends Plugin {
       async load() {

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

@@ -72,6 +72,23 @@ const flowKeepMobileHorizontalClassName = css`
 function isGridDelegatedStep(flowKey: string, stepKey: string): boolean {
   return !!GRID_DELEGATED_STEP_KEYS[flowKey]?.has(stepKey);
 }
+
+interface FormModelWithAvailableData {
+  hasAvailableData(): boolean;
+}
+
+interface FormModelWithSubmit {
+  submit(): Promise<unknown>;
+}
+
+function hasAvailableDataCapability(model: object): model is FormModelWithAvailableData {
+  return 'hasAvailableData' in model && typeof model.hasAvailableData === 'function';
+}
+
+function hasSubmitCapability(model: object): model is FormModelWithSubmit {
+  return 'submit' in model && typeof model.submit === 'function';
+}
+
 export class FormBlockModel<
   T extends DefaultCollectionBlockModelStructure = DefaultCollectionBlockModelStructure,
 > extends CollectionBlockModel<T> {
@@ -87,6 +104,32 @@ export class FormBlockModel<
     return this.context.form as FormInstance;
   }
 
+  submitFromRunJs() {
+    if (hasAvailableDataCapability(this) && !this.hasAvailableData()) {
+      return;
+    }
+
+    const submitAction = this.mapSubModels('actions', (action) => action).find((action) =>
+      action.getFlow('submitSettings'),
+    );
+    if (submitAction) {
+      return submitAction.onClick(undefined);
+    }
+
+    const isCoreForm = ['CreateFormModel', 'EditFormModel'].some((modelName) => {
+      const ModelClass = this.flowEngine.getModelClass(modelName);
+      return ModelClass && this instanceof ModelClass;
+    });
+    if (this.context.publicFormRuntime || !isCoreForm || !hasSubmitCapability(this)) {
+      return;
+    }
+
+    this.submit().catch((error: unknown) => {
+      this.context.message.error(this.context.t('Save failed'));
+      console.error('Form submission error:', error);
+    });
+  }
+
   _defaultCustomModelClasses = {
     FormActionGroupModel: 'FormActionGroupModel',
     FormItemModel: 'FormItemModel',

package/src/flow/models/blocks/form/__tests__/runJsFormSubmit.test.ts

@@ -0,0 +1,131 @@
+/**
+ * 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, vi } from 'vitest';
+import { CreateFormModel } from '../CreateFormModel';
+import { EditFormModel } from '../EditFormModel';
+import { FormActionModel } from '../FormActionModel';
+
+function prepareFormModel<T extends CreateFormModel | EditFormModel>(model: T, publicFormRuntime = false) {
+  const engine = new FlowEngine();
+  engine.registerModels({ CreateFormModel, EditFormModel });
+  model.flowEngine = engine;
+  Object.defineProperty(model, 'context', {
+    value: {
+      publicFormRuntime,
+      message: { error: vi.fn() },
+      t: (value: string) => value,
+    },
+  });
+  return model;
+}
+
+function createSubmitAction() {
+  const onClick = vi.fn();
+  const action = {
+    getFlow: vi.fn((key: string) => (key === 'submitSettings' ? {} : undefined)),
+    onClick,
+  } as unknown as FormActionModel;
+  return { action, onClick };
+}
+
+describe('FormBlockModel.submitFromRunJs', () => {
+  it('dispatches the first action with a submitSettings flow', () => {
+    const { action, onClick } = createSubmitAction();
+    const { action: secondAction, onClick: secondOnClick } = createSubmitAction();
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(CreateFormModel.prototype), {
+        mapSubModels: (_key: string, callback: (item: FormActionModel) => FormActionModel) => [
+          callback(action),
+          callback(secondAction),
+        ],
+      }) as CreateFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(onClick).toHaveBeenCalledWith(undefined);
+    expect(secondOnClick).not.toHaveBeenCalled();
+  });
+
+  it('does not dispatch an edit submit action without an available record', () => {
+    const { action, onClick } = createSubmitAction();
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(EditFormModel.prototype), {
+        hasAvailableData: () => false,
+        mapSubModels: (_key: string, callback: (item: FormActionModel) => FormActionModel) => [callback(action)],
+      }) as EditFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('falls back to the core form submit handler when no submit action exists', () => {
+    const submit = vi.fn().mockResolvedValue(undefined);
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(CreateFormModel.prototype), {
+        mapSubModels: vi.fn(() => []),
+        submit,
+      }) as CreateFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(submit).toHaveBeenCalledOnce();
+  });
+
+  it('falls back to the core edit submit handler when a record exists', () => {
+    const submit = vi.fn().mockResolvedValue(undefined);
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(EditFormModel.prototype), {
+        hasAvailableData: () => true,
+        mapSubModels: vi.fn(() => []),
+        submit,
+      }) as EditFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(submit).toHaveBeenCalledOnce();
+  });
+
+  it('uses the core fallback for specialized form subclasses', () => {
+    class SpecializedCreateFormModel extends CreateFormModel {}
+
+    const submit = vi.fn().mockResolvedValue(undefined);
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(SpecializedCreateFormModel.prototype), {
+        mapSubModels: vi.fn(() => []),
+        submit,
+      }) as SpecializedCreateFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(submit).toHaveBeenCalledOnce();
+  });
+
+  it('does not use the core fallback for public forms without a submit action', () => {
+    const submit = vi.fn().mockResolvedValue(undefined);
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(CreateFormModel.prototype), {
+        mapSubModels: vi.fn(() => []),
+        submit,
+      }) as CreateFormModel,
+      true,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(submit).not.toHaveBeenCalled();
+  });
+});

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');
+  });
+});