From d0ecb9aaad86fab076bd04d1c539e844a9c128d7 Mon Sep 17 00:00:00 2001
From: Michael <michaeldowseza@users.noreply.github.com>
Date: Fri, 20 Dec 2024 13:40:36 +0100
Subject: [PATCH] chore: Lazy evaluate funnel name selectors (#3137)

Co-authored-by: Boris Serdiuk <serdiuk@amazon.com>
---
 src/form/index.tsx                                     | 2 +-
 src/internal/analytics/components/analytics-funnel.tsx | 4 ++--
 src/modal/index.tsx                                    | 4 +++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/form/index.tsx b/src/form/index.tsx
index eda6792596..88e421b329 100644
--- a/src/form/index.tsx
+++ b/src/form/index.tsx
@@ -92,7 +92,7 @@ export default function Form({ variant = 'full-page', ...props }: FormProps) {
       funnelType="single-page"
       optionalStepNumbers={[]}
       totalFunnelSteps={1}
-      funnelNameSelectors={[funnelNameSelector, `.${analyticsSelectors.header}`]}
+      funnelNameSelectors={() => [funnelNameSelector, `.${analyticsSelectors.header}`]}
     >
       <AnalyticsFunnelStep
         stepIdentifier={analyticsMetadata?.instanceIdentifier}
diff --git a/src/internal/analytics/components/analytics-funnel.tsx b/src/internal/analytics/components/analytics-funnel.tsx
index e63e8ac4d5..5d951b5073 100644
--- a/src/internal/analytics/components/analytics-funnel.tsx
+++ b/src/internal/analytics/components/analytics-funnel.tsx
@@ -42,7 +42,7 @@ interface AnalyticsFunnelProps {
   mounted?: boolean;
   children?: React.ReactNode;
   stepConfiguration?: StepConfiguration[];
-  funnelNameSelectors?: string[];
+  funnelNameSelectors?: () => string[];
   funnelType: FunnelStartProps['funnelType'];
   optionalStepNumbers: FunnelStartProps['optionalStepNumbers'];
   totalFunnelSteps: FunnelStartProps['totalFunnelSteps'];
@@ -139,7 +139,7 @@ const InnerAnalyticsFunnel = ({ mounted = true, children, stepConfiguration, ...
     */
     let funnelInteractionId: string;
     const handle = setTimeout(() => {
-      funnelNameSelector.current = evaluateSelectors(props.funnelNameSelectors || [], getFunnelNameSelector());
+      funnelNameSelector.current = evaluateSelectors(props.funnelNameSelectors?.() || [], getFunnelNameSelector());
       if (props.funnelType === 'single-page' && wizardCount.current > 0) {
         return;
       }
diff --git a/src/modal/index.tsx b/src/modal/index.tsx
index 413c7adb88..016cab44ea 100644
--- a/src/modal/index.tsx
+++ b/src/modal/index.tsx
@@ -41,7 +41,9 @@ function ModalWithAnalyticsFunnel({
       funnelType="modal"
       optionalStepNumbers={[]}
       totalFunnelSteps={1}
-      funnelNameSelectors={[`[${DATA_ATTR_MODAL_ID}="${window?.CSS?.escape(modalId)}"] .${styles['header--text']}`]}
+      funnelNameSelectors={() => [
+        `[${DATA_ATTR_MODAL_ID}="${window?.CSS?.escape(modalId)}"] .${styles['header--text']}`,
+      ]}
     >
       <AnalyticsFunnelStep
         mounted={props.visible}