From 73ee22bc3a4cb938406f3ff5f6b14b39535146ec Mon Sep 17 00:00:00 2001
From: kmcfaul <45077788+kmcfaul@users.noreply.github.com>
Date: Fri, 19 Jul 2024 09:50:37 -0400
Subject: [PATCH] fix(Wizard): only update new steps when step count changes
 (#10779)

---
 .../react-core/src/components/Wizard/Wizard.tsx |  8 +++++---
 .../src/components/Wizard/WizardContext.tsx     | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx
index d76c70f6cc0..fe127ad3cb2 100644
--- a/packages/react-core/src/components/Wizard/Wizard.tsx
+++ b/packages/react-core/src/components/Wizard/Wizard.tsx
@@ -91,10 +91,12 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
-  // When children change, active step index should reset
+  // When the number of steps changes and pushes activeStepIndex out of bounds, reset back to startIndex
   React.useEffect(() => {
-    setActiveStepIndex(startIndex);
-  }, [children, startIndex]);
+    if (activeStepIndex > initialSteps.length) {
+      setActiveStepIndex(startIndex);
+    }
+  }, [initialSteps, activeStepIndex, startIndex]);
 
   const focusMainContentElement = () =>
     setTimeout(() => {
diff --git a/packages/react-core/src/components/Wizard/WizardContext.tsx b/packages/react-core/src/components/Wizard/WizardContext.tsx
index 76f187b1eb4..9482b809c23 100644
--- a/packages/react-core/src/components/Wizard/WizardContext.tsx
+++ b/packages/react-core/src/components/Wizard/WizardContext.tsx
@@ -74,10 +74,20 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
-  // Callback to update steps if they change after initial render
+  // Callback to update steps if the overall step number changes
   React.useEffect(() => {
-    setCurrentSteps(initialSteps);
-  }, [initialSteps]);
+    if (currentSteps.length !== initialSteps.length) {
+      const newSteps = initialSteps.map((newStep) => {
+        const currentStepMatch = currentSteps.find((step) => step.id === newStep.id);
+        // If an existing step has the same id as a new step, carry over props
+        if (currentStepMatch) {
+          return { ...currentStepMatch, ...newStep };
+        }
+        return newStep;
+      });
+      setCurrentSteps(newSteps);
+    }
+  }, [currentSteps, initialSteps]);
 
   // Combined initial and current state steps
   const steps = React.useMemo(
@@ -130,7 +140,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
           }
-
           return prevStep;
         })
       ),