diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts index 1b9512e61b2..0bdcbd9c84e 100644 --- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts +++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts @@ -663,4 +663,21 @@ describe("calcite-stepper", () => { await page.waitForChanges(); expect(stepperItem2.getAttribute("aria-current")).toEqual("step"); }); + + it("should select the next enabled stepper-item if first stepper-item is disabled", async () => { + const page = await newE2EPage(); + await page.setContent(html` + +
Step 1 content
+
+ +
Step 2 content
+
+
`); + + const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item"); + + expect(await stepperItem1.getProperty("selected")).toBe(false); + expect(await stepperItem2.getProperty("selected")).toBe(true); + }); }); diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts index 0fcf2f4efde..663001cd78a 100644 --- a/packages/calcite-components/src/components/stepper/stepper.stories.ts +++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts @@ -160,10 +160,8 @@ export const overriddenWidth_TestOnly = (): string => html` `; export const disabled_TestOnly = (): string => html` - 1 + 1 2 - 3 - 4 `; export const arabicNumberingSystem_TestOnly = (): string => html` !item.disabled); + return enabledStepIndex > -1 ? enabledStepIndex : 0; + } }