[WEB-6137] fix: work item peek view outside click #8610

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 = () => {

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(

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,10 +19,19 @@ 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) {
+          // 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;
         while (targetElement) {
@@ -43,7 +53,7 @@ const usePeekOverviewOutsideClickDetector = (
         callback();
       }
     },
-    [ref, callback, issueId]
+    [ref, callback, issueId, excludePreventionElementIds]
   );
 
   useEffect(() => {