diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx index b425a97e9..7ef8e0211 100644 --- a/apps/app/components/core/board-view/single-issue.tsx +++ b/apps/app/components/core/board-view/single-issue.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; @@ -68,6 +68,9 @@ export const SingleBoardIssue: React.FC = ({ handleTrashBox, userAuth, }) => { + const [contextMenu, setContextMenu] = useState(false); + const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 }); + const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; @@ -180,18 +183,62 @@ export const SingleBoardIssue: React.FC = ({ if (snapshot.isDragging) handleTrashBox(snapshot.isDragging); }, [snapshot, handleTrashBox]); + useEffect(() => { + const hideContextMenu = () => setContextMenu(false); + + window.addEventListener("click", hideContextMenu); + + return () => { + window.removeEventListener("click", hideContextMenu); + }; + }, []); + const isNotAllowed = userAuth.isGuest || userAuth.isViewer; return (
{ + e.preventDefault(); + setContextMenu(true); + setContextMenuPosition({ x: e.pageX, y: e.pageY }); + }} > + {contextMenu && ( +
+
+ + Open issue + + + +
+
+ )}
{!isNotAllowed && (
@@ -226,7 +273,7 @@ export const SingleBoardIssue: React.FC = ({ -
+
{properties.priority && selectedGroup !== "priority" && (