diff --git a/apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx b/apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx index 17a8ddafb..dd9d8100b 100644 --- a/apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx +++ b/apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx @@ -17,6 +17,7 @@ import { } from "~/components/board/layout"; import type { GridPlacement } from "~/components/board/layout"; import { useSectionContext } from "../section-context"; +import { useBoardSelection } from "~/components/board/selection/board-selection-context"; import { beginGridTransaction, commitGridTransaction, previewGridMove, previewGridResize } from "./dnd"; import type { GridTransaction } from "./dnd"; import { useGridEditorRuntimeStatus } from "./grid-editor-runtime"; @@ -48,6 +49,17 @@ export const FixedGridItem = ({ const { section, items, innerSections, columnCount, maxRowCount, announce } = useSectionContext(); const { commitSectionGrid } = useGridLayoutActions(); const [isKeyboardEditing, setIsKeyboardEditing] = useState(false); + const { isSelected, toggleSelectItem, selectedItemIds } = useBoardSelection(); + const selected = item.type === "item" && isSelected(item.id); + + const handleClickCapture = (event: React.MouseEvent) => { + if (!isEditorActive || item.type !== "item") return; + if (event.metaKey || event.ctrlKey || (selectedItemIds.size > 0 && !event.shiftKey)) { + event.preventDefault(); + event.stopPropagation(); + toggleSelectItem(item.id); + } + }; const instructionsId = useId(); const isEditorActive = isEditMode && runtimeStatus === "ready"; const placement = toPlacement(item); @@ -178,6 +190,8 @@ export const FixedGridItem = ({ return ( { if (document.body.hasAttribute("data-board-grid-interacting")) return true; + if (event.metaKey || event.ctrlKey) return true; const target = event.target; const activationElement = source.handle ?? source.element; if (!(target instanceof Element) || target === activationElement) return false;