Skip to content

Commit df9d575

Browse files
committed
fix(Wizard): Fix crash in nav when first sub-step is hidden
Update logic to focus on the first visible sub-step when navigating from a parent step.
1 parent 5d9af44 commit df9d575

File tree

2 files changed

+41
-2
lines changed

2 files changed

+41
-2
lines changed

packages/react-core/src/components/Wizard/WizardNavInternal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export const WizardNavInternal = ({
6666
return;
6767
}
6868

69-
// Store the first sub-step index so that when its parent is clicked, the first sub-step is focused
70-
if (subStepIndex === 0) {
69+
// Store the first visible sub-step index so that when its parent is clicked, the first sub-step is focused
70+
if (firstSubStepIndex === undefined) {
7171
firstSubStepIndex = subStep.index;
7272
}
7373

packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -627,3 +627,42 @@ test('onStepChange skips over disabled or hidden steps and substeps', async () =
627627
WizardStepChangeScope.Back
628628
);
629629
});
630+
631+
test('clicking parent step navigates to first visible sub-step when first sub-step is hidden', async () => {
632+
const user = userEvent.setup();
633+
const onStepChange = jest.fn();
634+
635+
render(
636+
<Wizard onStepChange={onStepChange}>
637+
<WizardStep id="step-1" name="Test step 1" />
638+
<WizardStep
639+
id="step-2"
640+
name="Test step 2"
641+
steps={[
642+
<WizardStep id="step2-sub1" name="Hidden sub step" isHidden />,
643+
<WizardStep id="step2-sub2" name="Visible sub step 1" />,
644+
<WizardStep id="step2-sub3" name="Visible sub step 2" />
645+
]}
646+
/>
647+
<WizardStep id="step-3" name="Test step 3" />
648+
</Wizard>
649+
);
650+
651+
// Navigate to step 3 first
652+
await user.click(screen.getByRole('button', { name: 'Test step 3' }));
653+
expect(onStepChange).toHaveBeenCalledWith(
654+
null,
655+
expect.objectContaining({ id: 'step-3' }),
656+
expect.objectContaining({ id: 'step-1' }),
657+
WizardStepChangeScope.Nav
658+
);
659+
660+
// Click on parent step 2 - should navigate to the first VISIBLE sub-step (step2-sub2), not crash
661+
await user.click(screen.getByRole('button', { name: 'Test step 2' }));
662+
expect(onStepChange).toHaveBeenCalledWith(
663+
null,
664+
expect.objectContaining({ id: 'step2-sub2' }),
665+
expect.objectContaining({ id: 'step-3' }),
666+
WizardStepChangeScope.Nav
667+
);
668+
});

0 commit comments

Comments
 (0)