chore: issue click & peek overview improvement (#3157)

* improve issue popover to detect outside click * chore: stopPropagation event added to prevent peekoverview triggering in action menu & issue properties * chore: stopPropagation event added to prevent peekoverview triggering in issue properties * chore: enable entire issue card clickability in list and kanban layout, introduce control-click functionality to open issues in new tabs * chore: build error fix and unused variable removed * chore: build error fix --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
2024-06-14 14:31:34 +00:00 · 2023-12-18 12:11:14 +05:30 · 2023-12-18 12:11:14 +05:30 · 969a51f425
commit 969a51f425
parent a37dec45d9
19 changed files with 167 additions and 82 deletions
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@ -36,13 +36,17 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {

  const menuActionRef = useRef<HTMLDivElement | null>(null);

-  const handleIssuePeekOverview = (issue: IIssue) => {
+  const handleIssuePeekOverview = (issue: IIssue, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
-    });
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
+      });
+    }
  };

  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
@ -75,7 +79,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                ref={provided.innerRef}
-                onClick={() => handleIssuePeekOverview(issue)}
+                onClick={(e) => handleIssuePeekOverview(issue, e)}
              >
                {issue?.tempId !== undefined && (
                  <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
--- a/web/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@ -9,13 +9,17 @@ import { IIssue } from "types";
 export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
  const router = useRouter();

-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssueId: data?.id, peekProjectId: data?.project },
-    });
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${data?.workspace_detail.slug}/projects/${data?.project_detail.id}/issues/${data?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekIssueId: data?.id, peekProjectId: data?.project },
+      });
+    }
  };

  return (
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Draggable } from "@hello-pangea/dnd";
+import { Draggable, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import isEqual from "lodash/isEqual";
 // components
 import { KanBanProperties } from "./properties";
@ -32,11 +32,23 @@ interface IssueDetailsBlockProps {
  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
  displayProperties: IIssueDisplayProperties | null;
  isReadOnly: boolean;
+  snapshot: DraggableStateSnapshot;
+  isDragDisabled: boolean;
 }

 const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
-  const { sub_group_id, columnId, issue, showEmptyGroup, handleIssues, quickActions, displayProperties, isReadOnly } =
-    props;
+  const {
+    sub_group_id,
+    columnId,
+    issue,
+    showEmptyGroup,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    isReadOnly,
+    snapshot,
+    isDragDisabled,
+  } = props;

  const router = useRouter();

@ -44,20 +56,29 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
    if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, EIssueActions.UPDATE);
  };

-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
-    });
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
+      });
+    }
  };

  return (
-    <>
+    <div
+      className={`flex flex-col space-y-2 cursor-pointer rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all w-full ${
+        isDragDisabled ? "" : "hover:cursor-grab"
+      } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
+      onClick={handleIssuePeekOverview}
+    >
      {displayProperties && displayProperties?.key && (
-        <div className="relative">
-          <div className="line-clamp-1 text-xs text-custom-text-300">
+        <div className="relative w-full ">
+          <div className="line-clamp-1 text-xs text-left text-custom-text-300">
            {issue.project_detail.identifier}-{issue.sequence_id}
          </div>
          <div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">
@ -70,9 +91,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
        </div>
      )}
      <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-        <div className="line-clamp-2 text-sm font-medium text-custom-text-100" onClick={handleIssuePeekOverview}>
-          {issue.name}
-        </div>
+        <div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
      </Tooltip>
      <div>
        <KanBanProperties
@ -85,7 +104,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
          isReadOnly={isReadOnly}
        />
      </div>
-    </>
+    </div>
  );
 };

@ -132,22 +151,18 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
            {issue.tempId !== undefined && (
              <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
            )}
-            <div
-              className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
-                isDragDisabled ? "" : "hover:cursor-grab"
-              } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
-            >
-              <KanbanIssueMemoBlock
-                sub_group_id={sub_group_id}
-                columnId={columnId}
-                issue={issue}
-                showEmptyGroup={showEmptyGroup}
-                handleIssues={handleIssues}
-                quickActions={quickActions}
-                displayProperties={displayProperties}
-                isReadOnly={!canEditIssueProperties}
-              />
-            </div>
+            <KanbanIssueMemoBlock
+              sub_group_id={sub_group_id}
+              columnId={columnId}
+              issue={issue}
+              showEmptyGroup={showEmptyGroup}
+              handleIssues={handleIssues}
+              quickActions={quickActions}
+              displayProperties={displayProperties}
+              isReadOnly={!canEditIssueProperties}
+              snapshot={snapshot}
+              isDragDisabled={isDragDisabled}
+            />
          </div>
        )}
      </Draggable>
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@ -25,20 +25,27 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
    handleIssues(issueToUpdate, EIssueActions.UPDATE);
  };

-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
-    });
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
+      });
+    }
  };

  const canEditIssueProperties = canEditProperties(issue.project);

  return (
    <>
-      <div className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm">
+      <button
+        className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm w-full"
+        onClick={handleIssuePeekOverview}
+      >
        {displayProperties && displayProperties?.key && (
          <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
            {issue?.project_detail?.identifier}-{issue.sequence_id}
@ -49,10 +56,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
          <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
        )}
        <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-          <div
-            className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100"
-            onClick={handleIssuePeekOverview}
-          >
+          <div className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100 text-left">
            {issue.name}
          </div>
        </Tooltip>
@ -75,7 +79,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
            </div>
          )}
        </div>
-      </div>
+      </button>
    </>
  );
 };
--- a/web/components/issues/issue-layouts/properties/assignee.tsx
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@ -142,7 +142,10 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
          className={`flex w-full items-center justify-between gap-1 text-xs ${
            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
          } ${buttonClassName}`}
-          onClick={() => (!projectId || !_members[projectId]) && getProjectMembers()}
+          onClick={(e) => {
+            e.stopPropagation();
+            (!projectId || !_members[projectId]) && getProjectMembers();
+          }}
        >
          {label}
          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -178,6 +181,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                      active && !selected ? "bg-custom-background-80" : ""
                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                  }
+                  onClick={(e) => e.stopPropagation()}
                >
                  {({ selected }) => (
                    <>
--- a/web/components/issues/issue-layouts/properties/date.tsx
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@ -56,12 +56,14 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
        return (
          <>
            <Popover.Button
+              as="button"
              ref={dropdownBtn}
              className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
                disabled
                  ? "pointer-events-none cursor-not-allowed text-custom-text-200"
                  : "cursor-pointer hover:bg-custom-background-80"
              }`}
+              onClick={(e) => e.stopPropagation()}
            >
              <div className="flex items-center justify-center gap-2 overflow-hidden">
                <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
@ -92,7 +94,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
                {({ close }) => (
                  <DatePicker
                    selected={value ? new Date(value) : new Date()}
-                    onChange={(val: any) => {
+                    onChange={(val: any, e) => {
+                      e?.stopPropagation();
                      if (onChange && val) {
                        onChange(renderDateFormat(val));
                        close();
--- a/web/components/issues/issue-layouts/properties/estimates.tsx
+++ b/web/components/issues/issue-layouts/properties/estimates.tsx
@ -116,6 +116,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
          className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
          } ${buttonClassName}`}
+          onClick={(e) => e.stopPropagation()}
        >
          {label}
          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -150,6 +151,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
                        active ? "bg-custom-background-80" : ""
                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                    }
+                    onClick={(e) => e.stopPropagation()}
                  >
                    {({ selected }) => (
                      <>
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@ -177,7 +177,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
              ? "cursor-pointer"
              : "cursor-pointer hover:bg-custom-background-80"
          }  ${buttonClassName}`}
-          onClick={() => !storeLabels && fetchLabels()}
+          onClick={(e) => {
+            e.stopPropagation();
+            !storeLabels && fetchLabels();
+          }}
        >
          {label}
          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -214,6 +217,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                      selected ? "text-custom-text-100" : "text-custom-text-200"
                    }`
                  }
+                  onClick={(e) => e.stopPropagation()}
                >
                  {({ selected }) => (
                    <>
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@ -121,7 +121,10 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
              className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
              } ${buttonClassName}`}
-              onClick={() => !storeStates && fetchProjectStates()}
+              onClick={(e) => {
+                e.stopPropagation();
+                !storeStates && fetchProjectStates();
+              }}
            >
              {label}
              {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -157,6 +160,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
                          active ? "bg-custom-background-80" : ""
                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                      }
+                      onClick={(e) => e.stopPropagation()}
                    >
                      {({ selected }) => (
                        <>
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@ -58,7 +58,12 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
        }}
        currentStore={EProjectStore.PROJECT}
      />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
        <CustomMenu.MenuItem
          onClick={(e) => {
            e.preventDefault();
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@ -40,7 +40,12 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
        handleClose={() => setDeleteIssueModal(false)}
        onSubmit={handleDelete}
      />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
        <CustomMenu.MenuItem
          onClick={(e) => {
            e.preventDefault();
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@ -58,7 +58,12 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
        }}
        currentStore={EProjectStore.CYCLE}
      />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
        <CustomMenu.MenuItem
          onClick={(e) => {
            e.preventDefault();
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@ -58,7 +58,13 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
        }}
        currentStore={EProjectStore.MODULE}
      />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
        <CustomMenu.MenuItem
          onClick={(e) => {
            e.preventDefault();
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@ -68,7 +68,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
        }}
        currentStore={EProjectStore.PROJECT}
      />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
        <CustomMenu.MenuItem
          onClick={(e) => {
            e.preventDefault();
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
@ -34,13 +34,17 @@ export const IssueColumn: React.FC<Props> = ({

  const menuActionRef = useRef<HTMLDivElement | null>(null);

-  const handleIssuePeekOverview = (issue: IIssue) => {
+  const handleIssuePeekOverview = (issue: IIssue, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
-    });
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
+      });
+    }
  };

  const paddingLeft = `${nestingLevel * 54}px`;
@ -99,7 +103,7 @@ export const IssueColumn: React.FC<Props> = ({
          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
            <div
              className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
-              onClick={() => handleIssuePeekOverview(issue)}
+              onClick={(e) => handleIssuePeekOverview(issue, e)}
            >
              {issue.name}
            </div>
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@ -6,8 +6,6 @@ import { IssuePropertyState } from "../../properties";
 import useSubIssue from "hooks/use-sub-issue";
 // types
 import { IIssue, IState } from "types";
-import { mutate } from "swr";
-import { SUB_ISSUES } from "constants/fetch-keys";

 type Props = {
  issue: IIssue;
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@ -1,4 +1,4 @@
-import { FC, ReactNode, useState } from "react";
+import { FC, ReactNode, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@ -14,6 +14,8 @@ import {
  PeekOverviewIssueDetails,
  PeekOverviewProperties,
 } from "components/issues";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
 import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
 // types
@ -107,6 +109,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
  const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  // ref
+  const issuePeekOverviewRef = useRef<HTMLDivElement>(null);

  const updateRoutePeekId = () => {
    if (issueId != peekIssueId) {
@ -151,6 +155,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {

  const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);

+  useOutsideClickDetector(issuePeekOverviewRef, () => removeRoutePeekId());
+
  return (
    <>
      {issue && !isArchived && (
@ -178,6 +184,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {

        {issueId === peekIssueId && (
          <div
+            ref={issuePeekOverviewRef}
            className={`fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300 
          ${peekMode === "side-peek" ? `bottom-0 right-0 top-0 w-full md:w-[50%]` : ``}
          ${peekMode === "modal" ? `left-[50%] top-[50%] h-5/6 w-5/6 -translate-x-[50%] -translate-y-[50%]` : ``}
--- a/web/components/issues/sub-issues/issue.tsx
+++ b/web/components/issues/sub-issues/issue.tsx
@ -49,13 +49,17 @@ export const SubIssues: React.FC<ISubIssues> = ({
  const router = useRouter();
  const { peekProjectId, peekIssueId } = router.query;

-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
-    });
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
+      });
+    }
  };

  return (
--- a/web/components/project/priority-select.tsx
+++ b/web/components/project/priority-select.tsx
@ -93,6 +93,7 @@ export const PrioritySelect: React.FC<Props> = ({
          className={`flex h-full w-full items-center justify-between gap-1 ${
            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
          } ${buttonClassName}`}
+          onClick={(e) => e.stopPropagation()}
        >
          {label}
          {!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
@ -127,6 +128,7 @@ export const PrioritySelect: React.FC<Props> = ({
                        active ? "bg-custom-background-80" : ""
                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                    }
+                    onClick={(e) => e.stopPropagation()}
                  >
                    {({ selected }) => (
                      <>