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;
+ }
}