diff --git a/src/components/labs/__tests__/lab-filter-rail.browser.test.tsx b/src/components/labs/__tests__/lab-filter-rail.browser.test.tsx index 4def8a3ab..a9d934326 100644 --- a/src/components/labs/__tests__/lab-filter-rail.browser.test.tsx +++ b/src/components/labs/__tests__/lab-filter-rail.browser.test.tsx @@ -1,8 +1,10 @@ import { afterEach, describe, expect, it, vi } from "vitest"; -import { page } from "vitest/browser"; +import { page, userEvent } from "vitest/browser"; +import { useState } from "react"; import { renderWithApp } from "../../../../tests/browser/render"; import { LabFilterRail, type LabFilterRailProps } from "../lab-filter-rail"; +import { useLabListFilters } from "../use-lab-list-filters"; function props(): LabFilterRailProps { return { @@ -156,3 +158,58 @@ describe(" layout", () => { expect(Math.max(...centers) - Math.min(...centers)).toBeLessThan(2); }); }); + +/** The rail wired to the real filter hook, with a dialog to open over it. */ +function WiredRail() { + const lab = useLabListFilters(); + const [dialog, setDialog] = useState(false); + return ( + <> + + + {dialog ? ( +
+ +
+ ) : null} + + ); +} + +describe(" keyboard", () => { + it("focuses the search field on / and keeps focus there after clearing", async () => { + const { screen } = await renderWithApp(); + const search = screen.getByRole("searchbox", { name: "Search biomarkers" }); + + ( + screen.getByRole("button", { name: "Open dialog" }).element() as HTMLElement + ).focus(); + await userEvent.keyboard("/"); + await expect.element(search).toHaveFocus(); + await expect.element(search).toHaveValue(""); + + await userEvent.keyboard("iron"); + await screen.getByRole("button", { name: "Clear search" }).click(); + await expect.element(search).toHaveValue(""); + await expect.element(search).toHaveFocus(); + }); + + it("leaves / alone while focus is inside an open dialog", async () => { + const { screen } = await renderWithApp(); + await screen.getByRole("button", { name: "Open dialog" }).click(); + const inside = screen.getByRole("button", { name: "Inside" }); + await expect.element(inside).toHaveFocus(); + await userEvent.keyboard("/"); + await expect.element(inside).toHaveFocus(); + }); +}); diff --git a/src/components/labs/lab-filter-rail.tsx b/src/components/labs/lab-filter-rail.tsx index 29bff4c86..813455319 100644 --- a/src/components/labs/lab-filter-rail.tsx +++ b/src/components/labs/lab-filter-rail.tsx @@ -97,7 +97,11 @@ export function LabFilterRail({ ) : (