From 8fadc3391b151237b34f0e5f392d048559fe4162 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Wed, 25 Sep 2024 09:05:18 -0600
Subject: [PATCH] fix(plugin-seo): titles being displayed twice (#8310)

---
 .../MetaDescription/MetaDescriptionComponent.tsx      |  9 +++++++--
 .../src/fields/MetaImage/MetaImageComponent.tsx       |  9 +++++++--
 .../src/fields/MetaTitle/MetaTitleComponent.tsx       | 11 ++++++++---
 .../src/fields/Preview/PreviewComponent.tsx           |  6 +++++-
 packages/plugin-seo/src/index.tsx                     |  2 +-
 .../plugin-seo/collections/PagesWithImportedFields.ts |  3 +++
 6 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx b/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx
index 20c4843391..914b3507ed 100644
--- a/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx
+++ b/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx
@@ -100,7 +100,13 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
         }}
       >
         <div className="plugin-seo__field">
-          <FieldLabel field={null} Label={Label} label={label} {...(labelProps || {})} />
+          <FieldLabel
+            field={null}
+            Label={Label}
+            label={label}
+            required={required}
+            {...(labelProps || {})}
+          />
           {hasGenerateDescriptionFn && (
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
@@ -151,7 +157,6 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
             Component: null,
             RenderedComponent: errorMessage,
           }}
-          label={label}
           onChange={setValue}
           path={pathFromContext}
           required={required}
diff --git a/packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx b/packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx
index 830507ce4b..49a1e46148 100644
--- a/packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx
+++ b/packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx
@@ -102,7 +102,13 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
         }}
       >
         <div className="plugin-seo__field">
-          <FieldLabel field={null} Label={Label} label={label} {...(labelProps || {})} />
+          <FieldLabel
+            field={null}
+            Label={Label}
+            label={label}
+            required={required}
+            {...(labelProps || {})}
+          />
           {hasGenerateImageFn && (
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
@@ -151,7 +157,6 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
             RenderedComponent: errorMessage,
           }}
           filterOptions={field.filterOptions}
-          label={undefined}
           onChange={(incomingImage) => {
             if (incomingImage !== null) {
               if (typeof incomingImage === 'object') {
diff --git a/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx b/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx
index a2c65302e5..684eab081b 100644
--- a/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx
+++ b/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx
@@ -37,11 +37,11 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
       label,
       required,
     },
+    field: fieldFromProps,
     hasGenerateTitleFn,
     labelProps,
   } = props || {}
   const { path: pathFromContext } = useFieldProps()
-
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 
   const field: FieldType<string> = useField({
@@ -98,7 +98,13 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
         }}
       >
         <div className="plugin-seo__field">
-          <FieldLabel field={null} Label={Label} label={label} {...(labelProps || {})} />
+          <FieldLabel
+            field={fieldFromProps}
+            Label={Label}
+            label={label}
+            required={required}
+            {...(labelProps || {})}
+          />
           {hasGenerateTitleFn && (
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
@@ -150,7 +156,6 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
             Component: null,
             RenderedComponent: errorMessage,
           }}
-          label={label}
           onChange={setValue}
           path={pathFromContext}
           required={required}
diff --git a/packages/plugin-seo/src/fields/Preview/PreviewComponent.tsx b/packages/plugin-seo/src/fields/Preview/PreviewComponent.tsx
index d5f826b3a4..ab5df5875f 100644
--- a/packages/plugin-seo/src/fields/Preview/PreviewComponent.tsx
+++ b/packages/plugin-seo/src/fields/Preview/PreviewComponent.tsx
@@ -78,7 +78,11 @@ export const PreviewComponent: React.FC<PreviewProps> = (props) => {
   }, [fields, href, locale, docInfo, hasGenerateURLFn, getData])
 
   return (
-    <div>
+    <div
+      style={{
+        marginBottom: '20px',
+      }}
+    >
       <div>{t('plugin-seo:preview')}</div>
       <div
         style={{
diff --git a/packages/plugin-seo/src/index.tsx b/packages/plugin-seo/src/index.tsx
index 389ac63ca0..1f7329596a 100644
--- a/packages/plugin-seo/src/index.tsx
+++ b/packages/plugin-seo/src/index.tsx
@@ -28,7 +28,7 @@ export const seoPlugin =
           OverviewField({}),
           MetaTitleField({
             hasGenerateFn: typeof pluginConfig?.generateTitle === 'function',
-            overrides: pluginConfig?.fieldOverrides?.title as unknown as TextField,
+            overrides: pluginConfig?.fieldOverrides?.title,
           }),
           MetaDescriptionField({
             hasGenerateFn: typeof pluginConfig?.generateDescription === 'function',
diff --git a/test/plugin-seo/collections/PagesWithImportedFields.ts b/test/plugin-seo/collections/PagesWithImportedFields.ts
index 7474282eec..f963749d9c 100644
--- a/test/plugin-seo/collections/PagesWithImportedFields.ts
+++ b/test/plugin-seo/collections/PagesWithImportedFields.ts
@@ -65,6 +65,9 @@ export const PagesWithImportedFields: CollectionConfig = {
           fields: [
             MetaTitleField({
               hasGenerateFn: true,
+              overrides: {
+                required: true,
+              },
             }),
             PreviewField({
               hasGenerateFn: true,