fixes state initialization in Array and Blocks

src/client/components/forms/Form/index.js

@@ -12,6 +12,7 @@ import useThrottledEffect from '../../../hooks/useThrottledEffect';
 import { useUser } from '../../data/User';
 import fieldReducer from './fieldReducer';
 import initContextState from './initContextState';
+import reduceFieldsToValues from './reduceFieldsToValues';
 
 import { SubmittedContext, ProcessingContext, ModifiedContext, FormContext, FieldContext } from './context';
 
@@ -19,22 +20,6 @@ import './index.scss';
 
 const baseClass = 'form';
 
-const reduceFieldsToValues = (fields, flatten) => {
-  const data = {};
-
-  Object.keys(fields).forEach((key) => {
-    if (!fields[key].disableFormData && fields[key].value !== undefined) {
-      data[key] = fields[key].value;
-    }
-  });
-
-  if (flatten) {
-    return unflatten(data, { safe: true });
-  }
-
-  return data;
-};
-
 const Form = (props) => {
   const {
     disabled,
@@ -122,6 +107,8 @@ const Form = (props) => {
         clearStatus();
 
         if (res.status < 400) {
+          setSubmitted(false);
+
           if (typeof onSuccess === 'function') onSuccess(json);
 
           if (redirect) {

src/client/components/forms/Form/reduceFieldsToValues.js

@@ -0,0 +1,19 @@
+import { unflatten } from 'flatley';
+
+const reduceFieldsToValues = (fields, flatten) => {
+  const data = {};
+
+  Object.keys(fields).forEach((key) => {
+    if (!fields[key].disableFormData && fields[key].value !== undefined) {
+      data[key] = fields[key].value;
+    }
+  });
+
+  if (flatten) {
+    return unflatten(data, { safe: true });
+  }
+
+  return data;
+};
+
+export default reduceFieldsToValues;

src/client/components/forms/field-types/Array/Array.js

@@ -11,6 +11,7 @@ import { useForm } from '../../Form/context';
 import useFieldType from '../../useFieldType';
 import Error from '../../Error';
 import { array } from '../../../../../fields/validations';
+import reduceFieldsToValues from '../../Form/reduceFieldsToValues';
 
 import './index.scss';
 
@@ -36,7 +37,7 @@ const ArrayFieldType = (props) => {
 
   const [rows, dispatchRows] = useReducer(reducer, []);
   const { customComponentsPath } = useRenderedFields();
-  const { getDataByPath, initialState, dispatchFields } = useForm();
+  const { initialState, dispatchFields } = useForm();
 
   const path = pathFromProps || name;
 
@@ -84,9 +85,12 @@ const ArrayFieldType = (props) => {
   }, [moveRow]);
 
   useEffect(() => {
-    const data = getDataByPath(path);
-    dispatchRows({ type: 'SET_ALL', data });
-  }, [initialState, getDataByPath, path]);
+    const data = reduceFieldsToValues(initialState, true);
+
+    if (data?.[name]) {
+      dispatchRows({ type: 'SET_ALL', data: data[name] });
+    }
+  }, [initialState, name]);
 
   useEffect(() => {
     setValue(rows?.length || 0);

src/client/components/forms/field-types/Blocks/Blocks.js

@@ -15,6 +15,7 @@ import useFieldType from '../../useFieldType';
 import Popup from '../../../elements/Popup';
 import BlockSelector from './BlockSelector';
 import { blocks as blocksValidator } from '../../../../../fields/validations';
+import reduceFieldsToValues from '../../Form/reduceFieldsToValues';
 
 import './index.scss';
 
@@ -42,7 +43,7 @@ const Blocks = (props) => {
 
   const [rows, dispatchRows] = useReducer(reducer, []);
   const { customComponentsPath } = useRenderedFields();
-  const { getDataByPath, initialState, dispatchFields } = useForm();
+  const { initialState, dispatchFields } = useForm();
 
   const memoizedValidate = useCallback((value) => {
     const validationResult = validate(
@@ -100,9 +101,12 @@ const Blocks = (props) => {
   }, [moveRow]);
 
   useEffect(() => {
-    const data = getDataByPath(path);
-    dispatchRows({ type: 'SET_ALL', data });
-  }, [initialState, getDataByPath, path]);
+    const data = reduceFieldsToValues(initialState, true);
+
+    if (data?.[name]) {
+      dispatchRows({ type: 'SET_ALL', data: data[name] });
+    }
+  }, [initialState, name]);
 
   useEffect(() => {
     setValue(rows?.length || 0);
@@ -297,6 +301,7 @@ RenderBlocks.defaultProps = {
   path: '',
   customComponentsPath: undefined,
   value: undefined,
+  readOnly: false,
 };
 
 RenderBlocks.propTypes = {
@@ -323,6 +328,7 @@ RenderBlocks.propTypes = {
     PropTypes.shape({}),
   ).isRequired,
   toggleCollapse: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
 };
 
 export default withCondition(Blocks);

src/client/components/forms/field-types/RadioGroup/RadioInput/index.js

@@ -6,21 +6,22 @@ import './index.scss';
 const baseClass = 'radio-input';
 
 const RadioInput = (props) => {
-  const { isSelected, option, onChange } = props;
+  const { isSelected, option, onChange, path } = props;
 
   const classes = [
     baseClass,
     isSelected && `${baseClass}--is-selected`,
   ].filter(Boolean).join(' ');
 
+  const id = `${path}-${option.value}`;
+
   return (
     <label
-
-      htmlFor={option.label}
+      htmlFor={id}
     >
       <div className={classes}>
         <input
-          id={option.label}
+          id={id}
           type="radio"
           checked={isSelected}
           onChange={() => (typeof onChange === 'function' ? onChange(option.value) : null)}
@@ -44,6 +45,7 @@ RadioInput.propTypes = {
     value: PropTypes.string,
   }).isRequired,
   onChange: PropTypes.func,
+  path: PropTypes.string.isRequired,
 };
 
 export default RadioInput;