fix(plugin-form): a record dialog's collapsed section opens in place, not behind the console's loading screen (objectui#12559)

[objectstack-fleet]

Fixes #12559
Clause-②: no

What was wrong

The field widgets @object-ui/fields registers are React.lazy: a type's chunk is fetched the first time a form draws it, and that first render suspends. A section that starts collapsed keeps its fields out of the DOM, so the click that opens it is often the first render of a type (currency, url, address). Nothing inside ModalForm caught that suspension, so it landed on the host's nearest Suspense. The console mounts the record dialog beside its routes (AppContent, after the route ErrorBoundary), so the nearest boundary is ConsoleShell's root one around the whole app: the whole console, dialog included, was swapped for the root fallback while the chunk loaded. The full-page create route sits inside the route's own boundary and hid only its page.

Producer, with evidence

• Named: an unbounded lazy-widget suspension inside the dialog body escaping to the host's root boundary.
• Not the two triage candidates. The collapse state is ModalForm's own useState (collapsedSections), below the dialog; the console's key for the dialog is the object name plus the record id or new, which a toggle cannot change. The section header is a div with role="button" drawn by the form renderer's SectionDivider, not a submit button (PM assumption A2 disproved). A toggled value wins over the declared one in resolveSectionCollapse (host.live ?? declared), and the new pin re-renders the host with a fresh schema object to hold that (A3).
• A1 measured, half confirmed. The skeleton is the dialog leaving the screen. In a Chromium harness (React 19, real ModalForm, a root Suspense above it, no route boundary between, served by the console's Vite at 1440x900): right after the header click the host fallback mounted and the dialog's computed display was none; 200 ms later the fallback had unmounted and the dialog came back with the section expanded and the typed value kept. In that harness React kept ModalForm's state.
• NOT MEASURED: the console-only remount (dialog comes back collapsed, card body). It did not reproduce without the console's ancestors, and HotCRM needs a backend this container cannot boot cheaply. With this change the root boundary is never reached, so whatever above it reacted to the fallback is no longer triggered. The landing seat's HotCRM Leads → New reading is the confirmation.

The fix

ModalForm owns its body's wait, the same shape FlowRunner gives its screen body (framework#3528 precedent, pinned by FlowRunner.suspense.test.tsx). Both dialog bodies (the stacked/tabbed form and the master-detail one) render inside a Suspense whose fallback is ModalFormBodyPending. The header and footer stay on screen, and the form underneath is hidden, not unmounted. It is distinct from modal-form-skeleton, which stays the record read's loading state. The first open of a dialog whose types are not loaded yet is covered the same way.

A first attempt put a boundary around every registered field widget in the form renderer (packages/components form.tsx). I reverted it inside this branch: it changed the readiness contract of every form in the product (labels drawn before their controls), and tabbedFormSectionPredicate-6237 went red on it. The defect belongs to an overlay that a host mounts outside its page boundary. form.tsx is byte-equal to main.

Pins (packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx)

The host is the console's shape: a root Suspense whose fallback counts its mounts, a host that mints a mount id once, and ModalForm under a stable key, handed a fresh schema object every render. The url widget is swapped for one whose chunk lands only on release.

1. Header click on a collapsed section: mid-load the host fallback does not mount, the dialog stays shown with its title, and the body placeholder is inside it. After release: one host mount, one getObjectSchema call, no read skeleton, the section expanded with its fields, and the value typed in the other section kept.
2. The toggled state is the dialog's: a host re-render with a fresh schema keeps the section open.
3. CONTROL: a section that starts expanded still collapses.
4. CONTROL: the full-page form (ObjectForm, simple) still expands a collapsed section.

Ablation (via ablation-replace.mjs, mutation proven on disk and restored, git diff HEAD empty): with the body Suspense removed, pin 1 goes RED at the host-fallback count (expected 2 to be 1), and pins 2-4 stay green. A first ablation attempt was refused by the tool as a no-op (the replacement text already occurred as a substring) and is not counted. Under jsdom React keeps state across the hide, so the remount half of pin 1 stays green even under ablation. The pin that fails is "the host's boundary never takes the dialog off screen".

sectionedFormValues.test.tsx used the footer as its readiness signal. The footer now draws while the body waits, so the test also waits for the body placeholder to go before it counts form elements.

Gates (final head cc9467aed, unless noted)

• Closure build pnpm --filter '@object-ui/plugin-form^...' build: exit 0.
• pnpm --filter @object-ui/plugin-form type-check (tsc + tsconfig.test.json; --listFiles includes the new test): exit 0 at 276d22c17. The only later change in this package is a test file, which the targeted run below covers.
• Targeted vitest, the 29 plugin-form test files that mention ModalForm, section-divider or collaps, plus the pin: 29 passed, 393 tests at cc9467aed.
• vitest run packages/plugin-form/ at 276d22c17: 184 of 185 files passed. The one red was sectionedFormValues (above), fixed and re-run green at cc9467aed. The full directory was not re-run on the final head.
• Narrowed lint on the two changed source files (eslint config: **/*.{ts,tsx}; 2 files per --format json; no type-aware linting configured, so the diff cannot move any untouched file's verdict): 0 errors. ModalForm.tsx has 20 warnings, the same as main.
• Pre-tsc battery (phantom-deps, self-import, unreferenced-sources, doc-example-readers, handler-key-reads, side-effects-array, element-data-source-declaration, spec-symbols, action-forward-parity, designer-field-key-parity, icon-record-names, i18n-keys, i18n-drift, i18n-designer-parity, control-bytes, new-line-citations, test-path-roots), check-hand-rolled-comment-mask, check-changeset-fixed, check-changeset-presence, check-changeset-no-major: all exit 0.
• NOT MEASURED, declared to CI: packages/app-shell/ (an app-shell full run held the shared lock for over 30 minutes) and the browser reading on HotCRM.

Acceptance notes

• Same class, not changed here: any other overlay that mounts a form outside its host's page boundary inherits the lazy-widget suspension. DrawerForm and the record detail drawer were not audited. The per-widget boundary in the form renderer would close the whole class, at the cost of the readiness change above. That is a design call for the maintainer, not this card. Carrier: none.
• Serial: fix(plugin-form): each form section draws its own columns count per row (objectui#12548) #12556 (objectui#12548) and fix(plugin-form): a record dialog with no authored layout opens bounded with a two-column grid (objectui#12521) #12546 had not landed at the last merge of origin/main. This diff touches only the dialog body wrapper and the end of ModalForm.tsx, not the section layout code those PRs edit.

Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB (seat domain:ui#2, PM claim 6200039614).

---

Generated by Claude Code

[github-actions]

✅ Console Performance Budget

Metric	Value	Budget
Eager closure (gzip, 70 chunks)	3091.3 KB	3119.4 KB
Main entry chunk (gzip)	73.3 KB	350 KB
Entry file	index-B_-BeEAw.js	—
Status	PASS	—

The eager closure is every chunk the entry reaches through static imports — what the browser fetches and parses before the app renders. The entry chunk on its own is a small fraction of it.

---

📦 Bundle Size Report

Package	Size	Gzipped
app-shell (consoleActionDispatch.js)	0.20KB	0.19KB
app-shell (index.js)	21.19KB	7.76KB
app-shell (runtime-config.js)	22.59KB	7.89KB
app-shell (types.js)	0.01KB	0.04KB
app-shell (urlParams.js)	10.11KB	3.87KB
auth (ActiveOrganizationStorage.js)	27.95KB	10.04KB
auth (AuthContext.js)	0.31KB	0.24KB
auth (AuthGuard.js)	2.07KB	1.00KB
auth (AuthProvider.js)	40.22KB	10.61KB
auth (AuthShell.js)	3.49KB	1.40KB
auth (ForgotPasswordForm.js)	12.21KB	3.45KB
auth (LoginForm.js)	18.15KB	5.40KB
auth (PreviewBanner.js)	0.90KB	0.50KB
auth (RegisterForm.js)	6.72KB	2.24KB
auth (SocialSignInButtons.js)	9.70KB	3.93KB
auth (UserMenu.js)	3.39KB	1.21KB
auth (auth-gate-events.js)	1.62KB	0.83KB
auth (authStyles.js)	5.04KB	1.72KB
auth (createAuthClient.js)	41.19KB	11.12KB
auth (createAuthenticatedFetch.js)	8.54KB	3.46KB
auth (index.js)	3.63KB	1.64KB
auth (invitation-status.js)	1.22KB	0.70KB
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)	5.30KB	1.02KB
auth (useWorkspaceAdminStatus.js)	11.08KB	4.58KB
collaboration (CommentThread.js)	27.26KB	8.03KB
collaboration (LiveCursors.js)	3.17KB	1.27KB
collaboration (PresenceAvatars.js)	6.28KB	2.60KB
collaboration (PresenceProvider.js)	2.79KB	1.13KB
collaboration (commentAuthorship.js)	1.39KB	0.78KB
collaboration (index.js)	1.93KB	0.85KB
collaboration (useCollaborationTranslation.js)	6.50KB	2.52KB
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)	596.60KB	143.79KB
core (index.js)	10.18KB	4.04KB
create-plugin (index.js)	27.94KB	9.51KB
data-objectstack (index.js)	254.55KB	71.19KB
fields (index.js)	283.09KB	72.13KB
i18n (LocalizationContext.js)	2.92KB	1.42KB
i18n (builtinAggregateLabels.js)	0.86KB	0.49KB
i18n (currency.js)	2.59KB	1.22KB
i18n (fallbackInterpolation.js)	6.25KB	2.77KB
i18n (i18n.js)	8.87KB	3.64KB
i18n (index.js)	5.52KB	2.39KB
i18n (pickLocalized.js)	9.86KB	3.95KB
i18n (provider.js)	39.35KB	12.88KB
i18n (translateFn.js)	0.20KB	0.18KB
i18n (useDisplayLocale.js)	3.52KB	1.76KB
i18n (useObjectLabel.js)	36.87KB	9.88KB
i18n (useSafeTranslation.js)	7.14KB	2.92KB
layout (index.js)	40.67KB	11.85KB
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.75KB
mobile (index.js)	1.99KB	0.87KB
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)	6.62KB	2.45KB
mobile (useResponsive.js)	0.72KB	0.42KB
mobile (useSpecGesture.js)	5.52KB	2.10KB
mobile (useTouchTarget.js)	1.01KB	0.54KB
permissions (MePermissionsProvider.js)	15.35KB	5.51KB
permissions (PermissionContext.js)	0.31KB	0.25KB
permissions (PermissionGuard.js)	0.89KB	0.45KB
permissions (PermissionProvider.js)	6.82KB	2.38KB
permissions (discardProofCache.js)	1.04KB	0.55KB
permissions (evaluator.js)	8.33KB	3.07KB
permissions (index.js)	0.93KB	0.41KB
permissions (store.js)	0.91KB	0.42KB
permissions (useFieldPermissions.js)	1.28KB	0.53KB
permissions (usePermissions.js)	4.83KB	2.27KB
plugin-ai (index.js)	16.04KB	3.92KB
plugin-calendar (index.js)	54.94KB	16.05KB
plugin-charts (index.js)	84.97KB	23.36KB
plugin-chatbot (index.js)	201.89KB	48.13KB
plugin-dashboard (index.js)	144.21KB	39.05KB
plugin-designer (index.js)	233.95KB	50.08KB
plugin-detail (index.js)	262.87KB	69.48KB
plugin-editor (index.js)	2.23KB	1.05KB
plugin-form (index.js)	180.83KB	46.61KB
plugin-gantt (index.js)	178.36KB	45.08KB
plugin-grid (index.js)	262.33KB	72.76KB
plugin-kanban (index.js)	53.23KB	16.71KB
plugin-list (index.js)	127.76KB	32.64KB
plugin-map (index.js)	27.07KB	8.96KB
plugin-markdown (index.js)	13.88KB	4.80KB
plugin-report (index.js)	46.66KB	13.13KB
plugin-timeline (index.js)	39.21KB	11.85KB
plugin-tree (index.js)	15.07KB	5.33KB
plugin-view (index.js)	93.05KB	23.86KB
providers (DataSourceProvider.js)	0.75KB	0.39KB
providers (MetadataProvider.js)	1.37KB	0.59KB
providers (ThemeProvider.js)	1.90KB	0.85KB
providers (UploadProvider.js)	12.07KB	3.68KB
providers (index.js)	0.45KB	0.23KB
providers (types.js)	0.01KB	0.04KB
react-runtime (index.js)	5.62KB	2.34KB
react (LazyPluginLoader.js)	4.47KB	1.63KB
react (SchemaRenderer.js)	120.63KB	39.56KB
react (data-invalidation.js)	5.05KB	2.08KB
react (index.js)	4.50KB	2.06KB
react (schema-input.js)	4.31KB	2.07KB
react (spec-input.js)	0.20KB	0.18KB
sdui-parser (body-dialect.js)	4.50KB	1.99KB
sdui-parser (codegen.js)	9.45KB	3.76KB
sdui-parser (dashboard-widget-options.js)	3.07KB	1.30KB
sdui-parser (index.js)	7.30KB	3.12KB
sdui-parser (input-type.js)	2.84KB	1.40KB
sdui-parser (parse.js)	25.28KB	7.81KB
sdui-parser (provenance.js)	3.84KB	1.90KB
sdui-parser (types.js)	0.29KB	0.24KB
sdui-parser (validate.js)	23.87KB	7.83KB
types (ai.js)	4.39KB	2.17KB
types (api-types.js)	0.20KB	0.18KB
types (app.js)	4.12KB	1.61KB
types (authoring-nodes.js)	0.20KB	0.19KB
types (base.js)	0.20KB	0.18KB
types (blocks.js)	0.20KB	0.18KB
types (cloud.js)	0.20KB	0.18KB
types (complex.js)	4.44KB	2.07KB
types (crud.js)	0.20KB	0.18KB
types (dashboard-filter-alias.js)	6.23KB	2.74KB
types (dashboard-widget-layout.js)	2.06KB	0.96KB
types (data-display.js)	3.75KB	1.85KB
types (data-protocol.js)	0.20KB	0.19KB
types (data.js)	0.20KB	0.18KB
types (designer.js)	1.85KB	0.85KB
types (disclosure.js)	0.20KB	0.18KB
types (error-code.js)	1.54KB	0.88KB
types (expression.js)	0.20KB	0.18KB
types (feedback.js)	0.20KB	0.18KB
types (field-types.js)	1.13KB	0.65KB
types (form.js)	0.20KB	0.18KB
types (http-inflight.js)	8.87KB	3.73KB
types (http-retry.js)	4.32KB	2.02KB
types (icon-key-migration.js)	4.26KB	1.63KB
types (index.js)	5.78KB	2.70KB
types (layout.js)	0.20KB	0.18KB
types (managed-by.js)	0.19KB	0.18KB
types (mobile.js)	5.00KB	2.39KB
types (navigation.js)	0.20KB	0.18KB
types (node-slots.js)	7.18KB	2.34KB
types (objectql.js)	0.20KB	0.18KB
types (overlay.js)	0.20KB	0.18KB
types (permissions.js)	2.52KB	1.31KB
types (plugin-scope.js)	0.20KB	0.18KB
types (record-approval-decision.js)	0.20KB	0.20KB
types (record-components.js)	0.20KB	0.19KB
types (record-panels.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 (select-option.js)	0.20KB	0.19KB
types (spec-report.js)	4.99KB	1.96KB
types (spec-ui-namespace.js)	0.20KB	0.19KB
types (strict-authoring-face.js)	19.93KB	7.26KB
types (system-fields.js)	3.33KB	1.54KB
types (theme.js)	6.28KB	2.87KB
types (ui-action.js)	8.48KB	3.50KB
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

[objectstack-fleet]

Review: ACCEPT — objectui PR #12571 · domain:ui seat 2 · session_01XVp19E1MYUTFM3dnkwz8gB · 2026-10-15T20:51Z

Reviewed on GitHub at head cc9467a, against triage's scope (6199866168) and the claim (6200039614), not against the dev's report.

• Shape: the PR is a draft against main. Its body opens Fixes #12559, the only closing keyword, then Clause-②: no. It changes 4 files.
• Producer named, as triage required, and it is neither triage candidate:
  • The field widgets are React.lazy. The first render of a type that a collapsed section was hiding suspends.
  • ModalForm had no boundary of its own. The suspension therefore reached the host's nearest <Suspense>, which in the console is the shell's root boundary, because the dialog mounts beside the routes. So the whole console, dialog included, was swapped for the root fallback.
  • The dev disproved both candidates with readings:
    • The collapse state is ModalForm's own useState, and the dialog key cannot change on a toggle.
    • The header is a div with role="button", not a submit button.
  • Evidence: a Chromium harness at 1440×900 with the real ModalForm under a root Suspense caught the outer fallback at t+0 and the section expanded at t+200 ms.
• Fix at the producer: both dialog bodies (the master-detail one and the sectioned one) are wrapped in a <Suspense> with a ModalFormBodyPending placeholder. This is the shape FlowRunner already uses. The header and footer stay, and the form underneath is hidden, not unmounted, so the opened section and the typed values survive.
  • A per-widget boundary in components/form.tsx was tried and reverted; net zero bytes there. It would change every form's readiness contract.
• Pins: modalSectionToggleSuspense-12559, 4 tests. They cover:
  • the host fallback never shows;
  • the section opens in place;
  • a typed value survives;
  • CONTROLs.
  • Ablation: removing the boundary turns pin 1 red. Restore was proven by blob hash.
• Test edit, accepted: sectionedFormValues.test.tsx used the footer as its readiness signal. The footer is now drawn while the body waits, so the test also awaits the placeholder's removal before reading. This adds a wait; it removes no assertion.
• Changeset: @object-ui/plugin-form: patch. No export, prop or type member is added.
• Serial: PR fix(plugin-form): each form section draws its own columns count per row (objectui#12548) #12556 (objectui#12548) merged before this branch was cut. Draft PR fix(plugin-form): a record dialog with no authored layout opens bounded with a two-column grid (objectui#12521) #12546 (objectui#12521) still edits ModalForm.tsx; whichever lands second merges main.
• Evidence from the dev:
  • The closure build and the plugin-form type-check exit 0.
  • 29 targeted ModalForm and section files pass 393 tests under the lock.
  • The plugin-form dir is green after the one fix above.
  • The battery exits 0.
  • Declared narrowings: the app-shell dir was not run locally, and CI covers it.
• Open question, answered A: overlay-level boundaries stay (ModalForm now, FlowRunner already). A per-widget boundary in the shared renderer would change readiness for every form in the product. It is not taken here, and nothing is filed.
• Acceptance notes (not filed):
  • The console-only half of the symptom ("comes back still collapsed") was not reproduced outside the console. The fix removes the suspension that triggered it, but the HotCRM browser reading (Leads → New, Company Information opens on click) is owed by the maintainer's check. If the section still comes back collapsed, this card reopens.
  • DrawerForm and the record detail drawer were not audited for the same lazy-widget escape. It is a reading only, with no measured reach.
• CI at head: 34 success, 3 skipped, 0 failures (filter=latest, 37 runs), all 16 test shards included.

Next: pr_ready + automerge_enable.

---

Generated by Claude Code