From aa87b6da8a8191941204a9a5c42f84023a291ba2 Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Tue, 21 Apr 2026 18:17:30 +0200
Subject: [PATCH] fix(admin): mark form modified when adding/removing product
 images
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Calling dispatchFields({ type: 'ADD_ROW' }) directly bypasses
setModified(true), so the form never registered uploads as changes —
no autosave, no publish. Switch to addFieldRow/removeFieldRow helpers
from useForm, which dispatch and mark modified in one step.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 nextjs/src/components/admin/ImageUploadSlot.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/nextjs/src/components/admin/ImageUploadSlot.tsx b/nextjs/src/components/admin/ImageUploadSlot.tsx
index 9a3491f..a31dbca 100644
--- a/nextjs/src/components/admin/ImageUploadSlot.tsx
+++ b/nextjs/src/components/admin/ImageUploadSlot.tsx
@@ -20,7 +20,7 @@ function extractMediaId(value: unknown): string | number | null {
 
 export function ImageUploadSlot({ displayName }: Props) {
   const { rows } = useField<unknown>({ path: 'images', hasRows: true })
-  const { dispatchFields, getDataByPath } = useForm()
+  const { addFieldRow, removeFieldRow, getDataByPath } = useForm()
   const fileInput = useRef<HTMLInputElement | null>(null)
   const [uploading, setUploading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -78,8 +78,7 @@ export function ImageUploadSlot({ displayName }: Props) {
 
   const appendRow = useCallback(
     (mediaId: number | string) => {
-      dispatchFields({
-        type: 'ADD_ROW',
+      addFieldRow({
         path: 'images',
         rowIndex: rowCount,
         subFieldState: {
@@ -87,18 +86,17 @@ export function ImageUploadSlot({ displayName }: Props) {
         },
       })
     },
-    [dispatchFields, rowCount],
+    [addFieldRow, rowCount],
   )
 
   const removeRow = useCallback(
     (rowIndex: number) => {
-      dispatchFields({
-        type: 'REMOVE_ROW',
+      removeFieldRow({
         path: 'images',
         rowIndex,
       })
     },
-    [dispatchFields],
+    [removeFieldRow],
   )
 
   const onFile = async (e: React.ChangeEvent<HTMLInputElement>) => {