From 51e2dba6123b0c900be70ef84f14a47a98d2e77e Mon Sep 17 00:00:00 2001
From: Paulo Iankoski <me@wpdev.com.br>
Date: Tue, 9 Jan 2024 13:24:59 -0300
Subject: [PATCH] fix: add templateTagsRef to TemplateTags component

---
 .../components/settings/TemplateTags/index.tsx   | 16 ++++++++++------
 .../email/template-options/index.tsx             |  5 ++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/FormBuilder/resources/js/form-builder/src/components/settings/TemplateTags/index.tsx b/src/FormBuilder/resources/js/form-builder/src/components/settings/TemplateTags/index.tsx
index e9a621fac5..666a4b9f2a 100644
--- a/src/FormBuilder/resources/js/form-builder/src/components/settings/TemplateTags/index.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/components/settings/TemplateTags/index.tsx
@@ -33,10 +33,16 @@ function CopyTagButton({textToCopy}) {
 /**
  * @unreleased
  */
-export default function TemplateTags({templateTags}: {templateTags: TemplateTag[]}) {
+export default function TemplateTags({
+    templateTags,
+    templateTagsRef,
+}: {
+    templateTags: TemplateTag[];
+    templateTagsRef?: Ref<HTMLUListElement>;
+}) {
     return (
-        <ul className="givewp-template-tags__list">
-            {templateTags.map(({ id, description }) => {
+        <ul className="givewp-template-tags__list" ref={templateTagsRef}>
+            {templateTags.map(({id, description}) => {
                 const tagId = `{${id}}`;
 
                 return (
@@ -46,9 +52,7 @@ export default function TemplateTags({templateTags}: {templateTags: TemplateTag[
                             <CopyTagButton textToCopy={tagId} />
                         </div>
                         <div className="givewp-template-tags__list-item-bottom">
-                                <span className="givewp-template-tags__description">
-                                    {description}
-                                </span>
+                            <span className="givewp-template-tags__description">{description}</span>
                         </div>
                     </li>
                 );
diff --git a/src/FormBuilder/resources/js/form-builder/src/settings/group-email-settings/email/template-options/index.tsx b/src/FormBuilder/resources/js/form-builder/src/settings/group-email-settings/email/template-options/index.tsx
index 0af80d0ba5..8cd512f659 100644
--- a/src/FormBuilder/resources/js/form-builder/src/settings/group-email-settings/email/template-options/index.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/settings/group-email-settings/email/template-options/index.tsx
@@ -86,7 +86,10 @@ export default function EmailTemplateOptions({notification, settings, setSetting
                                     description={templateTagsDescription}
                                 >
                                     <PanelRow>
-                                        <TemplateTags templateTags={emailTemplateTags} />
+                                        <TemplateTags
+                                            templateTags={emailTemplateTags}
+                                            templateTagsRef={templateTagsRef}
+                                        />
                                     </PanelRow>
                                 </SettingsSection>