fix(admin): mark form modified when adding/removing product images
Some checks failed
Build & Deploy to K3s / build-and-deploy (push) Failing after 52s

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>
This commit is contained in:
ordinarthur 2026-04-21 18:17:30 +02:00
parent d44bad4c68
commit aa87b6da8a

View File

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