Skip to content

fix(components): translate the built-in select branch's empty copy (#3263) - #3271

Merged
xuyushun441-sys merged 1 commit into
mainfrom
claude/issue-3263-builtin-select-empty-i18n
Aug 3, 2026
Merged

fix(components): translate the built-in select branch's empty copy (#3263)#3271
xuyushun441-sys merged 1 commit into
mainfrom
claude/issue-3263-builtin-select-empty-i18n

Conversation

@xuyushun441-sys

@xuyushun441-sysxuyushun441-sys commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Fixes#3263

问题

packages/components/src/renderers/form/form.tsx 的内建 select 分支(命中 BUILTIN_FIELD_TYPES 时的内联渲染,走不到 field: 注册表)渲染的是硬编码英文:

{emptyHint || 'No options available'}

而紧挨着它的门控提示早就走了 i18n(t('fields.options.selectFirst'),objectui#3231)。也就是说同一个 widget 在 zh 会话里会中途换语言:被 dependsOn 门控时读到「请先选择Country」,用户把父字段填成一个匹配不到任何选项的值之后,同一个框立刻变成英文 "No options available"。这是 #3231 scope fence 刻意留下的最后一块,不是遗漏。

改动

  1. 分支改为 t('fields.options.empty') —— 与已注册选项 widget(packages/fields 的 OptionsEmptyState)回落时用的同一个 key,十个语言包里已就位,packages/i18n 不需要改。
  2. 在 useSafeFormTranslation 的 defaults map 里补 'fields.options.empty': 'No options available' —— 与 fields.options.selectFirst 在那里的做法一致。无 provider 时渲染结果逐字不变,所以现有的英文断言(form-cascading-select.test.tsx、plugin-form/selectOptions.test.tsx)不需要动,也确实全绿。
  3. 空状态从内联的 div 提成同文件里的小组件 BuiltinSelectEmptyState。原因:renderFieldComponent 是普通 helper 而非组件,它在「已注册 widget」那条路径上会提前 return,在那里调 hook 就是条件调用(rules-of-hooks)。组件里 ...rest 会转发下去,因为 FormControl 是 Radix Slot,控件的 id / aria-describedby / aria-invalid 是它塞进来的 —— 丢掉 rest props 会让该字段的 label 指向一个不存在的 id,这一点有测试钉住。

边界(按 issue 与派发说明)

没有把内建分支和 packages/fields 的 OptionsEmptyState 统一成一个组件:不同包、不同渲染路径(内联分支 vs. 注册表),该共享的只有 i18n key,不是组件 —— 合并会把一条路径的 DOM 结构和 props 约束强加给另一条。

packages/i18n 未改动(两个 key 由 #3231 补齐,已核对 en.ts / zh.ts)。

测试

两个新文件,拆开是必须的:挂载 I18nProvider 会把它的实例注册成 react-i18next 的全局默认,同一模块图里就再也观察不到「无 provider」状态(与 OptionsEmptyState.test.tsx / OptionsEmptyState.no-provider.test.tsx 的拆法一致)。

  • form-builtin-select-empty-i18n.test.tsx —— zh 下渲染「暂无可选项」;门控句渲染「请先选择Country」;以及门控解除后两句话仍在同一种语言里(这条正是原缺陷暴露的那个转换)。
  • form-builtin-select-empty-default.test.tsx —— 无 provider 时回落到逐字相同的英文;以及空状态仍是被 label 关联的表单控件(label 的 for 等于该 div 的 id,且带 aria-describedby)。
pnpm exec vitest run --maxWorkers=2 packages/components/src/renderers/form/ \
packages/plugin-form/src/selectOptions.test.tsx \
packages/fields/src/widgets/OptionsEmptyState*.test.tsx
Test Files 21 passed (21)
Tests 112 passed (112)
pnpm --filter @object-ui/components test Test Files 20 passed / Tests 177 passed
pnpm --filter @object-ui/components type-check 通过

变异验证(把 t('fields.options.empty') 改回英文字面量后重跑):

Test Files 1 failed | 1 passed (2)
Tests 2 failed | 3 passed (5)

失败现场的 DOM dump 里,zh provider 下那个 div 渲染的正是 No options available;顺带确认 id="_r_4_-form-item" 与 aria-describedby 仍然落在这个 div 上(即 rest props 转发是对的)。

Changeset:.changeset/builtin-select-empty-state-translated.md(patch,仅 @object-ui/components)—— 非英文会话不再在这里看到英文,属用户可见变化。

🤖 Generated with Claude Code

https://claude.ai/code/session_01NVPjPzmmAJ2Ngtvgg5MSRa

Generated by Claude Code

@claude
fix(components): translate the built-in select branch's empty copy (#…
8620af9
…3263)
The inline `type: 'select'` branch — the one taken before the `field:`
registry is consulted (BUILTIN_FIELD_TYPES) — rendered a hardcoded
`'No options available'`, while the dependency-gate sentence right next to
it already went through `t()` (`fields.options.selectFirst`, #3231). A `zh`
session therefore saw one widget switch languages mid-interaction: gated read
Chinese, and the moment the parent value matched no option it flipped to
English.
It now renders `t('fields.options.empty')` — the same key the registered
option widgets fall back to — with the English default added to
`useSafeFormTranslation`'s defaults map, so a form with no I18nProvider
produces the byte-identical string it produced before.
The box moved into a small `BuiltinSelectEmptyState` component in the same
file: `renderFieldComponent` is a plain helper that early-returns on the
registered-widget path, so a hook called there would run conditionally. It
forwards its rest props because `<FormControl>` is a Radix `Slot` supplying
the control's `id`/`aria-describedby`.
Not unified with `@object-ui/fields`' `OptionsEmptyState` — different package,
different render path. The two share the i18n key, not a component.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NVPjPzmmAJ2Ngtvgg5MSRa
@vercel

vercelBot commented Aug 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
ProjectDeploymentActionsUpdated (UTC)
objectuiIgnoredIgnoredAug 3, 2026 9:55am

Request Review

@github-actions

github-actionsBot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

✅ Console Performance Budget

MetricValueBudget
Main entry (gzip)28.1 KB350 KB
Entry fileindex-jMXoCnx9.js—
StatusPASS—

📦 Bundle Size Report

PackageSizeGzipped
app-shell (index.js)8.47KB3.09KB
app-shell (runtime-config.js)7.42KB2.32KB
app-shell (types.js)0.01KB0.04KB
app-shell (urlParams.js)7.57KB2.97KB
auth (AuthContext.js)0.31KB0.24KB
auth (AuthGuard.js)1.17KB0.53KB
auth (AuthProvider.js)22.10KB4.37KB
auth (AuthShell.js)3.49KB1.40KB
auth (ForgotPasswordForm.js)12.12KB3.41KB
auth (LoginForm.js)17.86KB5.29KB
auth (PreviewBanner.js)0.90KB0.50KB
auth (RegisterForm.js)6.43KB2.09KB
auth (SocialSignInButtons.js)9.60KB3.89KB
auth (UserMenu.js)3.40KB1.22KB
auth (auth-gate-events.js)1.29KB0.66KB
auth (authStyles.js)5.04KB1.72KB
auth (createAuthClient.js)35.76KB9.11KB
auth (createAuthenticatedFetch.js)4.37KB1.69KB
auth (index.js)2.35KB1.07KB
auth (org-roles.js)6.66KB2.78KB
auth (phone-identifier.js)1.11KB0.66KB
auth (types.js)0.59KB0.35KB
auth (useAuth.js)4.91KB0.87KB
auth (useIsWorkspaceAdmin.js)1.61KB0.85KB
collaboration (CommentThread.js)18.38KB4.49KB
collaboration (LiveCursors.js)3.17KB1.27KB
collaboration (PresenceAvatars.js)3.65KB1.42KB
collaboration (PresenceProvider.js)2.79KB1.13KB
collaboration (index.js)1.25KB0.53KB
collaboration (useCommentSearch.js)1.98KB0.88KB
collaboration (useConflictResolution.js)7.75KB1.86KB
collaboration (useMentionNotifications.js)1.81KB0.68KB
collaboration (usePresence.js)6.33KB1.84KB
collaboration (useRealtimeSubscription.js)7.91KB2.01KB
components (index.js)476.42KB104.61KB
core (index.js)2.25KB0.80KB
create-plugin (index.js)9.28KB2.98KB
data-objectstack (index.js)136.23KB34.75KB
fields (index.js)223.53KB54.78KB
i18n (LocalizationContext.js)1.76KB0.96KB
i18n (currency.js)1.22KB0.64KB
i18n (i18n.js)4.32KB1.77KB
i18n (index.js)2.46KB0.96KB
i18n (pickLocalized.js)1.70KB0.83KB
i18n (provider.js)5.37KB1.72KB
i18n (useObjectLabel.js)26.14KB6.07KB
i18n (useSafeTranslation.js)3.26KB1.44KB
layout (index.js)37.96KB10.54KB
mobile (MobileProvider.js)0.92KB0.49KB
mobile (ResponsiveContainer.js)0.94KB0.38KB
mobile (breakpoints.js)1.51KB0.70KB
mobile (createOfflineDataSource.js)5.61KB1.74KB
mobile (index.js)1.50KB0.62KB
mobile (offlineQueue.js)3.91KB1.35KB
mobile (pwa.js)0.97KB0.49KB
mobile (serviceWorker.js)1.48KB0.62KB
mobile (serviceWorkerSource.js)3.41KB1.48KB
mobile (useBreakpoint.js)1.54KB0.65KB
mobile (useGesture.js)6.96KB1.98KB
mobile (useOfflineSync.js)1.99KB0.72KB
mobile (usePullToRefresh.js)2.53KB0.85KB
mobile (useResponsive.js)0.71KB0.42KB
mobile (useResponsiveConfig.js)1.36KB0.63KB
mobile (useSpecGesture.js)4.05KB1.53KB
mobile (useTouchTarget.js)1.01KB0.54KB
permissions (MePermissionsProvider.js)8.75KB3.06KB
permissions (PermissionContext.js)0.31KB0.25KB
permissions (PermissionGuard.js)0.89KB0.45KB
permissions (PermissionProvider.js)3.67KB1.12KB
permissions (evaluator.js)4.41KB1.44KB
permissions (index.js)0.91KB0.41KB
permissions (store.js)0.91KB0.42KB
permissions (useFieldPermissions.js)1.28KB0.52KB
permissions (usePermissions.js)1.55KB0.71KB
plugin-ai (index.js)15.71KB3.79KB
plugin-calendar (index.js)44.98KB12.37KB
plugin-charts (index.js)60.54KB17.13KB
plugin-chatbot (index.js)180.09KB42.72KB
plugin-dashboard (index.js)112.01KB28.86KB
plugin-designer (index.js)210.51KB42.51KB
plugin-detail (index.js)230.56KB56.80KB
plugin-editor (index.js)2.46KB1.10KB
plugin-form (index.js)111.49KB26.95KB
plugin-gantt (index.js)162.25KB39.55KB
plugin-grid (index.js)185.08KB49.04KB
plugin-kanban (index.js)47.89KB13.18KB
plugin-list (index.js)104.94KB25.32KB
plugin-map (index.js)16.81KB5.24KB
plugin-markdown (index.js)13.72KB4.69KB
plugin-report (index.js)40.55KB10.59KB
plugin-timeline (index.js)25.76KB7.33KB
plugin-tree (index.js)8.34KB2.82KB
plugin-view (index.js)83.67KB20.43KB
providers (DataSourceProvider.js)0.75KB0.39KB
providers (MetadataProvider.js)1.37KB0.59KB
providers (ThemeProvider.js)1.90KB0.85KB
providers (UploadProvider.js)11.71KB3.53KB
providers (index.js)0.44KB0.22KB
providers (types.js)0.01KB0.04KB
react-runtime (index.js)5.67KB2.37KB
react (LazyPluginLoader.js)3.77KB1.33KB
react (SchemaRenderer.js)19.28KB6.38KB
react (data-invalidation.js)5.05KB2.08KB
react (index.js)1.02KB0.55KB
react (spec-input.js)0.20KB0.18KB
sdui-parser (codegen.js)4.09KB1.74KB
sdui-parser (index.js)4.47KB2.03KB
sdui-parser (parse.js)10.04KB2.82KB
sdui-parser (types.js)0.29KB0.24KB
sdui-parser (validate.js)4.69KB1.48KB
types (ai.js)0.20KB0.17KB
types (api-types.js)0.20KB0.18KB
types (app.js)2.87KB0.99KB
types (base.js)0.20KB0.18KB
types (blocks.js)0.20KB0.18KB
types (complex.js)0.20KB0.18KB
types (crud.js)0.20KB0.18KB
types (data-display.js)0.20KB0.18KB
types (data-protocol.js)0.20KB0.19KB
types (data.js)0.20KB0.18KB
types (designer.js)1.87KB0.85KB
types (disclosure.js)0.20KB0.18KB
types (error-code.js)1.54KB0.88KB
types (feedback.js)0.20KB0.18KB
types (field-types.js)0.20KB0.18KB
types (form.js)0.20KB0.18KB
types (http-retry.js)4.32KB2.02KB
types (index.js)2.46KB1.21KB
types (layout.js)0.20KB0.18KB
types (managed-by.js)0.19KB0.18KB
types (mobile.js)0.20KB0.18KB
types (navigation.js)0.20KB0.18KB
types (objectql.js)0.20KB0.18KB
types (overlay.js)0.20KB0.18KB
types (permissions.js)0.20KB0.18KB
types (plugin-scope.js)0.20KB0.18KB
types (record-components.js)0.20KB0.19KB
types (record-semantics.js)1.28KB0.67KB
types (registry.js)0.20KB0.18KB
types (reports.js)0.20KB0.18KB
types (spec-report.js)5.05KB1.93KB
types (system-fields.js)3.33KB1.54KB
types (theme.js)0.20KB0.18KB
types (ui-action.js)3.40KB1.71KB
types (views.js)0.20KB0.18KB
types (widget.js)0.20KB0.18KB

Size Limits

  • ✅ Core packages should be < 50KB gzipped
  • ✅ Component packages should be < 100KB gzipped
  • ⚠️ Plugin packages should be < 150KB gzipped

@xuyushun441-sys
xuyushun441-sys marked this pull request as ready for review August 3, 2026 10:08
@xuyushun441-sysxuyushun441-sys mentioned this pull request Aug 3, 2026
Closed
@xuyushun441-sys
xuyushun441-sys added this pull request to the merge queueAug 3, 2026
Merged via the queue into main with commit a7651e6Aug 3, 2026
17 checks passed
@xuyushun441-sys
xuyushun441-sys deleted the claude/issue-3263-builtin-select-empty-i18n branch August 3, 2026 10:08
@xuyushun441-sysxuyushun441-sys mentioned this pull request Aug 3, 2026
Closed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

package: componentstests

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

表单渲染器内建 select 分支的空状态文案仍是硬编码英文(form.tsx:1843)

2 participants

@xuyushun441-sys@claude