diff --git a/packages/calcite-components/src/components/flow/flow.e2e.ts b/packages/calcite-components/src/components/flow/flow.e2e.ts
index 3d373bbf94c..ed9e9867937 100755
--- a/packages/calcite-components/src/components/flow/flow.e2e.ts
+++ b/packages/calcite-components/src/components/flow/flow.e2e.ts
@@ -4,6 +4,7 @@ import { html } from "../../../support/formatting";
import { accessible, focusable, hidden, renders } from "../../tests/commonTests";
import { CSS as ITEM_CSS } from "../flow-item/resources";
import { CSS } from "./resources";
+import { isElementFocused } from "../../tests/utils";
describe("calcite-flow", () => {
describe("renders", () => {
@@ -55,6 +56,27 @@ describe("calcite-flow", () => {
expect(flowItem).toBeNull();
});
+ it("should call setFocus() on back button click", async () => {
+ const page = await newE2EPage();
+
+ await page.setContent(
+ html``
+ );
+
+ await page.$eval(
+ "#two",
+ (elm: HTMLCalciteFlowItemElement, backButtonCSS: string) => {
+ elm.shadowRoot.querySelector(`.${backButtonCSS}`)?.click();
+ },
+ ITEM_CSS.backButton
+ );
+ await page.waitForChanges();
+
+ await isElementFocused(page, "#one");
+ });
+
it("goes back when item back button is clicked", async () => {
const page = await newE2EPage();
diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx
index 1cb668e3030..40222395191 100755
--- a/packages/calcite-components/src/components/flow/flow.tsx
+++ b/packages/calcite-components/src/components/flow/flow.tsx
@@ -107,8 +107,9 @@ export class Flow implements LoadableComponent {
// --------------------------------------------------------------------------
@Listen("calciteFlowItemBack")
- handleItemBackClick(): void {
- this.back();
+ async handleItemBackClick(): Promise {
+ await this.back();
+ return this.setFocus();
}
getFlowDirection = (oldFlowItemCount: number, newFlowItemCount: number): FlowDirection | null => {