From 508979f25196556af730c984929d232858623c78 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Thu, 14 Dec 2023 21:23:32 -0600
Subject: [PATCH] fix(stepper): emits `calciteStepperItemChange` event when
 switched to first step (#8422)

**Related Issue:** #8397

## Summary

Emits `calciteStepperItemChange` event when switched to the first
enabled step in single view layout.
---
 .../src/components/stepper/stepper.e2e.ts     | 19 +++++++++----------
 .../src/components/stepper/stepper.tsx        |  6 ++----
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index c37cc28a9c1..cc6539013ad 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -798,10 +798,10 @@ describe("calcite-stepper", () => {
     it("should emit calciteStepperItemChange on user interaction", async () => {
       const page = await newE2EPage();
       await page.setContent(html`<calcite-stepper style="width: 100px">
-        <calcite-stepper-item heading="Step 1" id="step-1" disabled>
+        <calcite-stepper-item heading="Step 1" id="step-1">
           <div>Step 1 content</div>
         </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2">
+        <calcite-stepper-item heading="Step 2" id="step-2" disabled>
           <div>Step 2 content</div>
         </calcite-stepper-item>
         <calcite-stepper-item heading="Step 3" id="step-2">
@@ -811,27 +811,26 @@ describe("calcite-stepper", () => {
 
       const stepper = await page.find("calcite-stepper");
       const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
-      const [stepperItem1] = await page.findAll("calcite-stepper-item");
       const eventSpy = await stepper.spyOnEvent("calciteStepperItemChange");
       expect(eventSpy).toHaveReceivedEventTimes(0);
 
+      // shouldn't emit change event when disabled element is visible
       await actionEnd.click();
       await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(1);
+      expect(eventSpy).toHaveReceivedEventTimes(0);
 
-      await actionStart.click();
+      await actionEnd.click();
       await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(2);
+      expect(eventSpy).toHaveReceivedEventTimes(1);
 
       // shouldn't emit change event when disabled element is visible
-      stepperItem1.setProperty("disabled", true);
       await actionStart.click();
       await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(2);
+      expect(eventSpy).toHaveReceivedEventTimes(1);
 
-      await actionEnd.click();
+      await actionStart.click();
       await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(3);
+      expect(eventSpy).toHaveReceivedEventTimes(2);
     });
   });
 });
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index a2805837f08..625ca1dba4d 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -118,8 +118,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
    * Fires when the active `calcite-stepper-item` changes.
    *
    */
-  @Event({ cancelable: false })
-  calciteStepperItemChange: EventEmitter<void>;
+  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;
 
   /**
    * Fires when the active `calcite-stepper-item` changes.
@@ -242,7 +241,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   @Listen("calciteInternalStepperItemSelect")
   updateItem(event: CustomEvent): void {
     const { position } = event.detail;
-
     if (typeof position === "number") {
       this.currentActivePosition = position;
       this.selectedItem = event.target as HTMLCalciteStepperItemElement;
@@ -506,7 +504,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     }
 
     if (
-      this.currentActivePosition &&
+      typeof this.currentActivePosition === "number" &&
       currentActivePosition !== this.currentActivePosition &&
       !this.items[this.currentActivePosition].disabled
     ) {