allows repeater and flex content to be properly duplicated

src/client/components/forms/field-types/Flexible/index.js

@@ -64,11 +64,12 @@ const Flexible = (props) => {
     required,
   });
 
+  const dataToInitialize = initialData || defaultValue;
   const parentRowsModified = useRowModified();
   const { toggle: toggleModal, closeAll: closeAllModals } = useModal();
   const [rowIndexBeingAdded, setRowIndexBeingAdded] = useState(null);
   const [lastModified, setLastModified] = useState(null);
-  const [rowCount, setRowCount] = useState(0);
+  const [rowCount, setRowCount] = useState(dataToInitialize?.length || 0);
   const [collapsibleStates, dispatchCollapsibleStates] = useReducer(collapsibleReducer, []);
   const formContext = useContext(FormContext);
   const modalSlug = `flexible-${path}`;
@@ -77,7 +78,6 @@ const Flexible = (props) => {
 
   const { dispatchFields, countRows, getFields } = formContext;
   const fieldState = getFields();
-  const dataToInitialize = initialData || defaultValue;
 
   const addRow = (rowIndex, blockType) => {
     const blockToAdd = blocks.find(block => block.slug === blockType);
@@ -134,12 +134,10 @@ const Flexible = (props) => {
     moveRow(sourceIndex, destinationIndex);
   };
 
-  const updateRowCountOnParentRowModified = () => {
+  useEffect(() => {
     const countedRows = countRows(path);
     setRowCount(countedRows);
-  };
-
-  useEffect(updateRowCountOnParentRowModified, [parentRowsModified]);
+  }, [countRows, path, parentRowsModified]);
 
   useEffect(() => {
     setRowCount(dataToInitialize.length);

src/client/components/forms/field-types/Repeater/index.js

@@ -36,10 +36,11 @@ const Repeater = (props) => {
     minRows,
   } = props;
 
+  const dataToInitialize = initialData || defaultValue;
   const parentRowsModified = useRowModified();
   const [collapsibleStates, dispatchCollapsibleStates] = useReducer(collapsibleReducer, []);
   const formContext = useContext(FormContext);
-  const [rowCount, setRowCount] = useState(0);
+  const [rowCount, setRowCount] = useState(dataToInitialize?.length || 0);
   const [lastModified, setLastModified] = useState(null);
   const { getFields, dispatchFields, countRows } = formContext;
   const { customComponentsPath } = useRenderedFields();
@@ -67,7 +68,6 @@ const Repeater = (props) => {
   });
 
   const fieldState = getFields();
-  const dataToInitialize = initialData || defaultValue;
 
   const addRow = (rowIndex) => {
     dispatchFields({
@@ -111,11 +111,6 @@ const Repeater = (props) => {
     setLastModified(Date.now());
   };
 
-  const updateRowCountOnParentRowModified = () => {
-    const countedRows = countRows(path);
-    setRowCount(countedRows);
-  };
-
   const onDragEnd = (result) => {
     if (!result.destination) return;
     const sourceIndex = result.source.index;
@@ -133,7 +128,10 @@ const Repeater = (props) => {
     });
   }, [dataToInitialize]);
 
-  useEffect(updateRowCountOnParentRowModified, [parentRowsModified]);
+  useEffect(() => {
+    const countedRows = countRows(path);
+    setRowCount(countedRows);
+  }, [countRows, path, parentRowsModified]);
 
   useEffect(() => {
     setLastModified(null);

src/client/components/views/collections/Edit/Default.js

@@ -23,7 +23,6 @@ const baseClass = 'collection-edit';
 
 const DefaultEditView = (props) => {
   const { params: { id } = {} } = useRouteMatch();
-  const { state: locationState } = useLocation();
 
   const {
     collection, isEditing, data, onSave,
@@ -39,7 +38,6 @@ const DefaultEditView = (props) => {
   } = collection;
 
   const apiURL = `${serverURL}${api}/${slug}/${id}`;
-  const dataToRender = locationState?.data || data;
   let action = `${serverURL}${api}/${slug}${isEditing ? `/${id}` : ''}`;
 
   if (auth && !isEditing) {
@@ -72,7 +70,7 @@ const DefaultEditView = (props) => {
               filter={field => (!field.position || (field.position && field.position !== 'sidebar'))}
               fieldTypes={fieldTypes}
               fieldSchema={fields}
-              initialData={dataToRender}
+              initialData={data}
               customComponentsPath={`${slug}.fields.`}
             />
           </div>
@@ -118,7 +116,7 @@ const DefaultEditView = (props) => {
               position="sidebar"
               fieldTypes={fieldTypes}
               fieldSchema={fields}
-              initialData={dataToRender}
+              initialData={data}
               customComponentsPath={`${slug}.fields.`}
             />
           </div>

src/client/components/views/collections/Edit/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import { useRouteMatch, useHistory, useLocation } from 'react-router-dom';
 import config from 'payload/config';
 import { useStepNav } from '../../../elements/StepNav';
 import usePayloadAPI from '../../../../hooks/usePayloadAPI';
@@ -13,6 +13,7 @@ const { serverURL, routes: { admin, api } } = config;
 
 const EditView = (props) => {
   const { params: { id } = {} } = useRouteMatch();
+  const { state: locationState } = useLocation();
   const history = useHistory();
   const { setStepNav } = useStepNav();
   const [fields, setFields] = useState([]);
@@ -41,6 +42,8 @@ const EditView = (props) => {
     { initialParams: { 'fallback-locale': 'null' } },
   );
 
+  const dataToRender = locationState?.data || data;
+
   useEffect(() => {
     const nav = [{
       url: `${admin}/collections/${slug}`,
@@ -49,7 +52,7 @@ const EditView = (props) => {
 
     if (isEditing) {
       nav.push({
-        label: data ? data[useAsTitle || 'id'] : '',
+        label: dataToRender ? dataToRender[useAsTitle || 'id'] : '',
       });
     } else {
       nav.push({
@@ -58,7 +61,7 @@ const EditView = (props) => {
     }
 
     setStepNav(nav);
-  }, [setStepNav, isEditing, pluralLabel, data, slug, useAsTitle]);
+  }, [setStepNav, isEditing, pluralLabel, dataToRender, slug, useAsTitle]);
 
   useEffect(() => {
     setFields(formatFields(collection, isEditing));
@@ -69,7 +72,7 @@ const EditView = (props) => {
       DefaultComponent={DefaultEdit}
       path={`${slug}.views.Edit`}
       componentProps={{
-        data,
+        data: dataToRender,
         collection: { ...collection, fields },
         isEditing,
         onSave,