Merge pull request #1032 from payloadcms/fix/#948

fix: #948

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

@@ -22,7 +22,7 @@ const RenderFields: React.FC<Props> = (props) => {
     forceRender,
   } = props;
 
-  const [hasRendered, setHasRendered] = useState(false);
+  const [hasRendered, setHasRendered] = useState(Boolean(forceRender));
   const [intersectionRef, entry] = useIntersect(intersectionObserverOptions);
   const operation = useOperation();
 

src/admin/components/forms/field-types/Tabs/index.scss

@@ -20,6 +20,7 @@
     }
 
     .tabs-field__tabs {
+
       &:before,
       &:after {
         content: ' ';
@@ -111,4 +112,4 @@
       }
     }
   }
-}
+}

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

@@ -58,27 +58,27 @@ const TabsField: React.FC<Props> = (props) => {
         </div>
         <div className={`${baseClass}__content-wrap`}>
           {activeTab && (
-          <div className={[
-            `${baseClass}__tab`,
-            `${baseClass}__tab-${toKebabCase(activeTab.label)}`,
-          ].join(' ')}
-          >
-            <FieldDescription
-              className={`${baseClass}__description`}
-              description={activeTab.description}
-            />
-            <RenderFields
-              key={activeTab.label}
-              forceRender
-              readOnly={readOnly}
-              permissions={permissions?.fields}
-              fieldTypes={fieldTypes}
-              fieldSchema={activeTab.fields.map((field) => ({
-                ...field,
-                path: getFieldPath(path, field),
-              }))}
-            />
-          </div>
+            <div className={[
+              `${baseClass}__tab`,
+              `${baseClass}__tab-${toKebabCase(activeTab.label)}`,
+            ].join(' ')}
+            >
+              <FieldDescription
+                className={`${baseClass}__description`}
+                description={activeTab.description}
+              />
+              <RenderFields
+                key={activeTab.label}
+                forceRender
+                readOnly={readOnly}
+                permissions={permissions?.fields}
+                fieldTypes={fieldTypes}
+                fieldSchema={activeTab.fields.map((field) => ({
+                  ...field,
+                  path: getFieldPath(path, field),
+                }))}
+              />
+            </div>
           )}
         </div>
       </TabsProvider>