fix(segmented-control): avoid changing focus from programmatic item selection

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<SegmentedControl["el"]>(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<SegmentedControl["el"]>(page, "value")).toBe("1");
 
     await second.click();
     expect(eventSpy).toHaveReceivedEventTimes(2);
     expect(await getSelectedItemValue(page)).toBe("2");
+    expect(await getFocusedElementProp<SegmentedControl["el"]>(page, "value")).toBe("2");
 
     expect(await page.evaluate(() => (window as TestWindow).eventTimeValues)).toEqual(["1", "2"]);
   });

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();
+      }
     }
   }
 

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<T extends HTMLElement = HTMLElement, K extends keyof T = keyof T>(
   page: E2EPage,
-  prop: keyof HTMLElement,
+  prop: K,
   options?: GetFocusedElementProp,
 ): Promise<ReturnType<E2EPage["evaluate"]>> {
   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,