Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anmolsinghbhatia wants to merge 1 commit into
base: preview
Choose a base branch
from
+18 −5
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/web/core/components/issues/peek-overview/view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
}
}
},
issueId
issueId,
["main-sidebar"]
Copy link

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Passing an array literal directly to the hook can cause unnecessary re-renders. Each time this component renders, a new array instance is created, which will cause the useCallback dependency to change and the handleClick callback to be recreated.

Consider defining this array outside the component or using useMemo to memoize it, especially if this component re-renders frequently. For example: const EXCLUDED_IDS = useMemo(() => ["main-sidebar"], []); or define it as a constant outside the component if it never changes.

Copilot uses AI. Check for mistakes.
);

const handleKeyDown = () => {
Expand Down
2 changes: 2 additions & 0 deletions apps/web/core/components/sidebar/resizable-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -192,6 +193,7 @@ export function ResizableSidebar({
}}
role="complementary"
aria-label="Main sidebar"
data-prevent-outside-click={isMobile}
>
<aside
className={cn(
Expand Down
18 changes: 14 additions & 4 deletions apps/web/core/hooks/use-peek-overview-outside-click.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,27 @@ import { useEffect, useCallback } from "react";
const usePeekOverviewOutsideClickDetector = (
ref: React.RefObject<HTMLElement>,
callback: () => void,
issueId: string
issueId: string,
excludePreventionElementIds?: string[]
) => {
const handleClick = useCallback(
(event: MouseEvent) => {
if (!(event.target instanceof HTMLElement)) return;
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;
Expand All @@ -43,7 +53,7 @@ const usePeekOverviewOutsideClickDetector = (
callback();
}
},
[ref, callback, issueId]
[ref, callback, issueId, excludePreventionElementIds]
);

useEffect(() => {
Expand Down
Loading