fix: ensures field updates when disableFormData changes

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

@@ -3,7 +3,7 @@ import { unflatten, flatten } from 'flatley';
 import flattenFilters from './flattenFilters';
 import getSiblingData from './getSiblingData';
 import reduceFieldsToValues from './reduceFieldsToValues';
-import { FieldAction, Fields } from './types';
+import { Field, FieldAction, Fields } from './types';
 import deepCopyObject from '../../../../utilities/deepCopyObject';
 
 const unflattenRowsFromState = (state: Fields, path: string) => {
@@ -187,16 +187,16 @@ function fieldReducer(state: Fields, action: FieldAction): Fields {
     }
 
     case 'UPDATE': {
-      const newField = {
-        value: action.value,
-        valid: action.valid,
-        errorMessage: action.errorMessage,
-        disableFormData: action.disableFormData,
-        initialValue: action.initialValue,
-        validate: action.validate,
-        condition: action.condition,
-        passesCondition: action.passesCondition,
-      };
+      const newField = Object.entries(action).reduce((field, [key, value]) => {
+        if (['value', 'valid', 'errorMessage', 'disableFormData', 'initialValue', 'validate', 'condition', 'passesCondition'].includes(key)) {
+          return {
+            ...field,
+            [key]: value,
+          };
+        }
+
+        return field;
+      }, state[action.path] || {} as Field);
 
       return {
         ...state,

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useAuth } from '../../utilities/Auth';
 import { useFormProcessing, useFormSubmitted, useFormModified, useForm, useFormFields } from '../Form/context';
 import { Options, FieldType } from './types';
@@ -28,6 +28,7 @@ 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;
 
@@ -121,6 +122,16 @@ 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;
 };