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 => {