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

[anmolsinghbhatia]

Description

This PR fixes the behaviour of the peek view outside click when navigating from the sidebar.

Type of Change

• Bug fix

Summary by CodeRabbit

• Bug Fixes
  • Improved outside-click behavior for issue previews to better handle sidebar interactions across devices.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes implement an exclusion mechanism for the peek-overview outside-click detector. The sidebar is marked with an id and conditional prevent-outside-click attribute, the detector hook is updated to accept an exclusion list of element ids, and the peek-overview view passes the sidebar id as an excluded element to allow clicks on specific areas to still close the overlay.

Changes

Cohort / File(s)	Summary
Outside-Click Detection Hook apps/web/core/hooks/use-peek-overview-outside-click.tsx	Added optional excludePreventionElementIds?: string[] parameter. Updated logic to check if elements with data-prevent-outside-click have ids in the exclusion list; if excluded, the outside-click callback may proceed. Dependency array updated to include the exclusion list.
Sidebar Container apps/web/core/components/sidebar/resizable-sidebar.tsx	Added id="main-sidebar" and data-prevent-outside-click={isMobile} attributes to the main sidebar container div.
Peek-Overview Integration apps/web/core/components/issues/peek-overview/view.tsx	Updated call to usePeekOverviewOutsideClickDetector to pass the current issueId and ["main-sidebar"] as the exclusion list, altering when the peek overlay closes on outside clicks.

Sequence Diagram

sequenceDiagram
    actor User
    participant Sidebar as Resizable Sidebar<br/>(id: main-sidebar)
    participant Detector as Outside-Click Detector
    participant PeekView as Peek-Overview View

    User->>Sidebar: Clicks on sidebar
    Sidebar->>Detector: Detects click event
    Detector->>Detector: Check for data-prevent-outside-click
    alt Element has attribute
        Detector->>Detector: Get element id<br/>(main-sidebar)
        Detector->>Detector: Check if id in<br/>excludePreventionElementIds
        alt ID in exclusion list
            Detector->>PeekView: Proceed with callback<br/>(close overlay)
        else ID not excluded
            Detector->>Detector: Prevent callback
        end
    else No attribute found
        Detector->>PeekView: Proceed with callback
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A sidebar stands guard with id so clear,
When clicks come near, we now hold dear,
An exclusion list in our grasp so tight,
Letting main-sidebar dismiss with might!
Outside-click flows with thoughtful care. ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete, missing critical sections like Screenshots/Media, Test Scenarios, and References that are specified in the template.	Add Screenshots/Media section (before/after of peek view behavior), Test Scenarios describing how the fix was verified, and References linking to the related issue WEB-6137.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing outside click behavior in the work item peek view, matching the actual code modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-work-item-peek-view-outside-click

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR fixes the peek view outside click behavior when navigating from the sidebar. The issue was that clicking on sidebar elements (which have the data-prevent-outside-click attribute) would not close the peek view, even though the desired behavior is to close it when clicking on the sidebar.

Changes:

• Added an exclusion mechanism to the outside click detection hook that allows specific elements with data-prevent-outside-click to bypass the prevention behavior
• Added an id="main-sidebar" to the sidebar element for identification
• Configured the peek overview to exclude the main-sidebar from outside click prevention

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
apps/web/core/hooks/use-peek-overview-outside-click.tsx	Added excludePreventionElementIds parameter to allow selective bypassing of the data-prevent-outside-click behavior for specific elements
apps/web/core/components/sidebar/resizable-sidebar.tsx	Added id="main-sidebar" to identify the sidebar element for the exclusion mechanism
apps/web/core/components/issues/peek-overview/view.tsx	Passed ["main-sidebar"] as the exclusion list to enable outside click on the sidebar

[Copilot]

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.

[makeplane]

Linked to Plane Work Item(s)

• [WEB-6137] Modal not closing after clicking milestone work items in Overview

This comment was auto-generated by Plane