fix: stop selecting controls disabled during focus

apps/extension/src/tools/__tests__/interaction.test.ts

@@ -1923,6 +1923,64 @@ describe("handleSelect", () => {
     "Runtime.callFunctionOn": () => ({ result: { value: mutation } }),
   });
 
+  it.each([
+    { name: "disabled during focus", markup: "<select></select>", disabled: true },
+    { name: "enabled", markup: "<select></select>", disabled: false },
+  ])("respects the disabled state of a $name select", async ({ markup, disabled }) => {
+    const host = document.createElement("div");
+    host.innerHTML = markup;
+    const select = host.querySelector("select")!;
+    select.innerHTML =
+      '<option value="us">United States</option><option value="ca">Canada</option>';
+    const events: string[] = [];
+    select.addEventListener("input", () => events.push("input"));
+    select.addEventListener("change", () => events.push("change"));
+    const sm = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
+    const ctx = await sm.start("aa11");
+    ctx.refStore.set("e1", 555, { tabId: 4 });
+    const fake = makeFakeCdp({
+      ...selectHandlers({ ok: true }),
+      "DOM.focus": () => {
+        select.disabled = disabled;
+        return {};
+      },
+      "Runtime.callFunctionOn": (params) => {
+        const script = params as {
+          functionDeclaration: string;
+          arguments: Array<{ value: unknown }>;
+        };
+        const fn = new Function(`return (${script.functionDeclaration})`)();
+        return {
+          result: {
+            value: fn.apply(
+              select,
+              script.arguments.map((arg) => arg.value),
+            ),
+          },
+        };
+      },
+    });
+
+    const res = await handleSelect(
+      sm,
+      { session_id: "aa11", ref: "e1", values: ["ca"] },
+      { cdp: fake.cdp, tabsApi: fake.tabsApi },
+    );
+
+    if (disabled) {
+      expect(res).toMatchObject({
+        code: "invalid_params",
+        message: "select requires an enabled <select>",
+      });
+      expect(select.value).toBe("us");
+      expect(events).toEqual([]);
+    } else {
+      expect(res).toMatchObject({ selected_values: ["ca"] });
+      expect(select.value).toBe("ca");
+      expect(events).toEqual(["input", "change"]);
+    }
+  });
+
   it("rejects non-select elements as target_not_select", async () => {
     const sm = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
     const ctx = await sm.start("aa11");

apps/extension/src/tools/__tests__/select.browser.test.ts

@@ -0,0 +1,142 @@
+// @vitest-environment node
+// Opt in with BSK_SELECT_CHROME; the fixture owns a headless browser and profile.
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { SessionManager } from "@/session-manager/manager";
+import { handleSelect } from "../interaction";
+import type { CdpRunner } from "../shared";
+
+type Send = <T = Record<string, unknown>>(
+  method: string,
+  params?: object,
+  sessionId?: string,
+) => Promise<T>;
+
+let send: Send;
+let close: (() => void) | undefined;
+let browserRun: Promise<void> | undefined;
+
+if (process.env.BSK_SELECT_CHROME) {
+  beforeAll(async () => {
+    const { withChrome } = await import(
+      new URL(
+        "../../../../../evals/browser/cases/regression/snapshot-coordinates/chrome.mjs",
+        import.meta.url,
+      ).href
+    );
+    const ready = Promise.withResolvers<Send>();
+    const closed = Promise.withResolvers<void>();
+    close = () => closed.resolve();
+    browserRun = withChrome(
+      { executable: process.env.BSK_SELECT_CHROME, deviceScale: 1, zoom: 1 },
+      async (command: Send) => {
+        ready.resolve(command);
+        await closed.promise;
+      },
+    );
+    browserRun!.catch(ready.reject);
+    send = await ready.promise;
+  }, 30_000);
+  afterAll(async () => {
+    close?.();
+    await browserRun;
+  }, 30_000);
+}
+
+describe.skipIf(!process.env.BSK_SELECT_CHROME)("select disabled state in Chrome", () => {
+  it.each([
+    { name: "directly disabled", markup: "<select disabled></select>", disabled: true },
+    {
+      name: "disabled fieldset",
+      markup: "<fieldset disabled><select></select></fieldset>",
+      disabled: true,
+    },
+    {
+      name: "first legend exception",
+      markup: "<fieldset disabled><legend><select></select></legend></fieldset>",
+      disabled: false,
+    },
+    {
+      name: "second legend",
+      markup:
+        "<fieldset disabled><legend>First</legend><legend><select></select></legend></fieldset>",
+      disabled: true,
+    },
+    {
+      name: "disabled by focus handler",
+      markup: '<select onfocus="this.disabled=true"></select>',
+      disabled: true,
+      focusDisables: true,
+    },
+    {
+      name: "fieldset disabled by focus handler",
+      markup: '<fieldset><select onfocus="this.parentElement.disabled=true"></select></fieldset>',
+      disabled: true,
+      focusDisables: true,
+    },
+    { name: "enabled", markup: "<select></select>", disabled: false },
+  ])("respects $name", async ({ markup, disabled, focusDisables }) => {
+    const { targetId } = await send<{ targetId: string }>("Target.createTarget", {
+      url: "about:blank",
+    });
+    try {
+      const { sessionId } = await send<{ sessionId: string }>("Target.attachToTarget", {
+        targetId,
+        flatten: true,
+      });
+      const evaluate = async (expression: string) => {
+        const reply = await send<{ result: { value: unknown }; exceptionDetails?: unknown }>(
+          "Runtime.evaluate",
+          { expression, returnByValue: true },
+          sessionId,
+        );
+        expect(reply.exceptionDetails).toBeUndefined();
+        return reply.result.value;
+      };
+      await evaluate(`document.body.innerHTML = ${JSON.stringify(markup)};
+        const select = document.querySelector('select');
+        select.innerHTML = '<option value="us">United States</option><option value="ca">Canada</option>';
+        window.events = [];
+        for (const type of ['input', 'change']) select.addEventListener(type, () => window.events.push(type));`);
+      const manager = new SessionManager({
+        agentWindow: {
+          create: async () => ({ windowId: 100, initialTabIds: [] }),
+          remove: async () => {},
+          ensureActiveTab: async () => 4,
+        },
+      });
+      await manager.start("aa11");
+      const cdp: CdpRunner = {
+        send: async (_tabId, method, params) => send(method, params, sessionId) as never,
+      };
+      const result = await handleSelect(
+        manager,
+        {
+          session_id: "aa11",
+          selector: "select",
+          values: ["ca"],
+        },
+        {
+          cdp,
+          tabsApi: {
+            get: async (id) => ({ id, windowId: 100, active: true }) as chrome.tabs.Tab,
+            query: async () => [{ id: 4, windowId: 100, active: true } as chrome.tabs.Tab],
+          },
+        },
+      );
+      expect(result).toMatchObject(
+        disabled
+          ? focusDisables
+            ? { code: "invalid_params", message: "select requires an enabled <select>" }
+            : { code: "cdp_failed" }
+          : { selected_values: ["ca"] },
+      );
+      expect(
+        await evaluate(
+          "({ value: document.querySelector('select').value, events: window.events })",
+        ),
+      ).toEqual({ value: disabled ? "us" : "ca", events: disabled ? [] : ["input", "change"] });
+    } finally {
+      await send("Target.closeTarget", { targetId });
+    }
+  });
+});

apps/extension/src/tools/interaction.ts

@@ -927,7 +927,7 @@ type SelectMutationResult =
     }
   | {
       ok: false;
-      reason: "option_not_found";
+      reason: "option_not_found" | "target_disabled";
       missing?: string;
     };
 
@@ -1760,6 +1760,9 @@ export async function handleSelect(
       objectId,
       functionDeclaration: `function(values) {
         const select = this;
+        if (select.matches(':disabled')) {
+          return { ok: false, reason: 'target_disabled' };
+        }
         const multiple = select.multiple;
         const known = new Set(Array.from(select.options).map((o) => o.value));
         for (const v of values) {
@@ -1786,6 +1789,9 @@ export async function handleSelect(
     });
     const mutation = evaluated.result?.value;
     if (!mutation?.ok) {
+      if (mutation?.reason === "target_disabled") {
+        return { code: "invalid_params", message: "select requires an enabled <select>" };
+      }
       if (mutation?.reason === "option_not_found") {
         return rpcError(
           "invalid_params",