fix(form): render object fieldGroups in create/edit modal; auto-layout parity for grouped ObjectForm (#2152) (#2154)

ModalForm ignored the object's fieldGroups designer metadata entirely —
the global create modal rendered grouped objects as one flat field pile.
ObjectForm's grouped path bypassed applyAutoLayout: no system-field
filtering, always single column, hairline group titles on an endlessly
scrolling form.

- ModalForm: when no explicit sections/customFields are passed, derive
  sections from objectSchema.fieldGroups + field.group (same
  deriveFieldGroupSections as ObjectForm), with flat-path auto-layout
  parity: system/auto-generated fields filtered, columns inferred from
  field count, wide fields spanning the row, modal size auto-upgraded
  for multi-column. Explicit curated sections always win.
- The derived groups render as ONE form with virtual section-divider
  fields (DrawerForm's pattern) — NOT one SchemaRenderer per section.
  Per-section renderers create N <form> elements sharing the footer
  button's form id, so only the first section's values ever submit
  (verified live: group 2's required status showed a value in the UI
  but was absent from the POST body → VALIDATION_FAILED). That latent
  flaw still affects the explicit-sections path; tracked in #2153.
- ModalForm's flat field builder now carries Field.group so derivation
  sees group membership; section headers go through sectionLabel i18n.
- ObjectForm grouped path: filter system/auto-generated fields, infer
  columns, applyAutoColSpan, container-query grid — matching the flat
  path.

Verified against a real console (:5180) + real hotcrm backend (:4001):
crm_campaign_member (fieldGroups, no form view) modal now shows both
group headers in a 2-column xl dialog, and a cross-group create submits
all values (record persisted, POST body contains every group's fields).
crm_lead's explicit "Quick Lead Creation" view renders and submits
unchanged. plugin-form: 155/155 tests, type-check green.

Closes #2152

Author: baozhoutao

packages/plugin-form/src/ModalForm.tsx

@@ -44,7 +44,17 @@ import { SchemaRenderer, useSafeFieldLabel, usePreviewMode } from '@object-ui/re
 import { createSafeTranslation } from '@object-ui/i18n';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 import { buildSectionFields as buildSectionFieldsShared } from './sectionFields';
-import { applyAutoLayout, inferModalSize, sectionFormLayout, CONTAINER_GRID_COLS } from './autoLayout';
+import {
+  applyAutoColSpan,
+  applyAutoLayout,
+  filterAutoGeneratedFields,
+  filterSystemFields,
+  inferColumns,
+  inferModalSize,
+  sectionFormLayout,
+  CONTAINER_GRID_COLS,
+} from './autoLayout';
+import { deriveFieldGroupSections } from './fieldGroups';
 import { sanitizeFormData } from './sanitize';
 import { usePermissions } from '@object-ui/permissions';
 
@@ -171,7 +181,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
   dataSource,
   className,
 }) => {
-  const { fieldLabel } = useSafeFieldLabel();
+  const { fieldLabel, sectionLabel } = useSafeFieldLabel();
   const { t } = useDiscardTranslation();
   const previewMode = usePreviewMode();
   const perms = usePermissions();
@@ -218,11 +228,31 @@ export const ModalForm: React.FC<ModalFormProps> = ({
   // Stable form id for linking the external submit button to the form element
   const formId = useId();
 
+  // Field-group fallback (object-designer metadata): when the caller passes no
+  // explicit sections, honor the object's declared `fieldGroups` the same way
+  // ObjectForm's simple path does — one section per group, with flat-path
+  // auto-layout parity (system/auto-generated fields filtered, columns
+  // inferred from field count, wide fields spanning the row). An explicit
+  // curated `sections` list from a form view always wins over this fallback.
+  const derivedSections = useMemo(() => {
+    if (schema.sections?.length || schema.customFields?.length) return null;
+    let fs = filterSystemFields(formFields, objectSchema);
+    if (schema.mode === 'create') fs = filterAutoGeneratedFields(fs, objectSchema);
+    const sections = deriveFieldGroupSections(fs, (objectSchema as any)?.fieldGroups);
+    if (!sections) return null;
+    const columns = (schema.columns && schema.columns > 0
+      ? Math.min(Math.floor(schema.columns), 4)
+      : inferColumns(fs.length)) as 1 | 2 | 3 | 4;
+    return sections.map((s) => ({ ...s, columns })) as ModalFormSectionConfig[];
+  }, [schema.sections, schema.customFields, schema.columns, schema.mode, formFields, objectSchema]);
+
+  const effectiveSections = schema.sections?.length ? schema.sections : (derivedSections ?? undefined);
+
   // Compute auto-layout for flat fields (no sections) to determine inferred columns
   const autoLayoutResult = useMemo(() => {
-    if (schema.sections?.length || schema.customFields?.length) return null;
+    if (effectiveSections?.length || schema.customFields?.length) return null;
     return applyAutoLayout(formFields, objectSchema, schema.columns, schema.mode);
-  }, [formFields, objectSchema, schema.columns, schema.mode, schema.sections, schema.customFields]);
+  }, [formFields, objectSchema, schema.columns, schema.mode, effectiveSections, schema.customFields]);
 
   // Auto-upgrade modal size when auto-layout infers multi-column and user hasn't set modalSize
   const effectiveModalSize = useMemo(() => {
@@ -231,12 +261,12 @@ export const ModalForm: React.FC<ModalFormProps> = ({
       return inferModalSize(autoLayoutResult.columns);
     }
     // Auto-upgrade for sections: use the max columns across all sections
-    if (schema.sections?.length) {
-      const maxCols = Math.max(...schema.sections.map(s => Number(s.columns) || 1));
+    if (effectiveSections?.length) {
+      const maxCols = Math.max(...effectiveSections.map(s => Number(s.columns) || 1));
       if (maxCols > 1) return inferModalSize(maxCols);
     }
     return 'default';
-  }, [schema.modalSize, autoLayoutResult, schema.sections]);
+  }, [schema.modalSize, autoLayoutResult, effectiveSections]);
 
   const sizeClass = modalSizeClasses[effectiveModalSize] || modalSizeClasses.default;
 
@@ -339,6 +369,9 @@ export const ModalForm: React.FC<ModalFormProps> = ({
         field: field,
         options: field.options,
         multiple: field.multiple,
+        // Field-group membership (Field.group → object.fieldGroups[].key) —
+        // read by deriveFieldGroupSections for the fieldGroups fallback.
+        group: (field as any).group,
       });
     }
 
@@ -473,10 +506,21 @@ export const ModalForm: React.FC<ModalFormProps> = ({
       );
     }
 
-    // Sections layout
+    // Explicit sections layout (curated form view).
+    //
+    // KNOWN LIMITATION: each section renders its own SchemaRenderer, i.e. its
+    // own react-hook-form instance and <form> element, all sharing `formId`.
+    // The footer submit button is associated with the FIRST form only, so with
+    // 2+ sections the later sections' values never reach the submit payload.
+    // The derived field-group branch below avoids this by rendering ONE form;
+    // fixing the explicit path is tracked in #2153.
     if (schema.sections?.length) {
       const sections = schema.sections;
       const sectionKey = (sec: ModalFormSectionConfig, i: number) => sec.name || sec.label || String(i);
+      // Section headers go through the same i18n hook ObjectForm uses, so a
+      // translated group label wins over the raw metadata label.
+      const sectionTitle = (sec: ModalFormSectionConfig) =>
+        sec.name ? sectionLabel(schema.objectName, sec.name, sec.label || sec.name) : sec.label;
       // Lay the section's fields out in `section.columns` columns INSIDE the
       // form (columns + fieldContainerClass), not by wrapping the whole form in
       // a grid — otherwise the single <form> fills only the first grid cell and
@@ -500,7 +544,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
             <TabsList className="mb-4">
               {sections.map((section, index) => (
                 <TabsTrigger key={sectionKey(section, index)} value={sectionKey(section, index)}>
-                  {section.label || `Section ${index + 1}`}
+                  {sectionTitle(section) || `Section ${index + 1}`}
                 </TabsTrigger>
               ))}
             </TabsList>
@@ -520,7 +564,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
           {sections.map((section, index) => (
             <FormSection
               key={sectionKey(section, index)}
-              label={section.label}
+              label={sectionTitle(section)}
               description={section.description}
               columns={1}
             >
@@ -531,6 +575,43 @@ export const ModalForm: React.FC<ModalFormProps> = ({
       );
     }
 
+    // Derived field-group sections (object `fieldGroups` metadata) — rendered
+    // as ONE form with virtual 'section-divider' headers (same pattern as
+    // DrawerForm), so every group's fields share a single react-hook-form
+    // instance and the footer submit collects them all.
+    if (derivedSections?.length) {
+      const columns = (Number(derivedSections[0]?.columns) || 1) as 1 | 2 | 3 | 4;
+      const allFields: FormField[] = [];
+      derivedSections.forEach((section, index) => {
+        // FLS first, so a group whose every field is non-readable drops its
+        // header along with its fields.
+        const body = applyFieldPerms(buildSectionFields(section));
+        if (!body.length) return;
+        const title = section.name
+          ? sectionLabel(schema.objectName, section.name, section.label || section.name)
+          : section.label;
+        if (title) {
+          allFields.push({
+            name: `__section_${section.name || index}`,
+            label: title,
+            type: 'section-divider',
+          } as any);
+        }
+        allFields.push(...(columns > 1 ? applyAutoColSpan(body, columns) : body));
+      });
+      const groupedContainerClass = CONTAINER_GRID_COLS[columns];
+      return (
+        <SchemaRenderer
+          schema={{
+            ...baseFormSchema,
+            fields: allFields,
+            columns,
+            ...(groupedContainerClass ? { fieldContainerClass: groupedContainerClass } : {}),
+          }}
+        />
+      );
+    }
+
     // Reuse pre-computed auto-layout result for flat fields
     const layoutResult = autoLayoutResult ?? applyAutoLayout(formFields, objectSchema, schema.columns, schema.mode);
 

packages/plugin-form/src/ObjectForm.tsx

@@ -26,7 +26,14 @@ import { SplitForm } from './SplitForm';
 import { DrawerForm } from './DrawerForm';
 import { ModalForm } from './ModalForm';
 import { MasterDetailForm } from './MasterDetailForm';
-import { applyAutoLayout } from './autoLayout';
+import {
+  applyAutoLayout,
+  applyAutoColSpan,
+  containerGridColsFor,
+  filterAutoGeneratedFields,
+  filterSystemFields,
+  inferColumns,
+} from './autoLayout';
 import { deriveFieldGroupSections } from './fieldGroups';
 
 export interface ObjectFormProps {
@@ -669,6 +676,17 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
      ...initialData
   };
 
+  // Auto-layout parity with the flat path (which runs these inside
+  // applyAutoLayout): drop platform-managed system fields — and, in create
+  // mode, server-computed fields — BEFORE deriving field-group sections, so a
+  // grouped form hides exactly the fields the flat form hides instead of
+  // leaking created_at / formula columns into the trailing ungrouped bucket.
+  const groupableFields = React.useMemo(() => {
+    let fs = filterSystemFields(formFields, objectSchema);
+    if (schema.mode === 'create') fs = filterAutoGeneratedFields(fs, objectSchema);
+    return fs;
+  }, [formFields, objectSchema, schema.mode]);
+
   // Auto-derive sections from the object's declared `fieldGroups` when the
   // consumer hasn't supplied explicit sections. This makes field groups laid
   // out in the object designer render as sections on the actual form — not just
@@ -678,8 +696,8 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
     () =>
       schema.sections?.length
         ? null
-        : deriveFieldGroupSections(formFields, objectSchema?.fieldGroups),
-    [schema.sections, formFields, objectSchema],
+        : deriveFieldGroupSections(groupableFields, objectSchema?.fieldGroups),
+    [schema.sections, groupableFields, objectSchema],
   );
   const effectiveSections = schema.sections?.length ? schema.sections : fieldGroupSections;
 
@@ -728,10 +746,13 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
   // collapse simply hide a group's fields (`hidden: true`) while react-hook-form
   // retains their values, and lets cross-section conditions resolve via watch().
   if (effectiveSections?.length && (!schema.formType || schema.formType === 'simple')) {
+    // Derived (fieldGroup) sections were computed from the filtered field list;
+    // explicit sections keep the authored field selection as-is.
+    const sourceFields = fieldGroupSections ? groupableFields : formFields;
     const groupedFields: FormField[] = [];
     effectiveSections.forEach((section, index) => {
       const sectionFieldNames = section.fields.map(f => typeof f === 'string' ? f : ((f as any).field ?? f.name));
-      const sectionFields = applyFieldPerms(formFields.filter(f => sectionFieldNames.includes(f.name)));
+      const sectionFields = applyFieldPerms(sourceFields.filter(f => sectionFieldNames.includes(f.name)));
       if (sectionFields.length === 0) return;
 
       const sectionKey = section.name || section.label || String(index);
@@ -764,14 +785,32 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
       }
     });
 
+    // Multi-column layout parity with the flat path: infer a column count from
+    // the rendered field count and let wide fields (textarea/markdown/…) span
+    // the full row. The field grid uses container-query classes — with the
+    // @container wrapper below — so it tracks the form's own width: a grouped
+    // form in a wide dialog goes 2-up while a narrow drawer stays stacked.
+    // Section dividers span the full row via their own `col-span-full`.
+    const inputCount = groupedFields.filter(
+      f => (f as any).type !== 'section-divider' && !(f as any).hidden,
+    ).length;
+    const columns =
+      schema.columns && schema.columns > 0
+        ? Math.min(Math.floor(schema.columns), 4)
+        : inferColumns(inputCount);
+    const laidOutFields = columns > 1 ? applyAutoColSpan(groupedFields, columns) : groupedFields;
+    const fieldContainerClass = containerGridColsFor(columns);
+
     return (
-      <div className="w-full">
+      <div className="w-full @container">
         <SchemaRenderer
           schema={{
             type: 'form',
             objectName: schema.objectName,
-            fields: groupedFields,
+            fields: laidOutFields,
             layout: formLayout,
+            columns,
+            ...(fieldContainerClass ? { fieldContainerClass } : {}),
             defaultValues: finalDefaultValues,
             showSubmit: schema.showSubmit !== false && schema.mode !== 'view',
             showCancel: schema.showCancel !== false,