fix: ensures adding array / block rows modifies form state

src/admin/components/forms/DraggableSection/index.tsx

@@ -80,7 +80,6 @@ const DraggableSection: React.FC<Props> = (props) => {
                   <HiddenInput
                     name={`${parentPath}.${rowIndex}.id`}
                     value={id}
-                    modifyForm={false}
                   />
                   <SectionTitle
                     label={label}

src/admin/components/forms/Form/fieldReducer.ts

@@ -18,7 +18,7 @@ const unflattenRowsFromState = (state: Fields, path) => {
   // Add value to rowsFromStateObject and delete it from remaining state
   Object.keys(state).forEach((key) => {
     if (key.indexOf(`${path}.`) === 0) {
-      if (!state[key].ignoreWhileFlattening) {
+      if (!state[key].disableFormData) {
         const name = key.replace(pathPrefixToRemove, '');
         rowsFromStateObject[name] = state[key];
         rowsFromStateObject[name].initialValue = rowsFromStateObject[name].value;
@@ -167,7 +167,6 @@ function fieldReducer(state: Fields, action): Fields {
         valid: action.valid,
         errorMessage: action.errorMessage,
         disableFormData: action.disableFormData,
-        ignoreWhileFlattening: action.ignoreWhileFlattening,
         initialValue: action.initialValue,
         validate: action.validate,
         condition: action.condition,

src/admin/components/forms/Form/types.ts

@@ -8,7 +8,6 @@ export type Field = {
   valid: boolean
   validate?: Validate
   disableFormData?: boolean
-  ignoreWhileFlattening?: boolean
   condition?: Condition
   passesCondition?: boolean
 }

src/admin/components/forms/field-types/Array/Array.tsx

@@ -77,7 +77,6 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     path,
     validate: memoizedValidate,
     disableFormData,
-    ignoreWhileFlattening: true,
     condition,
   });
 
@@ -111,7 +110,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
   }, [formContext, path]);
 
   useEffect(() => {
-    setValue(rows?.length || 0);
+    setValue(rows?.length || 0, true);
 
     if (rows?.length === 0) {
       setDisableFormData(false);

src/admin/components/forms/field-types/Blocks/Blocks.tsx

@@ -78,7 +78,6 @@ const Blocks: React.FC<Props> = (props) => {
     path,
     validate: memoizedValidate,
     disableFormData,
-    ignoreWhileFlattening: true,
     condition,
   });
 
@@ -161,7 +160,7 @@ const Blocks: React.FC<Props> = (props) => {
   }, [formContext, path]);
 
   useEffect(() => {
-    setValue(rows?.length || 0);
+    setValue(rows?.length || 0, true);
 
     if (rows?.length === 0) {
       setDisableFormData(false);

src/admin/components/forms/field-types/HiddenInput/index.tsx

@@ -8,7 +8,7 @@ const HiddenInput: React.FC<Props> = (props) => {
     name,
     path: pathFromProps,
     value: valueFromProps,
-    modifyForm = true,
+    disableModifyingForm = true,
   } = props;
 
   const path = pathFromProps || name;
@@ -19,9 +19,9 @@ const HiddenInput: React.FC<Props> = (props) => {
 
   useEffect(() => {
     if (valueFromProps !== undefined) {
-      setValue(valueFromProps, modifyForm);
+      setValue(valueFromProps, disableModifyingForm);
     }
-  }, [valueFromProps, setValue, modifyForm]);
+  }, [valueFromProps, setValue, disableModifyingForm]);
 
   return (
     <input

src/admin/components/forms/field-types/HiddenInput/types.ts

@@ -2,5 +2,5 @@ export type Props = {
   name: string
   path?: string
   value: unknown
-  modifyForm?: boolean
+  disableModifyingForm?: false
 }

src/admin/components/forms/useField/index.tsx

@@ -14,7 +14,6 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
     validate,
     enableDebouncedValue,
     disableFormData,
-    ignoreWhileFlattening,
     condition,
   } = options;
 
@@ -66,7 +65,6 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
     const fieldToDispatch = {
       path,
       disableFormData,
-      ignoreWhileFlattening,
       initialValue,
       validate,
       condition,
@@ -105,7 +103,6 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
     getData,
     getSiblingData,
     id,
-    ignoreWhileFlattening,
     initialValue,
     operation,
     path,
@@ -116,10 +113,10 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
   // Method to return from `useField`, used to
   // update internal field values from field component(s)
   // as fast as they arrive. NOTE - this method is NOT debounced
-  const setValue = useCallback((e, modifyForm = true) => {
+  const setValue = useCallback((e, disableModifyingForm = false) => {
     const val = (e && e.target) ? e.target.value : e;
 
-    if ((!ignoreWhileFlattening && !modified) && modifyForm) {
+    if (!modified && !disableModifyingForm) {
       if (typeof setModified === 'function') {
         setModified(true);
       }
@@ -128,7 +125,6 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
   }, [
     setModified,
     modified,
-    ignoreWhileFlattening,
   ]);
 
   useEffect(() => {