Skip to content

fix(fields): #3343 AddressField/GeolocationField 子输入改用 useId() 前缀 id,消除同表单重复 DOM id - #3348

Merged
xuyushun441-sys merged 1 commit into
mainfrom
claude/issue-3343-address-geo-unique-ids
Aug 4, 2026
Merged

fix(fields): #3343 AddressField/GeolocationField 子输入改用 useId() 前缀 id,消除同表单重复 DOM id#3348
xuyushun441-sys merged 1 commit into
mainfrom
claude/issue-3343-address-geo-unique-ids

Conversation

@xuyushun441-sys

Copy link
Copy Markdown
Contributor

Fixes#3343

问题

AddressField 的五个子输入(street/city/state/zipCode/country)与 GeolocationField 的两个子输入(latitude/longitude)使用硬编码字面量 id。同一表单(或同一页面)渲染两个同类型字段即产生重复 DOM id,每个子 LabelhtmlFor 都解析到文档中第一个匹配元素——第二个字段的子 label 点击/朗读全部落在第一个字段的输入上。

修法(按 PM 裁决)

验证

命令结果
新增测试(两个同类型字段同表单)pnpm exec vitest run packages/fields/src/widgets/AddressField.uniqueIds.test.tsx packages/fields/src/widgets/GeolocationField.uniqueIds.test.tsx2 files / 4 tests passed
aria-invalid 账本守卫 + dom-leak 守卫pnpm exec vitest run packages/fields/src/__tests__/widget-aria-invalid-registry-e2e.test.tsx packages/fields/src/__tests__/widget-dom-leak-e2e.test.tsx2 files / 281 tests passed
fields 全量pnpm exec vitest run packages/fields --maxWorkers=248 files / 827 tests passed
类型检查 + 构建turbo run build --filter=@object-ui/fields(含 tsc10 tasks successful

破坏验证实录

将两个 widget 回退为硬编码 id 后重跑新测试——4 项断言全红,随后恢复修复:

FAIL AddressField.uniqueIds > two address fields … globally unique DOM ids
AssertionError: expected [ 'street', 'city', 'state', …(2) ] to deeply equal []
FAIL AddressField.uniqueIds > each sub-label of the SECOND field focuses that field's own input
AssertionError: "Street Address" must resolve into its OWN field, not the first one: expected false to be true
FAIL GeolocationField.uniqueIds > two geolocation fields … globally unique DOM ids
AssertionError: expected [ 'latitude', 'longitude' ] to deeply equal []
FAIL GeolocationField.uniqueIds > each sub-label of the SECOND field focuses that field's own input
AssertionError: "Latitude" must resolve into its OWN field, not the first one: expected false to be true

测试断言走的正是浏览器 label 激活的机制本身:forgetElementById → 落在自己实例内 → focus() 生效;回退即红,防止任何人改回硬编码字面量。

观察记录(不在本单处理)

issue 正文第 2 点提到:这些组件级 id 会覆盖 form renderer 经 FormControl Slot 注入的行级 formItemId,行级 FormLabelhtmlFor 因此指不到任何控件。这是复合 widget(多个子输入共享一个行级 id 注入)的普遍结构问题,PM 裁决明确不在本单重新设计落点;本 PR 保持 spread/id 次序原状,该问题维持现状,留待后续专项。

变更

  • packages/fields/src/widgets/AddressField.tsx — 5 个子输入 id / htmlFor 改 useId() 前缀
  • packages/fields/src/widgets/GeolocationField.tsx — 2 个子输入 id / htmlFor 改 useId() 前缀
  • packages/fields/src/widgets/AddressField.uniqueIds.test.tsx — 新增
  • packages/fields/src/widgets/GeolocationField.uniqueIds.test.tsx — 新增
  • .changeset/address-geo-unique-ids.md@object-ui/fields patch

🤖 Generated with Claude Code

https://claude.ai/code/session_01NVPjPzmmAJ2Ngtvgg5MSRa


Generated by Claude Code

…消除同表单重复 DOM id
AddressField(street/city/state/zipCode/country)与 GeolocationField
(latitude/longitude)的子输入原用硬编码字面量 id:同一表单渲染两个同类型
字段即产生重复 DOM id,第二个字段的每个子 label 的 htmlFor 都解析到第一个
字段的输入。现严格照 RadioField / CheckboxesField 的 groupId 范式改为
useId() 前缀 + 子字段名,label htmlFor 逐一对齐;whitelist spread 与
id 的先后次序保持原状(行级 formItemId 落点不在本单重新设计)。
测试:两个新 *.uniqueIds.test.tsx 各渲染同表单两个实例,断言 (1) 全文档
[id] 全局唯一 (2) 第二个实例的每个子 label 经 for→getElementById 解析并
聚焦到自己的输入。破坏验证:回退硬编码 id 后 4 项断言全红。
aria-invalid 账本守卫与 dom-leak 守卫(281 项)保持全绿。
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NVPjPzmmAJ2Ngtvgg5MSRa
@vercel

vercelBot commented Aug 4, 2026

Copy link
Copy Markdown

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

1 Skipped Deployment
ProjectDeploymentActionsUpdated (UTC)
objectuiIgnoredIgnoredAug 4, 2026 5:51am

Request Review

@github-actions

Copy link
Copy Markdown
Contributor

✅ Console Performance Budget

MetricValueBudget
Main entry (gzip)28.1 KB350 KB
Entry fileindex-C6F7LSlh.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.21KB3.45KB
auth (LoginForm.js)18.13KB5.39KB
auth (PreviewBanner.js)0.90KB0.50KB
auth (RegisterForm.js)6.64KB2.21KB
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.68KB104.68KB
core (index.js)2.25KB0.80KB
create-plugin (index.js)9.28KB2.98KB
data-objectstack (index.js)136.23KB34.75KB
fields (index.js)226.62KB55.53KB
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)38.53KB10.71KB
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.61KB56.81KB
plugin-editor (index.js)2.46KB1.10KB
plugin-form (index.js)111.54KB26.97KB
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 4, 2026 06:36
@xuyushun441-sys
xuyushun441-sys added this pull request to the merge queueAug 4, 2026
Merged via the queue into main with commit b7165ceAug 4, 2026
16 checks passed
@xuyushun441-sys
xuyushun441-sys deleted the claude/issue-3343-address-geo-unique-ids branch August 4, 2026 06:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

2 participants

@xuyushun441-sys@claude