fix: #1307, #1321 - bug with disableFormData and blocks field

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

@@ -76,8 +76,6 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     return validate(value, { ...options, minRows, maxRows, required });
   }, [maxRows, minRows, required, validate]);
 
-  const [disableFormData, setDisableFormData] = useState(true);
-
   const {
     showError,
     errorMessage,
@@ -86,7 +84,6 @@ const ArrayFieldType: React.FC<Props> = (props) => {
   } = useField({
     path,
     validate: memoizedValidate,
-    disableFormData,
     condition,
   });
 
@@ -194,14 +191,17 @@ const ArrayFieldType: React.FC<Props> = (props) => {
   }, [formContext, path, getPreference, preferencesKey, initCollapsed]);
 
   useEffect(() => {
-    setValue(rows?.length || 0, true);
+    if (typeof rows !== 'undefined') {
+      const disableFormData = rows.length > 0;
 
-    if (rows?.length === 0) {
-      setDisableFormData(false);
-    } else {
-      setDisableFormData(true);
+      dispatchFields({
+        type: 'UPDATE',
+        path,
+        disableFormData,
+        value: rows.length,
+      });
     }
-  }, [rows, setValue]);
+  }, [rows, dispatchFields, path]);
 
   const hasMaxRows = maxRows && rows?.length >= maxRows;
 

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

@@ -76,7 +76,6 @@ const BlocksField: React.FC<Props> = (props) => {
     return validate(value, { ...options, minRows, maxRows, required });
   }, [maxRows, minRows, required, validate]);
 
-  const [disableFormData, setDisableFormData] = useState(true);
   const [selectorIndexOpen, setSelectorIndexOpen] = useState<number>();
 
   const {
@@ -87,7 +86,6 @@ const BlocksField: React.FC<Props> = (props) => {
   } = useField<number>({
     path,
     validate: memoizedValidate,
-    disableFormData,
     condition,
   });
 
@@ -200,14 +198,17 @@ const BlocksField: React.FC<Props> = (props) => {
   }, [formContext, path, getPreference, preferencesKey, initCollapsed]);
 
   useEffect(() => {
-    setValue(rows?.length || 0, true);
+    if (typeof rows !== 'undefined') {
+      const disableFormData = rows.length > 0;
 
-    if (rows?.length === 0) {
-      setDisableFormData(false);
-    } else {
-      setDisableFormData(true);
+      dispatchFields({
+        type: 'UPDATE',
+        path,
+        disableFormData,
+        value: rows.length,
+      });
     }
-  }, [rows, setValue]);
+  }, [rows, dispatchFields, path]);
 
   const hasMaxRows = maxRows && rows?.length >= maxRows;
 

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useAuth } from '../../utilities/Auth';
 import { useFormProcessing, useFormSubmitted, useFormModified, useForm, useFormFields } from '../Form/context';
 import { Options, FieldType } from './types';
@@ -28,7 +28,6 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
 
   const value = field?.value as T;
   const initialValue = field?.initialValue as T;
-  const fieldDisableFormData = field?.disableFormData;
   const valid = typeof field?.valid === 'boolean' ? field.valid : true;
   const showError = valid === false && submitted;
 
@@ -122,16 +121,6 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
     valid,
   ]);
 
-  useEffect(() => {
-    if (fieldDisableFormData !== disableFormData) {
-      dispatchField({
-        type: 'UPDATE',
-        path,
-        disableFormData,
-      });
-    }
-  }, [disableFormData, fieldDisableFormData, path, dispatchField]);
-
   return result;
 };