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.
Esri · Dec 15, 2023 · 508979f · 508979f
1 parent 26dec64
commit 508979f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git 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
@@ -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
     ) {