chore: Lazy evaluate funnel name selectors (#3137)

Co-authored-by: Boris Serdiuk <[email protected]>
cloudscape-design · Dec 20, 2024 · d0ecb9a · d0ecb9a
1 parent c461af5
commit d0ecb9a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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}