fix(fields): #3343 AddressField/GeolocationField 子输入改用 useId() 前缀 id，消除同表单重复 DOM id by xuyushun441-sys · Pull Request #3348 · objectstack-ai/objectui

xuyushun441-sys · 2026-08-04T05:51:02Z

问题

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

修法（按 PM 裁决）

严格照 RadioField / CheckboxesField 的 groupId 范式：useId() 前缀 + 子字段名（`${groupId}-street` 等），label htmlFor 逐一对齐。
不重新设计行级 formItemId 的落点：whitelist spread（含 id）与本组件 id 的先后次序保持原状（spread 在前、组件 id 在后，组件 id 仍覆盖注入值）。观察记录见下。
基于 fix(fields): #3318 aria-invalid 交付批次 —— 20 个 widget 校验失败后向辅助技术宣告状态（账本 29 → 9） #3345（aria-invalid 交付批次）之后的 main，aria-invalid={!!error} 与 toDomProps spread 位置均未改动。

验证

项	命令	结果
新增测试（两个同类型字段同表单）	`pnpm exec vitest run packages/fields/src/widgets/AddressField.uniqueIds.test.tsx packages/fields/src/widgets/GeolocationField.uniqueIds.test.tsx`	2 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.tsx`	2 files / 281 tests passed
fields 全量	`pnpm exec vitest run packages/fields --maxWorkers=2`	48 files / 827 tests passed
类型检查 + 构建	`turbo run build --filter=@object-ui/fields`（含 `tsc`）	10 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 激活的机制本身：for → getElementById → 落在自己实例内 → focus() 生效；回退即红，防止任何人改回硬编码字面量。

观察记录（不在本单处理）

issue 正文第 2 点提到：这些组件级 id 会覆盖 form renderer 经 FormControl Slot 注入的行级 formItemId，行级 FormLabel 的 htmlFor 因此指不到任何控件。这是复合 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 · 2026-08-04T05:51:09Z

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
objectui	Ignored		Aug 4, 2026 5:51am

github-actions · 2026-08-04T05:53:37Z

✅ Console Performance Budget

Metric	Value	Budget
Main entry (gzip)	28.1 KB	350 KB
Entry file	`index-C6F7LSlh.js`	—
Status	PASS	—

📦 Bundle Size Report

Package	Size	Gzipped
app-shell (index.js)	8.47KB	3.09KB
app-shell (runtime-config.js)	7.42KB	2.32KB
app-shell (types.js)	0.01KB	0.04KB
app-shell (urlParams.js)	7.57KB	2.97KB
auth (AuthContext.js)	0.31KB	0.24KB
auth (AuthGuard.js)	1.17KB	0.53KB
auth (AuthProvider.js)	22.10KB	4.37KB
auth (AuthShell.js)	3.49KB	1.40KB
auth (ForgotPasswordForm.js)	12.21KB	3.45KB
auth (LoginForm.js)	18.13KB	5.39KB
auth (PreviewBanner.js)	0.90KB	0.50KB
auth (RegisterForm.js)	6.64KB	2.21KB
auth (SocialSignInButtons.js)	9.60KB	3.89KB
auth (UserMenu.js)	3.40KB	1.22KB
auth (auth-gate-events.js)	1.29KB	0.66KB
auth (authStyles.js)	5.04KB	1.72KB
auth (createAuthClient.js)	35.76KB	9.11KB
auth (createAuthenticatedFetch.js)	4.37KB	1.69KB
auth (index.js)	2.35KB	1.07KB
auth (org-roles.js)	6.66KB	2.78KB
auth (phone-identifier.js)	1.11KB	0.66KB
auth (types.js)	0.59KB	0.35KB
auth (useAuth.js)	4.91KB	0.87KB
auth (useIsWorkspaceAdmin.js)	1.61KB	0.85KB
collaboration (CommentThread.js)	18.38KB	4.49KB
collaboration (LiveCursors.js)	3.17KB	1.27KB
collaboration (PresenceAvatars.js)	3.65KB	1.42KB
collaboration (PresenceProvider.js)	2.79KB	1.13KB
collaboration (index.js)	1.25KB	0.53KB
collaboration (useCommentSearch.js)	1.98KB	0.88KB
collaboration (useConflictResolution.js)	7.75KB	1.86KB
collaboration (useMentionNotifications.js)	1.81KB	0.68KB
collaboration (usePresence.js)	6.33KB	1.84KB
collaboration (useRealtimeSubscription.js)	7.91KB	2.01KB
components (index.js)	476.68KB	104.68KB
core (index.js)	2.25KB	0.80KB
create-plugin (index.js)	9.28KB	2.98KB
data-objectstack (index.js)	136.23KB	34.75KB
fields (index.js)	226.62KB	55.53KB
i18n (LocalizationContext.js)	1.76KB	0.96KB
i18n (currency.js)	1.22KB	0.64KB
i18n (i18n.js)	4.32KB	1.77KB
i18n (index.js)	2.46KB	0.96KB
i18n (pickLocalized.js)	1.70KB	0.83KB
i18n (provider.js)	5.37KB	1.72KB
i18n (useObjectLabel.js)	26.14KB	6.07KB
i18n (useSafeTranslation.js)	3.26KB	1.44KB
layout (index.js)	38.53KB	10.71KB
mobile (MobileProvider.js)	0.92KB	0.49KB
mobile (ResponsiveContainer.js)	0.94KB	0.38KB
mobile (breakpoints.js)	1.51KB	0.70KB
mobile (createOfflineDataSource.js)	5.61KB	1.74KB
mobile (index.js)	1.50KB	0.62KB
mobile (offlineQueue.js)	3.91KB	1.35KB
mobile (pwa.js)	0.97KB	0.49KB
mobile (serviceWorker.js)	1.48KB	0.62KB
mobile (serviceWorkerSource.js)	3.41KB	1.48KB
mobile (useBreakpoint.js)	1.54KB	0.65KB
mobile (useGesture.js)	6.96KB	1.98KB
mobile (useOfflineSync.js)	1.99KB	0.72KB
mobile (usePullToRefresh.js)	2.53KB	0.85KB
mobile (useResponsive.js)	0.71KB	0.42KB
mobile (useResponsiveConfig.js)	1.36KB	0.63KB
mobile (useSpecGesture.js)	4.05KB	1.53KB
mobile (useTouchTarget.js)	1.01KB	0.54KB
permissions (MePermissionsProvider.js)	8.75KB	3.06KB
permissions (PermissionContext.js)	0.31KB	0.25KB
permissions (PermissionGuard.js)	0.89KB	0.45KB
permissions (PermissionProvider.js)	3.67KB	1.12KB
permissions (evaluator.js)	4.41KB	1.44KB
permissions (index.js)	0.91KB	0.41KB
permissions (store.js)	0.91KB	0.42KB
permissions (useFieldPermissions.js)	1.28KB	0.52KB
permissions (usePermissions.js)	1.55KB	0.71KB
plugin-ai (index.js)	15.71KB	3.79KB
plugin-calendar (index.js)	44.98KB	12.37KB
plugin-charts (index.js)	60.54KB	17.13KB
plugin-chatbot (index.js)	180.09KB	42.72KB
plugin-dashboard (index.js)	112.01KB	28.86KB
plugin-designer (index.js)	210.51KB	42.51KB
plugin-detail (index.js)	230.61KB	56.81KB
plugin-editor (index.js)	2.46KB	1.10KB
plugin-form (index.js)	111.54KB	26.97KB
plugin-gantt (index.js)	162.25KB	39.55KB
plugin-grid (index.js)	185.08KB	49.04KB
plugin-kanban (index.js)	47.89KB	13.18KB
plugin-list (index.js)	104.94KB	25.32KB
plugin-map (index.js)	16.81KB	5.24KB
plugin-markdown (index.js)	13.72KB	4.69KB
plugin-report (index.js)	40.55KB	10.59KB
plugin-timeline (index.js)	25.76KB	7.33KB
plugin-tree (index.js)	8.34KB	2.82KB
plugin-view (index.js)	83.67KB	20.43KB
providers (DataSourceProvider.js)	0.75KB	0.39KB
providers (MetadataProvider.js)	1.37KB	0.59KB
providers (ThemeProvider.js)	1.90KB	0.85KB
providers (UploadProvider.js)	11.71KB	3.53KB
providers (index.js)	0.44KB	0.22KB
providers (types.js)	0.01KB	0.04KB
react-runtime (index.js)	5.67KB	2.37KB
react (LazyPluginLoader.js)	3.77KB	1.33KB
react (SchemaRenderer.js)	19.28KB	6.38KB
react (data-invalidation.js)	5.05KB	2.08KB
react (index.js)	1.02KB	0.55KB
react (spec-input.js)	0.20KB	0.18KB
sdui-parser (codegen.js)	4.09KB	1.74KB
sdui-parser (index.js)	4.47KB	2.03KB
sdui-parser (parse.js)	10.04KB	2.82KB
sdui-parser (types.js)	0.29KB	0.24KB
sdui-parser (validate.js)	4.69KB	1.48KB
types (ai.js)	0.20KB	0.17KB
types (api-types.js)	0.20KB	0.18KB
types (app.js)	2.87KB	0.99KB
types (base.js)	0.20KB	0.18KB
types (blocks.js)	0.20KB	0.18KB
types (complex.js)	0.20KB	0.18KB
types (crud.js)	0.20KB	0.18KB
types (data-display.js)	0.20KB	0.18KB
types (data-protocol.js)	0.20KB	0.19KB
types (data.js)	0.20KB	0.18KB
types (designer.js)	1.87KB	0.85KB
types (disclosure.js)	0.20KB	0.18KB
types (error-code.js)	1.54KB	0.88KB
types (feedback.js)	0.20KB	0.18KB
types (field-types.js)	0.20KB	0.18KB
types (form.js)	0.20KB	0.18KB
types (http-retry.js)	4.32KB	2.02KB
types (index.js)	2.46KB	1.21KB
types (layout.js)	0.20KB	0.18KB
types (managed-by.js)	0.19KB	0.18KB
types (mobile.js)	0.20KB	0.18KB
types (navigation.js)	0.20KB	0.18KB
types (objectql.js)	0.20KB	0.18KB
types (overlay.js)	0.20KB	0.18KB
types (permissions.js)	0.20KB	0.18KB
types (plugin-scope.js)	0.20KB	0.18KB
types (record-components.js)	0.20KB	0.19KB
types (record-semantics.js)	1.28KB	0.67KB
types (registry.js)	0.20KB	0.18KB
types (reports.js)	0.20KB	0.18KB
types (spec-report.js)	5.05KB	1.93KB
types (system-fields.js)	3.33KB	1.54KB
types (theme.js)	0.20KB	0.18KB
types (ui-action.js)	3.40KB	1.71KB
types (views.js)	0.20KB	0.18KB
types (widget.js)	0.20KB	0.18KB

Size Limits

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

github-actions Bot added the tests label Aug 4, 2026

xuyushun441-sys marked this pull request as ready for review August 4, 2026 06:36

xuyushun441-sys added this pull request to the merge queue Aug 4, 2026

Merged via the queue into main with commit b7165ce Aug 4, 2026
16 checks passed

xuyushun441-sys deleted the claude/issue-3343-address-geo-unique-ids branch August 4, 2026 06:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

xuyushun441-sys commented Aug 4, 2026

Uh oh!

vercel Bot commented Aug 4, 2026

Uh oh!

github-actions Bot commented Aug 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

xuyushun441-sys commented Aug 4, 2026

问题

修法（按 PM 裁决）

验证

破坏验证实录

观察记录（不在本单处理）

变更

Uh oh!

vercel Bot commented Aug 4, 2026

Uh oh!

github-actions Bot commented Aug 4, 2026

✅ Console Performance Budget

📦 Bundle Size Report

Size Limits

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants