fix: directory content table context menu

fix radix throwing event.preventDefault is not a function error on right
click in DirectoryContentTable

Co-authored-by: Ona <no-reply@ona.com>

packages/web/src/directories/directory-page/directory-content-table.tsx

@@ -39,12 +39,14 @@ import { TextFileIcon } from "../../components/icons/text-file-icon"
 import { type FileDragInfo, useFileDrop } from "../../files/use-file-drop"
 import { cn } from "../../lib/utils"
 import { DirectoryPageContext } from "./context"
-import { contextMenuTargeItemsAtom } from "./state"
 
 type DirectoryContentTableProps = {
 	filterFn: (item: FileSystemItem) => boolean
 	fileDragInfoAtom: PrimitiveAtom<FileDragInfo | null>
-	onContextMenu: (items: FileSystemItem[]) => void
+	onContextMenu: (
+		row: Row<FileSystemItem>,
+		table: TableType<FileSystemItem>,
+	) => void
 	onOpenFile: (file: Doc<"files">) => void
 }
 
@@ -144,15 +146,7 @@ function useTableColumns(
 	)
 }
 
-export function DirectoryContentTable(props: DirectoryContentTableProps) {
+export function DirectoryContentTable({
-	return (
-		<div className="w-full">
-			<DirectoryContentTableContent {...props} />
-		</div>
-	)
-}
-
-export function DirectoryContentTableContent({
 	filterFn,
 	onContextMenu,
 	fileDragInfoAtom,
@@ -190,17 +184,10 @@ export function DirectoryContentTableContent({
 		row: Row<FileSystemItem>,
 		_event: React.MouseEvent,
 	) => {
-		const target = store.get(contextMenuTargeItemsAtom)
+		if (!row.getIsSelected()) {
-		if (target.length > 0) {
-			onContextMenu(target)
-		} else if (row.getIsSelected()) {
-			onContextMenu(
-				table.getSelectedRowModel().rows.map((row) => row.original),
-			)
-		} else {
 			selectRow(row)
-			onContextMenu([row.original])
 		}
+		onContextMenu(row, table)
 	}
 
 	const selectRow = (row: Row<FileSystemItem>) => {

packages/web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx

@@ -7,6 +7,7 @@ import {
 } from "@fileone/convex/model/filesystem"
 import { useMutation } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
+import type { Row, Table } from "@tanstack/react-table"
 import {
 	useMutation as useContextMutation,
 	useMutation as useConvexMutation,
@@ -98,6 +99,19 @@ function RouteComponent() {
 		[setOpenedFile],
 	)
 
+	const handleContextMenuRequest = (
+		row: Row<FileSystemItem>,
+		table: Table<FileSystemItem>,
+	) => {
+		if (row.getIsSelected()) {
+			setContextMenuTargetItems(
+				table.getSelectedRowModel().rows.map((row) => row.original),
+			)
+		} else {
+			setContextMenuTargetItems([row.original])
+		}
+	}
+
 	if (!directory || !directoryContent || !rootDirectory) {
 		return <DirectoryPageSkeleton />
 	}
@@ -114,16 +128,17 @@ function RouteComponent() {
 				</div>
 			</header>
 
-			<div className="w-full">
+			{/* DirectoryContentContextMenu must wrap div instead of DirectoryContentTable, otherwise radix will throw "event.preventDefault is not a function" error, idk why */}
 			<DirectoryContentContextMenu>
+				<div className="w-full">
 					<DirectoryContentTable
 						filterFn={tableFilter}
 						fileDragInfoAtom={fileDragInfoAtom}
-						onContextMenu={setContextMenuTargetItems}
+						onContextMenu={handleContextMenuRequest}
 						onOpenFile={openFile}
 					/>
-				</DirectoryContentContextMenu>
 				</div>
+			</DirectoryContentContextMenu>
 
 			<WithAtom atom={newFileTypeAtom}>
 				{(newFileType, setNewFileType) => (
@@ -168,6 +183,7 @@ function DirectoryContentContextMenu({
 	const [target, setTarget] = useAtom(contextMenuTargetItemsAtom)
 	const setOptimisticDeletedItems = useSetAtom(optimisticDeletedItemsAtom)
 	const moveToTrashMutation = useContextMutation(api.filesystem.moveToTrash)
+
 	const { mutate: moveToTrash } = useMutation({
 		mutationFn: moveToTrashMutation,
 		onMutate: ({ handles }) => {
@@ -205,6 +221,8 @@ function DirectoryContentContextMenu({
 		}
 	}
 
+	console.log("target", target)
+
 	return (
 		<ContextMenu
 			onOpenChange={(open) => {
@@ -214,7 +232,7 @@ function DirectoryContentContextMenu({
 			}}
 		>
 			<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
-			{target && (
+			{target.length > 0 && (
 				<ContextMenuContent>
 					<RenameMenuItem />
 					<ContextMenuItem onClick={handleDelete}>