feat(flow): Adds setFocus method

packages/calcite-components/src/components/flow/flow.e2e.ts

@@ -1,7 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 
 import { html } from "../../../support/formatting";
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { accessible, focusable, hidden, renders } from "../../tests/commonTests";
 import { CSS as ITEM_CSS } from "../flow-item/resources";
 import { CSS } from "./resources";
 
@@ -14,6 +14,20 @@ describe("calcite-flow", () => {
     hidden("calcite-flow");
   });
 
+  describe("setFocus", () => {
+    describe("focuses active flow item", () => {
+      focusable(
+        html`<calcite-flow>
+          <calcite-flow-item id="one" heading="one">Hello World</calcite-flow-item>
+          <calcite-flow-item id="two" heading="two">Hello World</calcite-flow-item>
+        </calcite-flow>`,
+        {
+          focusTargetSelector: "#two"
+        }
+      );
+    });
+  });
+
   it("frame defaults", async () => {
     const page = await newE2EPage();
 

packages/calcite-components/src/components/flow/flow.tsx

@@ -2,6 +2,12 @@ import { Component, Element, h, Listen, Method, State, VNode } from "@stencil/co
 import { createObserver } from "../../utils/observers";
 import { FlowDirection } from "./interfaces";
 import { CSS } from "./resources";
+import {
+  componentFocusable,
+  LoadableComponent,
+  setComponentLoaded,
+  setUpLoadableComponent
+} from "../../utils/loadable";
 
 /**
  * @slot - A slot for adding `calcite-flow-item` elements to the component.
@@ -11,7 +17,7 @@ import { CSS } from "./resources";
   styleUrl: "flow.scss",
   shadow: true
 })
-export class Flow {
+export class Flow implements LoadableComponent {
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -35,11 +41,24 @@ export class Flow {
       ? lastItem.beforeBack
       : (): Promise<void> => Promise.resolve();
 
-    return beforeBack.call(lastItem).then(() => {
-      lastItem.remove();
+    await beforeBack.call(lastItem);
 
-      return lastItem;
-    });
+    lastItem.remove();
+
+    return lastItem;
+  }
+
+  /**
+   * Sets focus on the component.
+   */
+  @Method()
+  async setFocus(): Promise<void> {
+    await componentFocusable(this);
+
+    const { items } = this;
+    const activeItem = items[items.length - 1];
+
+    return activeItem?.setFocus();
   }
 
   // --------------------------------------------------------------------------
@@ -69,6 +88,14 @@ export class Flow {
     this.updateFlowProps();
   }
 
+  async componentWillLoad(): Promise<void> {
+    setUpLoadableComponent(this);
+  }
+
+  componentDidLoad(): void {
+    setComponentLoaded(this);
+  }
+
   disconnectedCallback(): void {
     this.itemMutationObserver?.disconnect();
   }
@@ -80,8 +107,9 @@ export class Flow {
   // --------------------------------------------------------------------------
 
   @Listen("calciteFlowItemBack")
-  handleItemBackClick(): void {
-    this.back();
+  async handleItemBackClick(): Promise<void> {
+    await this.back();
+    return this.setFocus();
   }
 
   getFlowDirection = (oldFlowItemCount: number, newFlowItemCount: number): FlowDirection | null => {