fix(components,fields): localize form validation, toast client-side failures, fix dark-mode date icon#2329
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Contributor
✅ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
baozhoutao
changed the title
Contributor
✅ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
…mode date icon Record-form validation messages (required, min/max length, min/max value, pattern, email, URL) rendered in English even when the field label was Chinese, e.g. "计划开始日期 is required". buildValidationRules baked English strings, so the form renderer's t() fallback never took effect. buildValidationRules now emits `required: true` and, for the other rules, a `messageKey` + undefined message (a field-authored *_message still wins); the form renderer localizes the blanks via i18n (validation.* keys already present in every locale), so messages track the label's language. Also declare color-scheme (light on :root, dark on .dark) so the native webkit calendar-picker-indicator and other built-in glyphs render light-on-dark instead of vanishing against the dark input background. Verified in the framework app-showcase dogfood console (dark mode): the showcase_task create form now shows 标题不能为空 / 项目不能为空 / 状态不能为空, and the 截止日期 date field's calendar icon is visible. Co-Authored-By: Claude <noreply@anthropic.com>
…re visible past the fold When required (or other client-side) validation blocks a submit, react-hook-form renders the error inline under each field, but in long forms inside a modal/drawer the offending field is often scrolled out of view — the user clicks 创建 and sees nothing happen. Pass an onInvalid handler to form.handleSubmit that fires toast.error naming the offending fields (capped at 3 + ellipsis), using their labels via fieldLabelByName. Mirrors the existing server-error toast (#2311) so feedback is visible regardless of scroll position. New i18n key validation.formInvalid added to all 10 locales. Verified in the app-showcase dogfood console (dark): submitting the empty showcase_task create form now shows the toast "请检查表单中标记的字段:标题、项目、状态" alongside the inline field errors. Co-Authored-By: Claude <noreply@anthropic.com>
os-zhuang
added a commit
that referenced
this pull request
Jul 24, 2026
) (#2813) The missing-required-field toast (#2329) names the fields but leaves the user hunting — in a long form the offending field is off-screen and RHF's native focus-on-error silently no-ops for custom widgets (lookup / select / master-detail), the exact reported case. Disable RHF's unreliable shouldFocusError and, in onInvalid, scroll the first errored field (visual order) into view via its data-field wrapper and focus a focusable control inside it — works for every field type. Verified with an RTL DOM test that renders the real form renderer: submit with a missing required field toasts, scrolls, and focuses the first error; picks the first *errored* field when an earlier one is valid; stays quiet on a valid submit. Red-checked against the pre-fix code. Full form suite (15) and type-check pass. Browser verification was blocked by the shared checkout's mid-migration state; the DOM test covers the real render path. Closes #2793 Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
计划开始日期 is required。根因是buildValidationRules(packages/fields/src/index.tsx)把英文串写死进 rule,表单渲染器里的t()兜底分支因此永远命中不到。input[type=date]的日历图标在暗色背景下几乎不可见,因为没有声明color-scheme。改动
packages/fields/src/index.tsx—buildValidationRules:required 现在发required: true;min/maxLength、min/max、pattern、email、url 改为{ value, message: <自定义或undefined>, messageKey: 'validation.*' }。字段作者自定义的*_message依旧保留并优先生效。packages/components/src/renderers/form/form.tsx:useSafeFormTranslation补齐validation.*英文兜底;新增localizeRule助手,用t(messageKey, { field, min/max })本地化 rule。form.handleSubmit传入onInvalid:客户端校验失败时toast.error弹出出错字段名(最多 3 个 + 省略号),无论滚动位置都能看到。对应已有的服务端错误 toast(fix(components): also toast form submit errors so they're visible past the fold #2311)。packages/i18n/src/locales/*.ts:新增validation.formInvalid(10 个 locale 全覆盖)。packages/components/src/index.css+apps/console/src/index.css::root{color-scheme:light}、.dark{color-scheme:dark},让原生控件内建图标在暗色下 light-on-dark 渲染。验证(framework app-showcase dogfood 控制台,暗色)
在 showcase_task 新建表单提交空值:
X is required)。getComputedStyle(input[type=date]).colorScheme === 'dark'。@object-ui/fields、@object-ui/components、@object-ui/i18n均type-check通过;已附 changeset。🤖 Generated with Claude Code