Skip to content

Commit

Permalink
fix(Wizard): only update new steps when step count changes (#10779)
Browse files Browse the repository at this point in the history
  • Loading branch information
kmcfaul authored Jul 19, 2024
1 parent 0781d69 commit 73ee22b
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 7 deletions.
8 changes: 5 additions & 3 deletions packages/react-core/src/components/Wizard/Wizard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
17 changes: 13 additions & 4 deletions packages/react-core/src/components/Wizard/WizardContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -130,7 +140,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
if (prevStep.id === step.id) {
return { ...prevStep, ...step };
}

return prevStep;
})
),
Expand Down

0 comments on commit 73ee22b

Please sign in to comment.