From 05fafb0c87572fecf654861392684807cdcc14c5 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 13 Oct 2023 10:49:29 -0500
Subject: [PATCH 1/3] fix(stepper): selects next enabled stepper-item when
 first one is disabled

---
 .../src/components/stepper/stepper.e2e.ts       | 17 +++++++++++++++++
 .../src/components/stepper/stepper.tsx          |  7 ++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index 1b9512e61b2..7dab1308cfd 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`<calcite-stepper>
+      <calcite-stepper-item heading="Step 1" id="step-1" disabled>
+        <div>Step 1 content</div>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Step 2" id="step-2">
+        <div>Step 2 content</div>
+      </calcite-stepper-item>
+    </calcite-stepper>`);
+
+    const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
+
+    expect(stepperItem1).not.toHaveAttribute("selected");
+    expect(stepperItem2).toHaveAttribute("selected");
+  });
 });
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 9cd606bd9a9..4cc4e149c3d 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -106,7 +106,7 @@ export class Stepper {
     // if no stepper items are set as active, default to the first one
     if (typeof this.currentPosition !== "number") {
       this.calciteInternalStepperItemChange.emit({
-        position: 0,
+        position: this.getFirstEnabledStepperPosition(),
       });
     }
   }
@@ -333,4 +333,9 @@ export class Stepper {
     this.el.style.gridTemplateColumns = spacing;
     this.setStepperItemNumberingSystem();
   };
+
+  private getFirstEnabledStepperPosition(): number {
+    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);
+    return enabledStepIndex > -1 ? enabledStepIndex : 0;
+  }
 }

From d5f0a4888cdae3361927a3e34e73e796ca8d573b Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 13 Oct 2023 11:14:48 -0500
Subject: [PATCH 2/3] add screenshot test

---
 .../src/components/stepper/stepper.stories.ts               | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index 0fcf2f4efde..205106f03c4 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -212,3 +212,9 @@ export const verticalLayout_TestOnly = (): string => html`<calcite-stepper layou
       >Step 1 Content Goes Here</calcite-stepper-item
     >
   </calcite-stepper>`;
+
+export const firstItemDisabled_TestOnly = (): string => html`<calcite-stepper>
+  <calcite-stepper-item heading="item1" disabled>1</calcite-stepper-item>
+  <calcite-stepper-item heading="item2">2</calcite-stepper-item>
+  <calcite-stepper-item heading="item3">3</calcite-stepper-item>
+</calcite-stepper>`;

From 029486390d2eb5c487769fef5c9bef26bafb609e Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 13 Oct 2023 11:45:42 -0500
Subject: [PATCH 3/3] feedback changes

---
 .../src/components/stepper/stepper.e2e.ts              |  4 ++--
 .../src/components/stepper/stepper.stories.ts          | 10 +---------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index 7dab1308cfd..0bdcbd9c84e 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -677,7 +677,7 @@ describe("calcite-stepper", () => {
 
     const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
 
-    expect(stepperItem1).not.toHaveAttribute("selected");
-    expect(stepperItem2).toHaveAttribute("selected");
+    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 205106f03c4..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` <calcite-stepper num
 </calcite-stepper>`;
 
 export const disabled_TestOnly = (): string => html`<calcite-stepper>
-  <calcite-stepper-item heading="item1" complete>1</calcite-stepper-item>
+  <calcite-stepper-item heading="item1" complete disabled>1</calcite-stepper-item>
   <calcite-stepper-item heading="item2">2</calcite-stepper-item>
-  <calcite-stepper-item heading="item3" selected>3</calcite-stepper-item>
-  <calcite-stepper-item heading="item4" disabled>4</calcite-stepper-item>
 </calcite-stepper>`;
 
 export const arabicNumberingSystem_TestOnly = (): string => html` <calcite-stepper
@@ -212,9 +210,3 @@ export const verticalLayout_TestOnly = (): string => html`<calcite-stepper layou
       >Step 1 Content Goes Here</calcite-stepper-item
     >
   </calcite-stepper>`;
-
-export const firstItemDisabled_TestOnly = (): string => html`<calcite-stepper>
-  <calcite-stepper-item heading="item1" disabled>1</calcite-stepper-item>
-  <calcite-stepper-item heading="item2">2</calcite-stepper-item>
-  <calcite-stepper-item heading="item3">3</calcite-stepper-item>
-</calcite-stepper>`;