fix(stepper): fix layout when switching modes dynamically to `horizon…

…tal-single` (#8946) **Related Issue:** #8931 ## Summary Fixes an issue that caused step labels to overlap when dynamically switching to `horizontal-single` layout mode.
Esri · Mar 15, 2024 · 01f58bf · 01f58bf
1 parent 68867dc
commit 01f58bf
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 25 deletions.
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -858,5 +858,34 @@ describe("calcite-stepper", () => {
       await page.waitForChanges();
       expect(eventSpy).toHaveReceivedEventTimes(2);
     });
+
+    it(`switching to layout="horizontal-single" dynamically from another option should display a single item (#8931)`, async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`
+          <calcite-stepper layout="horizontal">
+            <calcite-stepper-item heading="Step 1" selected>
+              <div>Step 1 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 2">
+              <div>Step 2 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 3">
+              <div>Step 3 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Review">
+              <div>Step 4 content</div>
+            </calcite-stepper-item>
+          </calcite-stepper>
+          </calcite-stepper>`,
+      );
+
+      const stepper = await page.find("calcite-stepper");
+      await stepper.setProperty("layout", "horizontal-single");
+      await page.waitForChanges();
+
+      const displayedItems = await page.findAll("calcite-stepper-item:not([hidden])");
+      expect(displayedItems.length).toBe(1);
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -74,6 +74,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   @Watch("scale")
   handleItemPropChange(): void {
     this.updateItems();
+    this.determineActiveStepper();
   }
 
   /**
@@ -150,7 +151,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   }
 
   componentDidLoad(): void {
-    this.resizeObserver?.observe(this.containerEl);
     // if no stepper items are set as active, default to the first one
     if (typeof this.currentActivePosition !== "number") {
       const enabledStepIndex = this.getFirstEnabledStepperPosition();
@@ -166,7 +166,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   }
 
   disconnectedCallback(): void {
-    this.resizeObserver?.disconnect();
     disconnectMessages(this);
     disconnectLocalized(this);
     this.mutationObserver?.disconnect();
@@ -356,15 +355,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     });
   }
 
-  @State() elWidth: number;
-
-  @Watch("elWidth")
-  handleElWidthChange(): void {
-    readTask((): void => {
-      this.determineActiveStepper();
-    });
-  }
-
   private enabledItems: HTMLCalciteStepperItemElement[] = [];
 
   private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();
@@ -386,11 +376,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   //
   //--------------------------------------------------------------------------
 
-  private resizeObserver = createObserver(
-    "resize",
-    (entries) => (this.elWidth = entries[0].contentRect.width),
-  );
-
   private updateItems(): void {
     this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
       item.icon = this.icon;
@@ -401,18 +386,18 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   }
 
   private determineActiveStepper(): void {
-    const totalItems = this.items.length;
-    if (!this.elWidth || !totalItems || this.layout !== "horizontal-single" || totalItems === 1) {
+    const { items } = this;
+
+    if (items.length < 2) {
       return;
     }
-    const activePosition = this.currentActivePosition || 0;
 
-    if (this.layout === "horizontal-single") {
-      this.multipleViewMode = false;
-      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {
-        item.hidden = index !== activePosition;
-      });
-    }
+    const { currentActivePosition, layout } = this;
+
+    this.multipleViewMode = layout !== "horizontal-single";
+    items.forEach((item, index) => {
+      item.hidden = layout === "horizontal-single" && index !== (currentActivePosition || 0);
+    });
   }
 
   private getEnabledStepIndex(