diff --git a/packages/payload/src/admin/components/elements/ArrayAction/index.tsx b/packages/payload/src/admin/components/elements/ArrayAction/index.tsx index 020b2d27d..363275808 100644 --- a/packages/payload/src/admin/components/elements/ArrayAction/index.tsx +++ b/packages/payload/src/admin/components/elements/ArrayAction/index.tsx @@ -66,7 +66,7 @@ export const ArrayAction: React.FC = ({ { - addRow(index + 1) + addRow(index) close() }} > diff --git a/packages/payload/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts b/packages/payload/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts index d465ba893..054985295 100644 --- a/packages/payload/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts +++ b/packages/payload/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts @@ -140,8 +140,8 @@ export const addFieldStatePromise = async ({ fieldState.value = null fieldState.initialValue = null } else { - fieldState.value = arrayValue.length - fieldState.initialValue = arrayValue.length + fieldState.value = arrayValue + fieldState.initialValue = arrayValue if (arrayValue.length > 0) { fieldState.disableFormData = true @@ -230,8 +230,8 @@ export const addFieldStatePromise = async ({ fieldState.value = null fieldState.initialValue = null } else { - fieldState.value = blocksValue.length - fieldState.initialValue = blocksValue.length + fieldState.value = blocksValue + fieldState.initialValue = blocksValue if (blocksValue.length > 0) { fieldState.disableFormData = true diff --git a/packages/payload/src/admin/components/forms/Form/fieldReducer.ts b/packages/payload/src/admin/components/forms/Form/fieldReducer.ts index 17368f49a..d5f1029a1 100644 --- a/packages/payload/src/admin/components/forms/Form/fieldReducer.ts +++ b/packages/payload/src/admin/components/forms/Form/fieldReducer.ts @@ -123,7 +123,7 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { ...state[path], disableFormData: rows.length > 0, rows: rowsMetadata, - value: rows.length, + value: rows, }, ...flattenRows(path, rows), } @@ -136,7 +136,7 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { const rowsMetadata = [...(state[path]?.rows || [])] rowsMetadata.splice( - rowIndex + 1, + rowIndex, 0, // new row { @@ -158,7 +158,7 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { const { remainingFields, rows } = separateRows(path, state) // actual form state (value saved in db) - rows.splice(rowIndex + 1, 0, subFieldState) + rows.splice(rowIndex, 0, subFieldState) const newState: Fields = { ...remainingFields, @@ -167,7 +167,7 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { ...state[path], disableFormData: true, rows: rowsMetadata, - value: rows.length, + value: rows, }, } @@ -205,7 +205,7 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { ...state[path], disableFormData: true, rows: rowsMetadata, - value: rows.length, + value: rows, }, } @@ -236,7 +236,7 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { ...state[path], disableFormData: true, rows: rowsMetadata, - value: rows.length, + value: rows, }, ...flattenRows(path, rows), } diff --git a/packages/payload/src/admin/components/forms/Form/index.tsx b/packages/payload/src/admin/components/forms/Form/index.tsx index 12e5f1d3c..bb47c873b 100644 --- a/packages/payload/src/admin/components/forms/Form/index.tsx +++ b/packages/payload/src/admin/components/forms/Form/index.tsx @@ -463,7 +463,7 @@ const Form: React.FC = (props) => { dispatchFields({ blockType: data?.blockType, path, - rowIndex: rowIndex - 1, + rowIndex, subFieldState, type: 'ADD_ROW', }) @@ -501,7 +501,7 @@ const Form: React.FC = (props) => { dispatchFields({ blockType: data?.blockType, path, - rowIndex: rowIndex - 1, + rowIndex, subFieldState, type: 'REPLACE_ROW', }) diff --git a/packages/payload/src/admin/components/forms/field-types/Array/index.tsx b/packages/payload/src/admin/components/forms/field-types/Array/index.tsx index 085315230..4a29a03c9 100644 --- a/packages/payload/src/admin/components/forms/field-types/Array/index.tsx +++ b/packages/payload/src/admin/components/forms/field-types/Array/index.tsx @@ -20,9 +20,9 @@ import { useForm, useFormSubmitted } from '../../Form/context' import { NullifyLocaleField } from '../../NullifyField' import useField from '../../useField' import withCondition from '../../withCondition' +import { fieldBaseClass } from '../shared' import { ArrayRow } from './ArrayRow' import './index.scss' -import { fieldBaseClass } from '../shared' const baseClass = 'array-field' @@ -91,7 +91,7 @@ const ArrayFieldType: React.FC = (props) => { showError, valid, value, - } = useField({ + } = useField<[]>({ condition, hasRows: true, path, @@ -111,20 +111,20 @@ const ArrayFieldType: React.FC = (props) => { ) const duplicateRow = useCallback( - async (rowIndex: number) => { + (rowIndex: number) => { dispatchFields({ path, rowIndex, type: 'DUPLICATE_ROW' }) setModified(true) setTimeout(() => { - scrollToID(`${path}-row-${rowIndex + 1}`) + scrollToID(`${path}-row-${rowIndex}`) }, 0) }, [dispatchFields, path, setModified], ) const removeRow = useCallback( - (rowIndex: number) => { - removeFieldRow({ path, rowIndex }) + async (rowIndex: number) => { + await removeFieldRow({ path, rowIndex }) setModified(true) }, [removeFieldRow, path, setModified], @@ -139,14 +139,14 @@ const ArrayFieldType: React.FC = (props) => { ) const toggleCollapseAll = useCallback( - async (collapsed: boolean) => { + (collapsed: boolean) => { dispatchFields({ collapsed, path, setDocFieldPreferences, type: 'SET_ALL_ROWS_COLLAPSED' }) }, [dispatchFields, path, setDocFieldPreferences], ) const setCollapse = useCallback( - async (rowID: string, collapsed: boolean) => { + (rowID: string, collapsed: boolean) => { dispatchFields({ collapsed, path, rowID, setDocFieldPreferences, type: 'SET_ROW_COLLAPSED' }) }, [dispatchFields, path, setDocFieldPreferences], @@ -274,11 +274,11 @@ const ArrayFieldType: React.FC = (props) => { {!readOnly && !hasMaxRows && ( diff --git a/packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx b/packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx index b886cf0b3..b30b3529b 100644 --- a/packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx +++ b/packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx @@ -90,7 +90,7 @@ const BlocksField: React.FC = (props) => { showError, valid, value, - } = useField({ + } = useField<[]>({ condition, hasRows: true, path, @@ -99,7 +99,7 @@ const BlocksField: React.FC = (props) => { const addRow = useCallback( async (rowIndex: number, blockType: string) => { - addFieldRow({ + await addFieldRow({ data: { blockType, }, @@ -116,7 +116,7 @@ const BlocksField: React.FC = (props) => { ) const duplicateRow = useCallback( - async (rowIndex: number) => { + (rowIndex: number) => { dispatchFields({ path, rowIndex, type: 'DUPLICATE_ROW' }) setModified(true) @@ -128,8 +128,8 @@ const BlocksField: React.FC = (props) => { ) const removeRow = useCallback( - (rowIndex: number) => { - removeFieldRow({ path, rowIndex }) + async (rowIndex: number) => { + await removeFieldRow({ path, rowIndex }) setModified(true) }, [path, removeFieldRow, setModified], @@ -144,14 +144,14 @@ const BlocksField: React.FC = (props) => { ) const toggleCollapseAll = useCallback( - async (collapsed: boolean) => { + (collapsed: boolean) => { dispatchFields({ collapsed, path, setDocFieldPreferences, type: 'SET_ALL_ROWS_COLLAPSED' }) }, [dispatchFields, path, setDocFieldPreferences], ) const setCollapse = useCallback( - async (rowID: string, collapsed: boolean) => { + (rowID: string, collapsed: boolean) => { dispatchFields({ collapsed, path, rowID, setDocFieldPreferences, type: 'SET_ROW_COLLAPSED' }) }, [dispatchFields, path, setDocFieldPreferences], @@ -297,7 +297,7 @@ const BlocksField: React.FC = (props) => { = ( value, { maxRows, minRows, required, t }, ) => { - if (minRows && value < minRows) { + const arrayLength = Array.isArray(value) ? value.length : 0 + + if (minRows && arrayLength < minRows) { return t('validation:requiresAtLeast', { count: minRows, label: t('rows') }) } - if (maxRows && value > maxRows) { + if (maxRows && arrayLength > maxRows) { return t('validation:requiresNoMoreThan', { count: maxRows, label: t('rows') }) } - if (!value && required) { + if (!arrayLength && required) { return t('validation:requiresAtLeast', { count: 1, label: t('row') }) } @@ -456,15 +458,17 @@ export const blocks: Validate = ( value, { maxRows, minRows, required, t }, ) => { - if (minRows && value < minRows) { + const arrayLength = Array.isArray(value) ? value.length : 0 + + if (minRows && arrayLength < minRows) { return t('validation:requiresAtLeast', { count: minRows, label: t('rows') }) } - if (maxRows && value > maxRows) { + if (maxRows && arrayLength > maxRows) { return t('validation:requiresNoMoreThan', { count: maxRows, label: t('rows') }) } - if (!value && required) { + if (!arrayLength && required) { return t('validation:requiresAtLeast', { count: 1, label: t('row') }) } diff --git a/test/fields/collections/Array/components/AddCustomBlocks/index.tsx b/test/fields/collections/Array/components/AddCustomBlocks/index.tsx index afee09594..68f2c0ec0 100644 --- a/test/fields/collections/Array/components/AddCustomBlocks/index.tsx +++ b/test/fields/collections/Array/components/AddCustomBlocks/index.tsx @@ -10,7 +10,7 @@ export const AddCustomBlocks: React.FC = () => { const { addFieldRow, replaceFieldRow } = useForm() const { value } = useField({ path: 'customBlocks' }) - const nextIndex = typeof value === 'number' ? value + 1 : 0 + const nextIndex = Array.isArray(value) ? value.length : 0 return (
@@ -56,7 +56,7 @@ export const AddCustomBlocks: React.FC = () => { } type="button" > - Replace Block {nextIndex - 1} + Replace Block {nextIndex}