diff --git a/ui/src/components/InlineEntitySelector.test.tsx b/ui/src/components/InlineEntitySelector.test.tsx index f127f41c..270adc54 100644 --- a/ui/src/components/InlineEntitySelector.test.tsx +++ b/ui/src/components/InlineEntitySelector.test.tsx @@ -1,22 +1,33 @@ // @vitest-environment jsdom -import { act } from "react"; import { createRoot } from "react-dom/client"; +import { flushSync } from "react-dom"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { InlineEntitySelector } from "./InlineEntitySelector"; // eslint-disable-next-line @typescript-eslint/no-explicit-any (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true; +async function act(callback: () => void | Promise) { + let result: void | Promise = undefined; + flushSync(() => { + result = callback(); + }); + await result; +} + describe("InlineEntitySelector", () => { let container: HTMLDivElement; + let originalMatchMedia: typeof window.matchMedia; beforeEach(() => { + originalMatchMedia = window.matchMedia; container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { + window.matchMedia = originalMatchMedia; container.remove(); document.body.innerHTML = ""; }); @@ -77,4 +88,51 @@ describe("InlineEntitySelector", () => { root.unmount(); }); }); + + it("focuses the search input when opened on coarse pointers", async () => { + window.matchMedia = vi.fn().mockImplementation((query: string) => ({ + matches: query === "(pointer: coarse)", + media: query, + onchange: null, + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + addListener: vi.fn(), + removeListener: vi.fn(), + dispatchEvent: vi.fn(), + })); + + const root = createRoot(container); + + act(() => { + root.render( + , + ); + }); + + const trigger = container.querySelector("button") as HTMLButtonElement | null; + expect(trigger).not.toBeNull(); + + await act(async () => { + trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + + const searchInput = document.querySelector('input[placeholder="Search assignees..."]') as HTMLInputElement | null; + expect(searchInput).not.toBeNull(); + expect(document.activeElement).toBe(searchInput); + + act(() => { + root.unmount(); + }); + }); }); diff --git a/ui/src/components/InlineEntitySelector.tsx b/ui/src/components/InlineEntitySelector.tsx index 0ac378b5..58fea669 100644 --- a/ui/src/components/InlineEntitySelector.tsx +++ b/ui/src/components/InlineEntitySelector.tsx @@ -135,15 +135,7 @@ export const InlineEntitySelector = forwardRef { event.preventDefault(); - // On touch devices, don't auto-focus the search input to avoid - // opening the virtual keyboard which reshapes the viewport and - // pushes the popover off-screen. - const isTouch = typeof window.matchMedia === "function" - ? window.matchMedia("(pointer: coarse)").matches - : false; - if (!isTouch) { - inputRef.current?.focus(); - } + inputRef.current?.focus(); }} onCloseAutoFocus={(event) => { if (!shouldPreventCloseAutoFocusRef.current) return; diff --git a/ui/src/components/IssueThreadInteractionCard.test.tsx b/ui/src/components/IssueThreadInteractionCard.test.tsx index f4791a1a..f36ff781 100644 --- a/ui/src/components/IssueThreadInteractionCard.test.tsx +++ b/ui/src/components/IssueThreadInteractionCard.test.tsx @@ -1,7 +1,7 @@ // @vitest-environment jsdom -import { act } from "react"; import type { ComponentProps, ReactNode } from "react"; +import { flushSync } from "react-dom"; import { createRoot, type Root } from "react-dom/client"; import { afterEach, describe, expect, it, vi } from "vitest"; import { IssueThreadInteractionCard } from "./IssueThreadInteractionCard"; @@ -34,6 +34,10 @@ vi.mock("@/lib/router", () => ({ ), })); +function act(callback: () => void) { + flushSync(callback); +} + function renderCard( props: Partial> = {}, ) { @@ -460,6 +464,48 @@ describe("IssueThreadInteractionCard", () => { expect(host.textContent).toContain("+34 more"); }); + it("expands the hidden accepted selections when the +N more chip is clicked", () => { + const host = renderCard({ + interaction: acceptedManyRequestCheckboxConfirmationInteraction, + }); + + const countSelectedChips = () => + Array.from(host.querySelectorAll("*")).filter( + (node) => node.children.length === 0 && node.textContent?.trim().startsWith("Selected:"), + ).length; + + expect(countSelectedChips()).toBe(8); + + const moreButton = Array.from(host.querySelectorAll("button")).find((button) => + button.textContent?.includes("+34 more"), + ); + expect(moreButton).toBeTruthy(); + moreButton?.focus(); + expect(document.activeElement).toBe(moreButton); + + act(() => { + moreButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + + expect(host.textContent).not.toContain("+34 more"); + expect(countSelectedChips()).toBe(42); + expect(document.activeElement).toBe(moreButton); + + const showLessButton = Array.from(host.querySelectorAll("button")).find((button) => + button.textContent?.includes("Show less"), + ); + expect(showLessButton).toBeTruthy(); + expect(showLessButton).toBe(moreButton); + + act(() => { + showLessButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + + expect(countSelectedChips()).toBe(8); + expect(host.textContent).toContain("+34 more"); + expect(document.activeElement).toBe(moreButton); + }); + it("stays compact and scrollable with around 100 options", () => { const host = renderCard({ interaction: manyOptionsRequestCheckboxConfirmationInteraction, diff --git a/ui/src/components/IssueThreadInteractionCard.tsx b/ui/src/components/IssueThreadInteractionCard.tsx index a29ae2a4..1117cf06 100644 --- a/ui/src/components/IssueThreadInteractionCard.tsx +++ b/ui/src/components/IssueThreadInteractionCard.tsx @@ -1335,6 +1335,7 @@ function RequestCheckboxConfirmationResolution({ interaction: RequestCheckboxConfirmationInteraction; }) { const target = interaction.payload.target ?? null; + const [expanded, setExpanded] = useState(false); if (interaction.status === "accepted") { const totalOptions = interaction.payload.options.length; @@ -1343,8 +1344,13 @@ function RequestCheckboxConfirmationResolution({ result: interaction.result, }); const selectedCount = interaction.result?.selectedOptionIds?.length ?? selectedLabels.length; - const visibleLabels = selectedLabels.slice(0, CHECKBOX_SUMMARY_LABEL_LIMIT); - const hiddenCount = selectedLabels.length - visibleLabels.length; + const visibleLabels = expanded + ? selectedLabels + : selectedLabels.slice(0, CHECKBOX_SUMMARY_LABEL_LIMIT); + const hiddenCount = selectedLabels.length - CHECKBOX_SUMMARY_LABEL_LIMIT; + const hasHiddenLabels = hiddenCount > 0; + const chipClassName = + "inline-flex items-center rounded-sm border border-border/60 bg-transparent px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground"; return (
@@ -1361,10 +1367,18 @@ function RequestCheckboxConfirmationResolution({ {visibleLabels.map((label, index) => ( ))} - {hiddenCount > 0 ? ( - - +{hiddenCount} more - + {hasHiddenLabels ? ( + ) : null}
) : null}