event.stopPropagation()}
onContextMenu={(event) => event.preventDefault()}
>
@@ -2364,7 +2357,8 @@ function TaskCardComponent({
actions={contextMenuActions}
onActionSelect={closeContextMenu}
/>
-
+ ,
+ document.body,
)}
{task.id}
diff --git a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
index aff5dd16c8..38cd237020 100644
--- a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
+++ b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
@@ -150,6 +150,42 @@ function expectTimerInFooterRight(container: HTMLElement) {
expect(timer?.closest(".card-meta-badges")).toBeNull();
}
+function mockBoardContextMenuGeometry() {
+ const originalInnerWidth = window.innerWidth;
+ const originalInnerHeight = window.innerHeight;
+ Object.defineProperty(window, "innerWidth", { configurable: true, value: 800 });
+ Object.defineProperty(window, "innerHeight", { configurable: true, value: 600 });
+ const rectSpy = vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function getMockRect(this: HTMLElement) {
+ if (this.classList.contains("card")) {
+ return { x: 520, y: 340, left: 520, top: 340, right: 760, bottom: 520, width: 240, height: 180, toJSON: () => ({}) } as DOMRect;
+ }
+ if (this.classList.contains("task-card-context-menu-popover")) {
+ const left = Number.parseFloat(this.style.left || "0");
+ const top = Number.parseFloat(this.style.top || "0");
+ return { x: left, y: top, left, top, right: left + 180, bottom: top + 220, width: 180, height: 220, toJSON: () => ({}) } as DOMRect;
+ }
+ return { x: 0, y: 0, left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, toJSON: () => ({}) } as DOMRect;
+ });
+ return () => {
+ rectSpy.mockRestore();
+ Object.defineProperty(window, "innerWidth", { configurable: true, value: originalInnerWidth });
+ Object.defineProperty(window, "innerHeight", { configurable: true, value: originalInnerHeight });
+ };
+}
+
+function expectBoardContextMenuPortaled() {
+ const menu = screen.getByRole("menu");
+ const popover = menu.closest(".task-card-context-menu-popover") as HTMLElement | null;
+ expect(popover).not.toBeNull();
+ expect(popover?.parentElement).toBe(document.body);
+ expect(popover?.closest(".card")).toBeNull();
+ expect(popover?.closest(".column")).toBeNull();
+ expect(popover?.closest(".column-body")).toBeNull();
+ expect(popover?.style.left).not.toBe("");
+ expect(popover?.style.top).not.toBe("");
+ return popover!;
+}
+
const highFanout = {
totalCount: 7,
activeTodoCount: 3,
@@ -192,52 +228,73 @@ describe("TaskCard", () => {
expect(onOpenDetailWithTab.mock.calls[0][1]).toBe("workflow");
});
- it("opens the board card context menu on right-click without opening detail", async () => {
+ it("opens the board card context menu as a viewport portal on right-click without opening detail", async () => {
+ const cleanupGeometry = mockBoardContextMenuGeometry();
const onOpenDetail = vi.fn();
const onPauseTask = vi.fn(async () => makeTask({ paused: true }));
- render(
-
,
- );
+ try {
+ render(
+
,
+ );
- fireEvent.contextMenu(document.querySelector(".card")!, { clientX: 24, clientY: 28 });
- expect(screen.getByRole("menu")).toBeInTheDocument();
- expect(onOpenDetail).not.toHaveBeenCalled();
+ fireEvent.contextMenu(document.querySelector(".card")!, { clientX: 790, clientY: 590 });
+ const popover = await waitFor(() => expectBoardContextMenuPortaled());
+ expect(popover.style.left).toBe("612px");
+ expect(popover.style.top).toBe("372px");
+ expect(onOpenDetail).not.toHaveBeenCalled();
- fireEvent.click(screen.getByRole("menuitem", { name: "Pause" }));
- await waitFor(() => expect(onPauseTask).toHaveBeenCalledWith("FN-001"));
- expect(onPauseTask).toHaveBeenCalledTimes(1);
- expect(screen.queryByRole("menu")).not.toBeInTheDocument();
- expect(onOpenDetail).not.toHaveBeenCalled();
+ fireEvent.click(screen.getByRole("menuitem", { name: "Pause" }));
+ await waitFor(() => expect(onPauseTask).toHaveBeenCalledWith("FN-001"));
+ expect(onPauseTask).toHaveBeenCalledTimes(1);
+ expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+ expect(document.querySelector(".task-card-context-menu-popover")).toBeNull();
+ expect(onOpenDetail).not.toHaveBeenCalled();
+ } finally {
+ cleanupGeometry();
+ }
});
- it("opens the board card context menu from keyboard, selects an action, and closes", async () => {
+ it("opens the board card context menu from keyboard as a viewport portal, selects an action, and closes", async () => {
+ const cleanupGeometry = mockBoardContextMenuGeometry();
const onOpenDetail = vi.fn();
const onArchiveTask = vi.fn(async () => makeTask({ column: "archived" }));
- render(
-
,
- );
+ try {
+ render(
+
,
+ );
- const card = document.querySelector(".card") as HTMLElement;
- card.focus();
- fireEvent.keyDown(card, { key: "F10", shiftKey: true });
+ const card = document.querySelector(".card") as HTMLElement;
+ card.focus();
+ fireEvent.keyDown(card, { key: "F10", shiftKey: true });
- expect(screen.getByRole("menu")).toBeInTheDocument();
- fireEvent.click(screen.getByRole("menuitem", { name: "Archive" }));
+ expectBoardContextMenuPortaled();
+ fireEvent.click(screen.getByRole("menuitem", { name: "Archive" }));
- await waitFor(() => expect(onArchiveTask).toHaveBeenCalledWith("FN-001"));
- expect(onArchiveTask).toHaveBeenCalledTimes(1);
- expect(screen.queryByRole("menu")).not.toBeInTheDocument();
- expect(onOpenDetail).not.toHaveBeenCalled();
+ await waitFor(() => expect(onArchiveTask).toHaveBeenCalledWith("FN-001"));
+ expect(onArchiveTask).toHaveBeenCalledTimes(1);
+ expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+ expect(onOpenDetail).not.toHaveBeenCalled();
+ } finally {
+ cleanupGeometry();
+ }
});
it("shows refine for a done card context menu and routes to the refinement opener", () => {
@@ -364,35 +421,44 @@ describe("TaskCard", () => {
expect(screen.queryByRole("menuitem", { name: "Merge & Close" })).not.toBeInTheDocument();
});
- it("opens the board card context menu on touch long-press, selects the tapped action, and suppresses detail click", async () => {
+ it("opens the board card context menu on touch long-press as a viewport portal, selects the tapped action, and suppresses detail click", async () => {
vi.useFakeTimers();
+ const cleanupGeometry = mockBoardContextMenuGeometry();
const onOpenDetail = vi.fn();
const onUnpauseTask = vi.fn(async () => makeTask());
- render(
-
,
- );
+ try {
+ render(
+
,
+ );
- const card = document.querySelector(".card") as HTMLElement;
- fireEvent.pointerDown(card, { pointerType: "touch", pointerId: 1, clientX: 16, clientY: 16 });
- act(() => vi.advanceTimersByTime(550));
+ const card = document.querySelector(".card") as HTMLElement;
+ fireEvent.pointerDown(card, { pointerType: "touch", pointerId: 1, clientX: 790, clientY: 590 });
+ act(() => vi.advanceTimersByTime(550));
- expect(screen.getByRole("menu")).toBeInTheDocument();
- fireEvent.pointerUp(card, { pointerType: "touch", pointerId: 1, clientX: 16, clientY: 16 });
- fireEvent.click(card);
- expect(onOpenDetail).not.toHaveBeenCalled();
+ expectBoardContextMenuPortaled();
+ fireEvent.pointerUp(card, { pointerType: "touch", pointerId: 1, clientX: 790, clientY: 590 });
+ fireEvent.click(card);
+ expect(onOpenDetail).not.toHaveBeenCalled();
- fireEvent.pointerUp(screen.getByRole("menuitem", { name: "Unpause" }), { pointerType: "touch", pointerId: 2 });
- await act(async () => {
- await Promise.resolve();
- });
- expect(onUnpauseTask).toHaveBeenCalledWith("FN-001");
- expect(onUnpauseTask).toHaveBeenCalledTimes(1);
- expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+ fireEvent.pointerUp(screen.getByRole("menuitem", { name: "Unpause" }), { pointerType: "touch", pointerId: 2 });
+ await act(async () => {
+ await Promise.resolve();
+ });
+ expect(onUnpauseTask).toHaveBeenCalledWith("FN-001");
+ expect(onUnpauseTask).toHaveBeenCalledTimes(1);
+ expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+ } finally {
+ cleanupGeometry();
+ }
});
it("cancels board card long-press when touch moves before the delay", () => {
@@ -414,6 +480,64 @@ describe("TaskCard", () => {
expect(screen.queryByRole("menu")).toBeNull();
});
+ it("dispatches portaled board menu actions for the interacted duplicate card", async () => {
+ mockConfirm.mockResolvedValueOnce(true);
+ const onDuplicateTask = vi.fn(async () => makeTask({ id: "FN-002-copy" }));
+ render(
+
,
+ );
+
+ const secondCard = document.querySelectorAll(".card")[1] as HTMLElement;
+ fireEvent.contextMenu(secondCard, { clientX: 64, clientY: 72 });
+ expectBoardContextMenuPortaled();
+ fireEvent.click(screen.getByRole("menuitem", { name: "Duplicate" }));
+
+ await waitFor(() => expect(onDuplicateTask).toHaveBeenCalledWith("FN-002"));
+ expect(onDuplicateTask).toHaveBeenCalledTimes(1);
+ expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+ });
+
+ it("cleans up the portaled board menu when the task column changes", () => {
+ const { rerender } = render(
+
,
+ );
+
+ fireEvent.contextMenu(document.querySelector(".card")!, { clientX: 24, clientY: 28 });
+ expectBoardContextMenuPortaled();
+
+ rerender(
+
,
+ );
+
+ expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+ expect(document.querySelector(".task-card-context-menu-popover")).toBeNull();
+ });
+
it("does not show the Answer-questions button when not awaiting input", () => {
render(