Repository navigation
Commit ddbd08e
fix(console): a refused form submit marks the fields it names; markdown placeholder in sans (#27443)
<!-- claude-projects-attribution: {"github_login":"os-warren"} -->
_Requested by **Warren** · [project
thread](https://claude.ai/code/project/chan_01U5RdnAAmkSQmZbqh6FtqZ8?thread=cmsg_01U5RdnAAmkSQmZbqh6FtqZ8BctHrSkyXGrwQzN3KmQW7Q)_
Fixes #27417
Clause-②: no
Metadata-protocol: none
## 维护者速读
- 改了什么:Console 表单页(公开
`/f/:slug`、`/forms/:name`、应用内表单)提交被拒时,逐个标出被拒字段(`aria-invalid` +
控件下方原因);markdown/html/richtext 编辑器的占位文字改用无衬线字体,输入的源码仍是等宽。
- 为什么改:HotCRM 18.2.0 浏览器走查(#27355 第 9、10 行):拒绝只给横幅和
toast,不指明哪个输入框;描述框占位文字是等宽字体。
- 风险与回滚:只改界面标记与一个 CSS 类,横幅与 toast 原样保留;回滚即还原本 PR 两个源文件。
- 先看:`ui/apps/console/src/components/FormPage.tsx`(`refusedWriteError` 与
catch 里的
`extractFieldErrors`)、`ui/packages/fields/src/widgets/RichTextField.tsx`、新测试
`FormPage.refusalMarks-27417.test.tsx`。
- 两分钟验证:`pnpm --dir ui exec vitest run
apps/console/src/components/FormPage.refusalMarks-27417.test.tsx`,预期 8
个测试全绿。
- 需要你做的:无,席位落地。
## What changes
- **Row 10, field marks (`@object-ui/console`, `FormPage.tsx`).** Every
refusal on the form page used to end in one string on the banner and the
outcome toast. Each refused row is now marked: `aria-invalid="true"` on
its control and the reason under the control, which the control names in
`aria-describedby`.
- Client required check: each empty required row, with the record form's
`validation.required` message ("Name is required").
- Faulted `visibleWhen`: the row is marked and points at the banner,
which already names the field and the rule, so no sentence is repeated
under it.
- Server refusals: the record dialog's reader of the server's field
paths, `extractFieldErrors` from `@object-ui/react`, reads the refusal.
No second parser was written. `submitPublic` / `submitInternal` used to
throw a bare `Error(text)`, which lost the field paths. They now throw
`refusedWriteError`, which keeps the same message and attaches the
parsed body the way `@objectstack/client` attaches it (`code`, and
`details` = wrapped `error.details`, else the flat body). That covers
the flat `400 VALIDATION_FAILED` with `fields[]`, the wrapped dispatcher
envelope, and the flat `409 UNIQUE_VIOLATION` naming its `field`. Only
the rows the form draws are marked.
- A refusal that names no field marks nothing. On a tabbed or wizard
view the first marked row's tab or step opens, through one
`revealRefused` shared by the client and server paths (the client path's
existing behaviour, moved, not changed). Editing a marked row clears its
mark. The banner and the toast are unchanged.
- **Row 9, placeholder font (`@object-ui/fields`,
`RichTextField.tsx`).** The markdown / html / richtext textarea is
`font-mono` on every host, and its placeholder inherited that. It now
carries `placeholder:font-sans`, so typed source stays mono and the
placeholder reads as prose. This widened the claimed file surface; the
seat approved it in its thread.
- **Row 9, brand colour: no code change.** Measured below: the in-app
route already takes the app's colour. The app-less routes know no app,
and that half is an open question for the seat.
- Changeset: `@object-ui/console` patch, `@object-ui/fields` patch.
## Why
HotCRM's browser pass on 18.2.0 (#27355 rows 9 and 10): a refused
public-form submit showed a toast and a banner but marked no field, and
the form's description placeholder was monospace.
## Tests
- New
`ui/apps/console/src/components/FormPage.refusalMarks-27417.test.tsx`, 8
tests. A server refusal naming A and B marks both and not the third row,
on the public route (flat envelope) and the internal route (wrapped
envelope). A 409 UNIQUE_VIOLATION marks its one field. An edit clears
one mark and keeps the other. A 400 naming no field marks none. A field
the form does not draw marks nothing. The client required refusal marks
both empty required rows and writes nothing. A faulted `visibleWhen` row
points at the banner.
- New
`ui/packages/fields/src/widgets/__tests__/RichTextField.placeholderFont-27417.test.tsx`,
3 tests (markdown, html, richtext): the control keeps `font-mono` and
carries `placeholder:font-sans`. jsdom computes no placeholder style, so
the computed font is the Chromium reading below.
- Ablation (one-time, through `scripts/ablation-replace.mjs`, fix
committed first): row `mark` forced to `undefined` makes 6 of 8 red. The
2 that stay green are the "marks none" pins, as predicted. Restored blob
matches `HEAD`.
- Regression at head d32c6b1: every `FormPage*.test` plus the fields
RichText, aria-invalid and dom-leak suites, 47 files and 739 tests, all
passed. `pnpm --filter @object-ui/console --filter @object-ui/fields run
type-check` exit 0.
## Acceptance notes
- Seat 2's open PR #27305 also edits `FormPage.tsx`, in its
`FORM_SPEC_TYPES` hunk only. That hunk is disjoint from these, and
whichever lands second merges main.
- Row 9's app-less half is left open. `/forms/:name` renders in the
app-independent Home layout, and the anonymous `GET /forms/:slug`
payload is `slug, object, label, form, objectSchema`, with no app and no
branding. The app metadata read is authenticated, so no server read was
invented. It is reported to the seat as an open question with options.
- The placeholder takes Tailwind's `font-sans` stack, which is a system
sans stack. The console body sets its own system stack, which differs in
its first families. Both are sans.
## Verification
Real Chromium (`/opt/pw-browsers/chromium`) against the showcase backend
(`objectstack dev --fresh`) and the console's Vite dev server. "Before"
is `FormPage.tsx` at main and "after" is this branch.
| Reading | Before | After |
|---|---|---|
| `/f/contact-us`, empty submit: Name / Email / Message `aria-invalid` |
false / false / false | true / true / true, each described by "X is
required"; Company false |
| `/f/contact-us`, server 400 `VALIDATION_FAILED` on `email` (real
server answer) | no field marked | Email true, described by "Email must
be a valid email address"; others false |
| Submit button vs `--primary`,
`/apps/showcase_app/forms/showcase_inquiry.contact` | rgb(124, 59, 237)
= app `#7C3AED` | unchanged |
| Submit button vs `--primary`, `/forms/...` and `/f/contact-us` |
rgb(0, 123, 255), the default (no app known) | unchanged |
| Markdown row placeholder `font-family` | ui-monospace stack |
-apple-system / system sans stack; control stays ui-monospace |
| Textarea and text rows placeholder | body sans | unchanged |
The server-refusal probe set `form.noValidate` before submitting,
because the browser's own email check would otherwise stop the submit
before the server judged it. The server's answer is its real one.
Derived gates at d32c6b1: `node scripts/pm/dispatch-gates.mjs
--commands` derived 34 families. All 34 exit 0, including `node
scripts/check-sdui-manifest.mjs` and the ui `scripts/` suite (169 files
passed). `--ran` reconciliation: 34 run, 0 NOT-MEASURED. `pnpm --dir ui
run check:new-line-citations`: 0 new citations.
---
_Generated by [Claude
Code](https://claude.ai/code/session_01JQwxbX1Zhx8ST6DDF1AGvD)_
---------
Co-authored-by: Claude <noreply@anthropic.com>1 parent 262ab67 commit ddbd08e
5 files changed
Lines changed: 530 additions & 25 deletions
File tree
- .changeset
- ui
- apps/console/src/components
- packages/fields/src/widgets
- __tests__
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
| 25 | + | |
| 26 | + | |
| 27 | + | |
| 28 | + | |
| 29 | + | |
| 30 | + | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
| 67 | + | |
| 68 | + | |
| 69 | + | |
| 70 | + | |
| 71 | + | |
| 72 | + | |
| 73 | + | |
| 74 | + | |
| 75 | + | |
| 76 | + | |
| 77 | + | |
| 78 | + | |
| 79 | + | |
| 80 | + | |
| 81 | + | |
| 82 | + | |
| 83 | + | |
| 84 | + | |
| 85 | + | |
| 86 | + | |
| 87 | + | |
| 88 | + | |
| 89 | + | |
| 90 | + | |
| 91 | + | |
| 92 | + | |
| 93 | + | |
| 94 | + | |
| 95 | + | |
| 96 | + | |
| 97 | + | |
| 98 | + | |
| 99 | + | |
| 100 | + | |
| 101 | + | |
| 102 | + | |
| 103 | + | |
| 104 | + | |
| 105 | + | |
| 106 | + | |
| 107 | + | |
| 108 | + | |
| 109 | + | |
| 110 | + | |
| 111 | + | |
| 112 | + | |
| 113 | + | |
| 114 | + | |
| 115 | + | |
| 116 | + | |
| 117 | + | |
| 118 | + | |
| 119 | + | |
| 120 | + | |
| 121 | + | |
| 122 | + | |
| 123 | + | |
| 124 | + | |
| 125 | + | |
| 126 | + | |
| 127 | + | |
| 128 | + | |
| 129 | + | |
| 130 | + | |
| 131 | + | |
| 132 | + | |
| 133 | + | |
| 134 | + | |
| 135 | + | |
| 136 | + | |
| 137 | + | |
| 138 | + | |
| 139 | + | |
| 140 | + | |
| 141 | + | |
| 142 | + | |
| 143 | + | |
| 144 | + | |
| 145 | + | |
| 146 | + | |
| 147 | + | |
| 148 | + | |
| 149 | + | |
| 150 | + | |
| 151 | + | |
| 152 | + | |
| 153 | + | |
| 154 | + | |
| 155 | + | |
| 156 | + | |
| 157 | + | |
| 158 | + | |
| 159 | + | |
| 160 | + | |
| 161 | + | |
| 162 | + | |
| 163 | + | |
| 164 | + | |
| 165 | + | |
| 166 | + | |
| 167 | + | |
| 168 | + | |
| 169 | + | |
| 170 | + | |
| 171 | + | |
| 172 | + | |
| 173 | + | |
| 174 | + | |
| 175 | + | |
| 176 | + | |
| 177 | + | |
| 178 | + | |
| 179 | + | |
| 180 | + | |
| 181 | + | |
| 182 | + | |
| 183 | + | |
| 184 | + | |
| 185 | + | |
| 186 | + | |
| 187 | + | |
| 188 | + | |
| 189 | + | |
| 190 | + | |
| 191 | + | |
| 192 | + | |
| 193 | + | |
| 194 | + | |
| 195 | + | |
| 196 | + | |
| 197 | + | |
| 198 | + | |
| 199 | + | |
| 200 | + | |
| 201 | + | |
| 202 | + | |
| 203 | + | |
| 204 | + | |
| 205 | + | |
| 206 | + | |
| 207 | + | |
| 208 | + | |
| 209 | + | |
| 210 | + | |
| 211 | + | |
| 212 | + | |
| 213 | + | |
| 214 | + | |
| 215 | + | |
| 216 | + | |
| 217 | + | |
| 218 | + | |
| 219 | + | |
| 220 | + | |
| 221 | + | |
| 222 | + | |
| 223 | + | |
| 224 | + | |
| 225 | + | |
| 226 | + | |
| 227 | + | |
| 228 | + | |
| 229 | + | |
| 230 | + | |
| 231 | + | |
| 232 | + | |
| 233 | + | |
| 234 | + | |
| 235 | + | |
| 236 | + | |
| 237 | + | |
| 238 | + | |
| 239 | + | |
| 240 | + | |
| 241 | + | |
| 242 | + | |
| 243 | + | |
| 244 | + | |
| 245 | + | |
| 246 | + | |
| 247 | + | |
| 248 | + | |
| 249 | + | |
| 250 | + | |
| 251 | + | |
| 252 | + | |
| 253 | + | |
| 254 | + | |
| 255 | + | |
| 256 | + | |
| 257 | + | |
| 258 | + | |
| 259 | + | |
| 260 | + | |
| 261 | + | |
| 262 | + | |
| 263 | + | |
| 264 | + | |
| 265 | + | |
| 266 | + | |
| 267 | + | |
| 268 | + | |
| 269 | + | |
| 270 | + | |
| 271 | + | |
| 272 | + | |
| 273 | + | |
| 274 | + | |
| 275 | + | |
| 276 | + | |
| 277 | + | |
| 278 | + | |
| 279 | + | |
| 280 | + | |
| 281 | + | |
| 282 | + | |
| 283 | + | |
| 284 | + | |
| 285 | + | |
| 286 | + | |
| 287 | + | |
| 288 | + | |
| 289 | + | |
| 290 | + | |
| 291 | + | |
| 292 | + | |
| 293 | + | |
| 294 | + | |
| 295 | + | |
| 296 | + | |
| 297 | + | |
| 298 | + | |
| 299 | + | |
| 300 | + | |
| 301 | + | |
| 302 | + | |
| 303 | + | |
| 304 | + | |
| 305 | + | |
| 306 | + | |
| 307 | + | |
| 308 | + | |
| 309 | + | |
| 310 | + | |
| 311 | + | |
| 312 | + | |
| 313 | + | |
| 314 | + | |
| 315 | + | |
0 commit comments