@open-mercato/ui 0.5.1-develop.2935.357c9db339 → 0.5.1-develop.2949.009dcdd2d5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.5.1-develop.2935.357c9db339",
+  "version": "0.5.1-develop.2949.009dcdd2d5",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -132,12 +132,12 @@
     "recharts": "^3.8.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2935.357c9db339",
+    "@open-mercato/shared": "0.5.1-develop.2949.009dcdd2d5",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2935.357c9db339",
+    "@open-mercato/shared": "0.5.1-develop.2949.009dcdd2d5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -360,6 +360,20 @@ function readByDotPath(source: Record<string, unknown> | undefined, path: string
   return current
 }
 
+function readInitialCustomFieldValue(
+  source: Record<string, unknown> | undefined,
+  key: string,
+): unknown {
+  if (!source || !key) return undefined
+  const candidates = [`cf_${key}`, `cf:${key}`, key]
+  for (const candidate of candidates) {
+    if (Object.prototype.hasOwnProperty.call(source, candidate)) {
+      return source[candidate]
+    }
+  }
+  return undefined
+}
+
 function serializeIssuePath(path: ReadonlyArray<string | number | symbol>): string | null {
   if (!Array.isArray(path) || path.length === 0) return null
   const segments = path
@@ -2024,19 +2038,32 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   const dirtyBaselineSnapshotRef = React.useRef<string | undefined>(undefined)
   React.useLayoutEffect(() => {
     if (!initialValues) return
-    const snapshot = JSON.stringify(initialValues)
+    const snapshot = JSON.stringify({
+      initialValues,
+      injectedFieldIds: injectedFieldDefinitions.map((definition) => definition.id),
+      customFieldMappings: cfDefinitions.map((definition) => definition.key),
+    })
     if (appliedInitialValuesSnapshotRef.current === snapshot) return
     appliedInitialValuesSnapshotRef.current = snapshot
+    const initialRecord = initialValues as Record<string, unknown>
     let mergedValues: CrudFormValues<TValues> | null = null
     setValues((prev) => {
       const merged = { ...prev, ...initialValues } as CrudFormValues<TValues>
       for (const definition of injectedFieldDefinitions) {
         if (merged[definition.id] !== undefined) continue
-        const extracted = readByDotPath(initialValues as Record<string, unknown>, definition.id)
+        const extracted = readByDotPath(initialRecord, definition.id)
         if (extracted !== undefined) {
           ;(merged as Record<string, unknown>)[definition.id] = extracted
         }
       }
+      for (const definition of cfDefinitions) {
+        const targetId = customEntity ? definition.key : `cf_${definition.key}`
+        if (!targetId || merged[targetId] !== undefined) continue
+        const extracted = readInitialCustomFieldValue(initialRecord, definition.key)
+        if (extracted !== undefined) {
+          ;(merged as Record<string, unknown>)[targetId] = extracted
+        }
+      }
       mergedValues = merged
       return mergedValues
     })
@@ -2064,7 +2091,14 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     return () => {
       cancelled = true
     }
-  }, [extendedInjectionEventsEnabled, initialValues, injectedFieldDefinitions, triggerInjectionEvent])
+  }, [
+    cfDefinitions,
+    customEntity,
+    extendedInjectionEventsEnabled,
+    initialValues,
+    injectedFieldDefinitions,
+    triggerInjectionEvent,
+  ])
 
   // Apply custom field defaults on create flows (one-time, ref-guarded).
   // Mode is determined from the host-provided initialValues prop, not from

package/src/backend/__tests__/CrudForm.custom-fields.test.tsx

@@ -121,6 +121,89 @@ describe('CrudForm custom field loading', () => {
     expect(fetchCustomFieldFormStructureMock).toHaveBeenCalledTimes(1)
   })
 
+  it('hydrates bare-key custom field initialValues after definitions load and after remount', async () => {
+    const loadOptions = jest.fn().mockResolvedValue([
+      { value: 'CNY', label: 'CNY - Chinese Yuan' },
+    ])
+
+    buildFormFieldFromCustomFieldDefMock.mockImplementation((definition: any) => ({
+      id: `cf_${definition.key}`,
+      label: definition.label ?? definition.key,
+      type: 'select',
+      loadOptions,
+    }))
+    fetchCustomFieldFormStructureMock.mockResolvedValue({
+      fields: [],
+      definitions: [
+        {
+          entityId: 'customers:customer_company_profile',
+          key: 'preferred_currency',
+          label: 'Preferred currency',
+          kind: 'currency',
+        },
+      ],
+      metadata: {
+        items: [],
+        fieldsetsByEntity: {},
+        entitySettings: {},
+      },
+    })
+
+    function Host({ visible }: { visible: boolean }) {
+      if (!visible) return null
+      return (
+        <CrudForm
+          embedded
+          title="Form"
+          entityId="customers:customer_company_profile"
+          fields={fields}
+          groups={groups}
+          initialValues={{ name: 'Acme', preferred_currency: 'CNY' }}
+          onSubmit={() => {}}
+        />
+      )
+    }
+
+    const { container, rerender } = renderWithProviders(
+      <Host visible />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'entities.customFields.manageFieldset': 'Manage fields',
+        },
+      },
+    )
+
+    const getCurrencySelect = () =>
+      container.querySelector('[data-crud-field-id="cf_preferred_currency"] select') as HTMLSelectElement | null
+
+    await waitFor(() => {
+      expect(fetchCustomFieldFormStructureMock).toHaveBeenCalledTimes(1)
+    })
+    await waitFor(() => {
+      expect(getCurrencySelect()).not.toBeNull()
+    })
+    await waitFor(() => {
+      expect(getCurrencySelect()?.value).toBe('CNY')
+    })
+
+    await act(async () => {
+      rerender(<Host visible={false} />)
+    })
+
+    await act(async () => {
+      rerender(<Host visible />)
+    })
+
+    await waitFor(() => {
+      expect(getCurrencySelect()).not.toBeNull()
+    })
+    await waitFor(() => {
+      expect(getCurrencySelect()?.value).toBe('CNY')
+    })
+    expect(loadOptions).toHaveBeenCalled()
+  })
+
   it('opens the field manager without submitting the parent form', async () => {
     const handleSubmit = jest.fn().mockResolvedValue(undefined)