From 408b66590ae08355f05b71805e1450a29e5bea52 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Mon, 1 Aug 2022 12:23:53 -0400
Subject: [PATCH] fix/#853

---
 src/admin/components/forms/useField/index.tsx |  9 ++++--
 test/fields/collections/Tabs/index.ts         | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/admin/components/forms/useField/index.tsx b/src/admin/components/forms/useField/index.tsx
index 824caf029..e09a62c9c 100644
--- a/src/admin/components/forms/useField/index.tsx
+++ b/src/admin/components/forms/useField/index.tsx
@@ -38,6 +38,7 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
 
   const initialValue = field?.initialValue as T;
 
+  const [internalInitialValue, setInternalInitialValue] = useState(() => field?.initialValue as T);
   const [internalValue, setInternalValue] = useState(() => field?.value as T);
   const [internallyValid, setInternallyValid] = useState<boolean>(undefined);
 
@@ -128,9 +129,13 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
   ]);
 
   useEffect(() => {
-    setInternalValue(initialValue);
+    if (internalInitialValue !== initialValue) {
+      setInternalValue(initialValue);
+      setInternalInitialValue(initialValue);
+    }
+
     setInternallyValid(undefined);
-  }, [initialValue]);
+  }, [initialValue, internalInitialValue]);
 
   // The only time that the FORM value should be updated
   // is when the debounced value updates. So, when the debounced value updates,
diff --git a/test/fields/collections/Tabs/index.ts b/test/fields/collections/Tabs/index.ts
index 3a904f614..c59f3e9c8 100644
--- a/test/fields/collections/Tabs/index.ts
+++ b/test/fields/collections/Tabs/index.ts
@@ -53,6 +53,33 @@ const TabsFields: CollectionConfig = {
             },
           ],
         },
+        {
+          label: 'Tab with Row',
+          description: 'This tab has a row field.',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'textInRow',
+                  type: 'text',
+                  required: true,
+                  admin: {
+                    width: '50%',
+                  },
+                },
+                {
+                  name: 'numberInRow',
+                  type: 'number',
+                  required: true,
+                  admin: {
+                    width: '50%',
+                  },
+                },
+              ],
+            },
+          ],
+        },
       ],
     },
     {
@@ -108,6 +135,8 @@ export const tabsDoc = {
   },
   textarea: 'Here is some text that goes in a textarea',
   anotherText: 'Super tired of writing this text',
+  textInRow: 'hello',
+  numberInRow: 235,
 };
 
 export default TabsFields;