@open-mercato/ui 0.6.5-develop.4695.1.42ee0ddf0e → 0.6.5-develop.4718.1.56d834bb34

package/package.json

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

package/src/backend/CrudForm.tsx

@@ -560,6 +560,10 @@ function createDirtySnapshot(source: Record<string, unknown>): string {
   return JSON.stringify(normalizeDirtySnapshotValue(source) ?? {})
 }
 
+function createDirtyValueSnapshot(value: unknown): string {
+  return JSON.stringify(normalizeDirtySnapshotValue(value) ?? null)
+}
+
 const FIELDSET_ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: string }>> = {
   layers: Layers,
   tag: Tag,
@@ -931,6 +935,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   const clearDirtyState = React.useCallback((snapshotSource?: Record<string, unknown>) => {
     const source = snapshotSource ?? (valuesRef.current as Record<string, unknown>)
     dirtyBaselineSnapshotRef.current = createDirtySnapshot(source)
+    dirtyBaselineValuesRef.current = { ...source }
+    userEditedFieldIdsRef.current.clear()
     isDirtyRef.current = false
     setHasUnsavedChanges(false)
   }, [])
@@ -2209,14 +2215,46 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     }
   }, [errors, formId])
 
+  const updateEditedFieldMarker = React.useCallback((
+    id: string,
+    nextValue: unknown,
+    baselineSource: Record<string, unknown> | undefined = dirtyBaselineValuesRef.current,
+  ) => {
+    if (
+      baselineSource &&
+      createDirtyValueSnapshot(baselineSource[id]) === createDirtyValueSnapshot(nextValue)
+    ) {
+      userEditedFieldIdsRef.current.delete(id)
+      return
+    }
+    userEditedFieldIdsRef.current.add(id)
+  }, [])
+
   const setValue = React.useCallback((id: string, nextValue: unknown) => {
     let nextData: CrudFormValues<TValues> | null = null
+    let nextDirty: boolean | null = null
+    const currentValue = (valuesRef.current as Record<string, unknown>)[id]
+    if (!Object.is(currentValue, nextValue)) {
+      updateEditedFieldMarker(id, nextValue)
+    }
     setValues((prev) => {
       if (Object.is(prev[id], nextValue)) return prev
+      const baselineSource = dirtyBaselineValuesRef.current ?? (prev as Record<string, unknown>)
+      updateEditedFieldMarker(id, nextValue, baselineSource)
       nextData = { ...prev, [id]: nextValue } as CrudFormValues<TValues>
       valuesRef.current = nextData
+      if (!(embedded && !trackDirtyWhenEmbedded)) {
+        const baseline = dirtyBaselineSnapshotRef.current ?? createDirtySnapshot(prev as Record<string, unknown>)
+        dirtyBaselineSnapshotRef.current = baseline
+        dirtyBaselineValuesRef.current = baselineSource
+        nextDirty = createDirtySnapshot(nextData as Record<string, unknown>) !== baseline
+      }
       return nextData
     })
+    if (nextDirty !== null) {
+      isDirtyRef.current = nextDirty
+      setHasUnsavedChanges(nextDirty)
+    }
     const clearedMessages: string[] = []
     setErrors((prev) => {
       if (!Object.keys(prev).length) return prev
@@ -2281,7 +2319,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     }).catch((err) => {
       console.error('[CrudForm] Error in onFieldChange:', err)
     })
-  }, [extendedInjectionEventsEnabled, flash, t, translateValidationMessage, triggerInjectionEvent])
+  }, [embedded, extendedInjectionEventsEnabled, flash, t, trackDirtyWhenEmbedded, translateValidationMessage, triggerInjectionEvent, updateEditedFieldMarker])
 
   const onBlurRequest = React.useCallback((fieldId: string) => {
     void validateFieldOnBlur(fieldId)
@@ -2309,6 +2347,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
 
   const appliedInitialValuesSnapshotRef = React.useRef<string | undefined>(undefined)
   const dirtyBaselineSnapshotRef = React.useRef<string | undefined>(undefined)
+  const dirtyBaselineValuesRef = React.useRef<Record<string, unknown> | undefined>(undefined)
+  const userEditedFieldIdsRef = React.useRef<Set<string>>(new Set())
   React.useLayoutEffect(() => {
     if (!initialValues) return
     const snapshot = JSON.stringify({
@@ -2330,10 +2370,17 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     let hadUnsavedEdits = false
     setValues((prev) => {
       const priorBaseline = dirtyBaselineSnapshotRef.current
+      const editedFieldIds = userEditedFieldIdsRef.current
       hadUnsavedEdits =
+        editedFieldIds.size > 0 ||
         priorBaseline !== undefined &&
         createDirtySnapshot(prev as Record<string, unknown>) !== priorBaseline
-      const merged = { ...prev, ...initialValues } as CrudFormValues<TValues>
+      const merged = { ...prev } as CrudFormValues<TValues>
+      const mergedRecord = merged as Record<string, unknown>
+      for (const [key, value] of Object.entries(initialValues as Record<string, unknown>)) {
+        if (editedFieldIds.has(key)) continue
+        mergedRecord[key] = value
+      }
       for (const definition of injectedFieldDefinitions) {
         if (merged[definition.id] !== undefined) continue
         const extracted = readByDotPath(initialRecord, definition.id)
@@ -2371,6 +2418,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       // baseline so the edit stays dirty until save/discard. Root cause of the flaky
       // optimistic-lock stale-edit conflicts (#2055 / TC-LOCK-OSS-015 / TC-LOCK-OSS-029).
       dirtyBaselineSnapshotRef.current = createDirtySnapshot(mergedValues as Record<string, unknown>)
+      dirtyBaselineValuesRef.current = { ...(mergedValues as Record<string, unknown>) }
     }
     if (!extendedInjectionEventsEnabled || !mergedValues) return
     let cancelled = false
@@ -2387,6 +2435,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         // edit — it would overwrite the user's unsaved changes and reset dirty.
         if (isDirtyRef.current) return
         dirtyBaselineSnapshotRef.current = createDirtySnapshot(transformed as Record<string, unknown>)
+        dirtyBaselineValuesRef.current = { ...(transformed as Record<string, unknown>) }
         setValues(transformed as CrudFormValues<TValues>)
       } catch (err) {
         console.error('[CrudForm] Error in transformDisplayData:', err)
@@ -2457,6 +2506,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     // Update the dirty baseline so the form doesn't appear dirty from defaults
     if (mergedValues) {
       dirtyBaselineSnapshotRef.current = createDirtySnapshot(mergedValues as Record<string, unknown>)
+      dirtyBaselineValuesRef.current = { ...(mergedValues as Record<string, unknown>) }
     }
   }, [isLoading, initialValuesHasId, cfDefinitions, customEntity])
 

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

@@ -62,6 +62,126 @@ describe('CrudForm unsaved navigation guard', () => {
     expect(event.returnValue).toBe('')
   })
 
+  it('marks the form dirty on the first edit even when no baseline has been initialized yet', async () => {
+    const onDirtyChange = jest.fn()
+    const { container } = renderWithProviders(
+      <CrudForm title="Form" fields={fields} onSubmit={() => {}} onDirtyChange={onDirtyChange} />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'ui.forms.confirmUnsavedChanges': 'Unsaved changes',
+        },
+      },
+    )
+
+    const input = container.querySelector('[data-crud-field-id="name"] input[type="text"]') as HTMLInputElement
+    await act(async () => {
+      fireEvent.change(input, { target: { value: 'Alice updated' } })
+    })
+
+    expect(onDirtyChange).toHaveBeenLastCalledWith(true)
+
+    const event = new Event('beforeunload', { cancelable: true }) as BeforeUnloadEvent
+    Object.defineProperty(event, 'returnValue', { writable: true, value: undefined })
+    window.dispatchEvent(event)
+
+    expect(event.defaultPrevented).toBe(true)
+  })
+
+  it('keeps a first edit dirty when late initialValues refresh after the user types', async () => {
+    const onDirtyChange = jest.fn()
+    const view = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        initialValues={{ name: 'Alice' }}
+        embedded
+        trackDirtyWhenEmbedded
+        onDirtyChange={onDirtyChange}
+        onSubmit={() => {}}
+      />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'ui.forms.confirmUnsavedChanges': 'Unsaved changes',
+        },
+      },
+    )
+
+    const input = view.container.querySelector('[data-crud-field-id="name"] input[type="text"]') as HTMLInputElement
+    await act(async () => {
+      fireEvent.change(input, { target: { value: 'Alice updated' } })
+    })
+    expect(onDirtyChange).toHaveBeenLastCalledWith(true)
+
+    await act(async () => {
+      view.rerender(
+        <CrudForm
+          title="Form"
+          fields={fields}
+          initialValues={{ name: 'Alice from server' }}
+          embedded
+          trackDirtyWhenEmbedded
+          onDirtyChange={onDirtyChange}
+          onSubmit={() => {}}
+        />,
+      )
+    })
+
+    expect(input).toHaveValue('Alice updated')
+    expect(onDirtyChange).toHaveBeenLastCalledWith(true)
+  })
+
+  it('accepts late initialValues refresh after the edited field is reverted to baseline', async () => {
+    const onDirtyChange = jest.fn()
+    const view = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        initialValues={{ name: 'Alice' }}
+        embedded
+        trackDirtyWhenEmbedded
+        onDirtyChange={onDirtyChange}
+        onSubmit={() => {}}
+      />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'ui.forms.confirmUnsavedChanges': 'Unsaved changes',
+        },
+      },
+    )
+
+    const input = view.container.querySelector('[data-crud-field-id="name"] input[type="text"]') as HTMLInputElement
+    await act(async () => {
+      fireEvent.change(input, { target: { value: 'Alice updated' } })
+    })
+    expect(onDirtyChange).toHaveBeenLastCalledWith(true)
+
+    await act(async () => {
+      fireEvent.change(input, { target: { value: 'Alice' } })
+      fireEvent.blur(input)
+    })
+    expect(onDirtyChange).toHaveBeenLastCalledWith(false)
+
+    await act(async () => {
+      view.rerender(
+        <CrudForm
+          title="Form"
+          fields={fields}
+          initialValues={{ name: 'Alice from server' }}
+          embedded
+          trackDirtyWhenEmbedded
+          onDirtyChange={onDirtyChange}
+          onSubmit={() => {}}
+        />,
+      )
+    })
+
+    expect(input).toHaveValue('Alice from server')
+    expect(onDirtyChange).toHaveBeenLastCalledWith(false)
+  })
+
   it('blocks router-driven history pushes until the user confirms leaving', async () => {
     confirmDialogMock.mockResolvedValueOnce(false)