diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts index 137a91c8347..9a2a98fcc06 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts @@ -13,7 +13,7 @@ import { renders, themed, } from "../../tests/commonTests"; -import { findAll, GlobalTestProps } from "../../tests/utils/puppeteer"; +import { findAll, getFocusedElementProp, GlobalTestProps } from "../../tests/utils/puppeteer"; import type { SegmentedControl } from "./segmented-control"; import { CSS } from "./resources"; @@ -200,16 +200,19 @@ describe("calcite-segmented-control", () => { await first.click(); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await getSelectedItemValue(page)).toBe("1"); + expect(await getFocusedElementProp(page, "value")).toBe("1"); - // does not emit from programmatic changes + // does not emit nor changes focus from programmatic changes third.setProperty("checked", true); await page.waitForChanges(); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await getSelectedItemValue(page)).toBe("3"); + expect(await getFocusedElementProp(page, "value")).toBe("1"); await second.click(); expect(eventSpy).toHaveReceivedEventTimes(2); expect(await getSelectedItemValue(page)).toBe("2"); + expect(await getFocusedElementProp(page, "value")).toBe("2"); expect(await page.evaluate(() => (window as TestWindow).eventTimeValues)).toEqual(["1", "2"]); }); diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index d8df2ce4cd7..f96bed7323c 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -376,10 +376,10 @@ export class SegmentedControl if (match && emit) { await this.updateComplete; this.calciteSegmentedControlChange.emit(); - } - if (!isServer && match) { - match.focus(); + if (!isServer) { + match.focus(); + } } } diff --git a/packages/calcite-components/src/tests/utils/puppeteer.ts b/packages/calcite-components/src/tests/utils/puppeteer.ts index 87e50a0baed..eb9e935098c 100644 --- a/packages/calcite-components/src/tests/utils/puppeteer.ts +++ b/packages/calcite-components/src/tests/utils/puppeteer.ts @@ -355,17 +355,17 @@ type GetFocusedElementProp = { * @param {string} prop - the property to get from the focused element (note: must be serializable) * @param {GetFocusedElementProp} options – additional configuration options */ -export async function getFocusedElementProp( +export async function getFocusedElementProp( page: E2EPage, - prop: keyof HTMLElement, + prop: K, options?: GetFocusedElementProp, ): Promise> { return await page.evaluate( - (by: string, shadow: boolean) => { + (by, shadow) => { const { activeElement } = document; - const target = shadow ? activeElement?.shadowRoot?.activeElement : activeElement; + const target = (shadow ? activeElement?.shadowRoot?.activeElement : activeElement) as T; - return target?.[by]; + return target?.[by as K]; }, prop, options?.shadow,