@open-mercato/ui 0.6.5-develop.4734.1.dd8285dd2e → 0.6.5-develop.4769.1.cff51e0b40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.5-develop.4734.1.dd8285dd2e",
+  "version": "0.6.5-develop.4769.1.cff51e0b40",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -149,13 +149,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.4734.1.dd8285dd2e",
+    "@open-mercato/shared": "0.6.5-develop.4769.1.cff51e0b40",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.4734.1.dd8285dd2e",
+    "@open-mercato/shared": "0.6.5-develop.4769.1.cff51e0b40",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -4205,6 +4205,18 @@ const FieldControl = React.memo(function FieldControlImpl({
   const placeholder = builtin?.placeholder
   const rootClassName = wrapperClassName ? `space-y-1 ${wrapperClassName}` : 'space-y-1'
   const validateOnWrapperBlur = supportsWrapperBlurValidation(field)
+  const singleSelectValue = Array.isArray(value)
+    ? String(value[0] ?? '')
+    : value == null
+      ? ''
+      : String(value)
+  const singleSelectOptionsKey = React.useMemo(
+    () => options.map((opt) => `${opt.value}:${opt.label}`).join('\0'),
+    [options],
+  )
+  const singleSelectLabel = singleSelectValue
+    ? options.find((option) => option.value === singleSelectValue)?.label
+    : undefined
 
   return (
     <div
@@ -4403,19 +4415,14 @@ const FieldControl = React.memo(function FieldControlImpl({
       )}
       {field.type === 'select' && !builtin?.multiple && (
         <Select
+          key={`${field.id}:${singleSelectValue}:${singleSelectOptionsKey}`}
           // Radix Select MUST be either always-controlled or always-uncontrolled.
           // Passing `value={undefined}` on first render and a string later trips
           // React's "uncontrolled → controlled" warning and breaks Radix's
           // internal state (dropdown flashes / selections no-op). Use empty
           // string for "no selection" instead — Radix treats it the same as
           // undefined for matching SelectItems but keeps the prop type stable.
-          value={
-            Array.isArray(value)
-              ? String(value[0] ?? '')
-              : value == null
-                ? ''
-                : String(value)
-          }
+          value={singleSelectValue}
           onValueChange={(next) => {
             // Custom field clears must be explicit nulls; normal optional
             // fields keep the existing undefined clear semantics.
@@ -4429,7 +4436,9 @@ const FieldControl = React.memo(function FieldControlImpl({
           disabled={disabled}
         >
           <SelectTrigger data-crud-focus-target="">
-            <SelectValue placeholder={t('ui.forms.select.emptyOption', '—')} />
+            <SelectValue placeholder={t('ui.forms.select.emptyOption', '—')}>
+              {singleSelectLabel}
+            </SelectValue>
           </SelectTrigger>
           <SelectContent>
             {!field.required && value != null && value !== '' && (

package/src/backend/__tests__/CrudForm.render.test.tsx

@@ -80,6 +80,44 @@ describe('CrudForm initialValues', () => {
     expect(getInput(container).value).toBe('Bob')
   })
 
+  it('shows the selected label when select options arrive after the saved value', async () => {
+    const makeFields = (options: Array<{ label: string; value: string }>): CrudField[] => [
+      { id: 'teamId', label: 'Team', type: 'select', options },
+    ]
+
+    const { getByRole, rerender } = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={makeFields([])}
+        initialValues={{ teamId: 'team-1' }}
+        onSubmit={() => {}}
+      />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'ui.forms.select.emptyOption': '—',
+        },
+      },
+    )
+
+    expect(getByRole('combobox')).not.toHaveTextContent('Engineering')
+
+    await act(async () => {
+      rerender(
+        <CrudForm
+          title="Form"
+          fields={makeFields([{ value: 'team-1', label: 'Engineering' }])}
+          initialValues={{ teamId: 'team-1' }}
+          onSubmit={() => {}}
+        />,
+      )
+    })
+
+    await waitFor(() => {
+      expect(getByRole('combobox')).toHaveTextContent('Engineering')
+    })
+  })
+
   it('does not re-invoke loadOptions on parent re-render (#814)', async () => {
     const loader = jest.fn().mockResolvedValue([{ label: 'A', value: 'a' }])
     const baseFields: CrudField[] = [