Skip to content

Commit 84c5332

Browse files
driskullElijbet
authored andcommitted
fix(flow): Call setFocus() on back button click (#7285)
**Related Issue:** None ## Summary - Depends on #7252 - When the back button is clicked, `setFocus()` is called and the newly active panel is focused. - Adds test
1 parent 54c4647 commit 84c5332

File tree

2 files changed

+25
-2
lines changed

2 files changed

+25
-2
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { html } from "../../../support/formatting";
44
import { accessible, focusable, hidden, renders } from "../../tests/commonTests";
55
import { CSS as ITEM_CSS } from "../flow-item/resources";
66
import { CSS } from "./resources";
7+
import { isElementFocused } from "../../tests/utils";
78

89
describe("calcite-flow", () => {
910
describe("renders", () => {
@@ -55,6 +56,27 @@ describe("calcite-flow", () => {
5556
expect(flowItem).toBeNull();
5657
});
5758

59+
it("should call setFocus() on back button click", async () => {
60+
const page = await newE2EPage();
61+
62+
await page.setContent(
63+
html`<calcite-flow
64+
><calcite-flow-item id="one"></calcite-flow-item><calcite-flow-item id="two"></calcite-flow-item
65+
></calcite-flow>`
66+
);
67+
68+
await page.$eval(
69+
"#two",
70+
(elm: HTMLCalciteFlowItemElement, backButtonCSS: string) => {
71+
elm.shadowRoot.querySelector<HTMLCalciteActionElement>(`.${backButtonCSS}`)?.click();
72+
},
73+
ITEM_CSS.backButton
74+
);
75+
await page.waitForChanges();
76+
77+
await isElementFocused(page, "#one");
78+
});
79+
5880
it("goes back when item back button is clicked", async () => {
5981
const page = await newE2EPage();
6082

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,9 @@ export class Flow implements LoadableComponent {
107107
// --------------------------------------------------------------------------
108108

109109
@Listen("calciteFlowItemBack")
110-
handleItemBackClick(): void {
111-
this.back();
110+
async handleItemBackClick(): Promise<void> {
111+
await this.back();
112+
return this.setFocus();
112113
}
113114

114115
getFlowDirection = (oldFlowItemCount: number, newFlowItemCount: number): FlowDirection | null => {

0 commit comments

Comments
 (0)