fix(flow-item): fix scrollContentTo (#5487)

#5414
Esri · Oct 17, 2022 · 246e470 · 246e470
1 parent 9ca3117
commit 246e470
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/src/components/flow-item/flow-item.e2e.ts b/src/components/flow-item/flow-item.e2e.ts
@@ -1,6 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
+import { html } from "../../../support/formatting";
 
 describe("calcite-flow-item", () => {
   it("renders", async () => renders("calcite-flow-item", { display: "flex" }));
@@ -96,4 +97,48 @@ describe("calcite-flow-item", () => {
     expect(calciteFlowItemBackClick).toHaveReceivedEvent();
     expect(calciteFlowItemBack).toHaveReceivedEvent();
   });
+
+  it("allows scrolling content", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-flow style="height: 300px">
+        <calcite-flow-item heading="Flow heading" id="flowOrPanel">
+          <calcite-block heading="Block example" summary="Some subtext" collapsible open>
+            <calcite-notice active>
+              <div slot="message">An excellent assortment of content.</div>
+            </calcite-notice>
+          </calcite-block>
+          <calcite-block heading="Block example" summary="Some subtext" collapsible open>
+            <calcite-notice active>
+              <div slot="message">An excellent assortment of content.</div>
+            </calcite-notice>
+          </calcite-block>
+          <calcite-block heading="Block example" summary="Some subtext" collapsible open>
+            <calcite-notice active>
+              <div slot="message">An excellent assortment of content.</div>
+            </calcite-notice>
+          </calcite-block>
+          <calcite-block heading="Block example" summary="Some subtext" collapsible open>
+            <calcite-notice active>
+              <div slot="message">An excellent assortment of content.</div>
+            </calcite-notice>
+          </calcite-block>
+        </calcite-flow-item>
+      </calcite-flow>
+    `);
+    const [top, _middle, bottom] = await page.findAll("calcite-block");
+
+    await bottom.callMethod("scrollIntoView");
+
+    expect(await top.isIntersectingViewport()).toBe(false);
+
+    await page.$eval("calcite-flow-item", (panel: HTMLCalcitePanelElement) =>
+      panel.scrollContentTo({
+        top: 0,
+        behavior: "auto"
+      })
+    );
+
+    expect(await top.isIntersectingViewport()).toBe(true);
+  });
 });
diff --git a/src/components/flow-item/flow-item.tsx b/src/components/flow-item/flow-item.tsx
@@ -188,7 +188,7 @@ export class FlowItem implements InteractiveComponent {
    */
   @Method()
   async scrollContentTo(options?: ScrollToOptions): Promise<void> {
-    this.containerEl?.scrollContentTo(options);
+    await this.containerEl?.scrollContentTo(options);
   }
 
   // --------------------------------------------------------------------------
@@ -211,6 +211,10 @@ export class FlowItem implements InteractiveComponent {
     this.backButtonEl = node;
   };
 
+  setContainerRef = (node: HTMLCalcitePanelElement): void => {
+    this.containerEl = node;
+  };
+
   getBackLabel = (): string => {
     return this.intlBack || TEXT.back;
   };
@@ -278,6 +282,7 @@ export class FlowItem implements InteractiveComponent {
           loading={loading}
           menuOpen={menuOpen}
           onCalcitePanelClose={this.handlePanelClose}
+          ref={this.setContainerRef}
           widthScale={widthScale}
         >
           <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />