From a8d81656fc222d52f3830fccfab20066c89cb300 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 12 Feb 2026 16:28:51 +0530
Subject: [PATCH] [WEB-6137] fix: work item peek view outside click #8610

---
 .../components/issues/peek-overview/view.tsx   |  3 ++-
 .../components/sidebar/resizable-sidebar.tsx   |  2 ++
 .../hooks/use-peek-overview-outside-click.tsx  | 18 ++++++++++++++----
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
index a821a8bad..a55a260e5 100644
--- a/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -96,7 +96,8 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
         }
       }
     },
-    issueId
+    issueId,
+    ["main-sidebar"]
   );
 
   const handleKeyDown = () => {
diff --git a/apps/web/core/components/sidebar/resizable-sidebar.tsx b/apps/web/core/components/sidebar/resizable-sidebar.tsx
index 155547a6c..ba2f123bd 100644
--- a/apps/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/apps/web/core/components/sidebar/resizable-sidebar.tsx
@@ -178,6 +178,7 @@ export function ResizableSidebar({
     <>
       {/* Main Sidebar */}
       <div
+        id="main-sidebar"
         className={cn(
           "h-full z-20 bg-surface-1 border-r border-subtle",
           !isResizing && "transition-all duration-300 ease-in-out",
@@ -192,6 +193,7 @@ export function ResizableSidebar({
         }}
         role="complementary"
         aria-label="Main sidebar"
+        data-prevent-outside-click={isMobile}
       >
         <aside
           className={cn(
diff --git a/apps/web/core/hooks/use-peek-overview-outside-click.tsx b/apps/web/core/hooks/use-peek-overview-outside-click.tsx
index d8c1dd0ee..6fcf11028 100644
--- a/apps/web/core/hooks/use-peek-overview-outside-click.tsx
+++ b/apps/web/core/hooks/use-peek-overview-outside-click.tsx
@@ -10,7 +10,8 @@ import { useEffect, useCallback } from "react";
 const usePeekOverviewOutsideClickDetector = (
   ref: React.RefObject<HTMLElement>,
   callback: () => void,
-  issueId: string
+  issueId: string,
+  excludePreventionElementIds?: string[]
 ) => {
   const handleClick = useCallback(
     (event: MouseEvent) => {
@@ -18,9 +19,18 @@ const usePeekOverviewOutsideClickDetector = (
       if (ref.current && !ref.current.contains(event.target)) {
         // check for the closest element with attribute name data-prevent-outside-click
         const preventOutsideClickElement = event.target.closest("[data-prevent-outside-click]");
-        // if the closest element with attribute name data-prevent-outside-click is found, return
+        // if the closest element with attribute name data-prevent-outside-click is found
         if (preventOutsideClickElement) {
-          return;
+          // Check if this element's ID is in the exclusion list
+          const elementId = preventOutsideClickElement.id;
+          const shouldExcludePrevention =
+            excludePreventionElementIds && elementId && excludePreventionElementIds.includes(elementId);
+
+          if (!shouldExcludePrevention && !preventOutsideClickElement.contains(ref.current)) {
+            // Only prevent the callback if the ref is NOT inside the same prevent-outside-click container.
+            // This allows normal outside click detection for elements within the same container
+            return;
+          }
         }
         // check if the click target is the current issue element or its children
         let targetElement: HTMLElement | null = event.target;
@@ -43,7 +53,7 @@ const usePeekOverviewOutsideClickDetector = (
         callback();
       }
     },
-    [ref, callback, issueId]
+    [ref, callback, issueId, excludePreventionElementIds]
   );
 
   useEffect(() => {