From a82328da84a606f1fd053b7e7b5a69528d67e3a5 Mon Sep 17 00:00:00 2001
From: Mattsson <111893710+mattssonn@users.noreply.github.com>
Date: Tue, 25 Aug 2026 19:18:41 +0200
Subject: [PATCH] fix(ui): make ContextPicker dropdown clickable inside modal
 dialogs (#1907)

The picker's listbox is portaled to document.body, so inside a modal
Radix dialog it inherits the pointer-events: none body lock: clicks on
items never register, the picker's outside-click handler sees the
mousedown as outside and closes the menu, and selection silently fails.
In the ROT/RUT payout dialog this made the ROT/RUT type switch (and the
year picker) dead, so a paid RUT invoice was unreachable (#1884
follow-up).

Apply the sanctioned companion-overlay pattern already used by
AccountCombobox and HelpPopover: pointer-events-auto undoes the body
lock, data-dialog-companion keeps DialogContent/SheetContent from
dismissing the dialog on a click in the list. Both are no-ops for
page-toolbar pickers outside dialogs.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 components/common/ContextPicker.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/common/ContextPicker.tsx b/components/common/ContextPicker.tsx
index f597e337..46820b71 100644
--- a/components/common/ContextPicker.tsx
+++ b/components/common/ContextPicker.tsx
@@ -114,7 +114,12 @@ export function ContextPicker({
           <div
             ref={listRef}
             role="listbox"
-            className="fixed z-[60] min-w-[220px] max-w-[320px] rounded-lg border border-border bg-popover py-1 shadow-lg animate-in fade-in slide-in-from-top-1 duration-150"
+            // Portaled to document.body, so inside a modal dialog the list is
+            // DOM-wise outside DialogContent: data-dialog-companion keeps a
+            // click in it from dismissing the dialog, and pointer-events-auto
+            // undoes the modal body lock that would swallow item clicks.
+            data-dialog-companion=""
+            className="pointer-events-auto fixed z-[60] min-w-[220px] max-w-[320px] rounded-lg border border-border bg-popover py-1 shadow-lg animate-in fade-in slide-in-from-top-1 duration-150"
             style={{ top: pos.top, left: pos.left }}
           >
             <div className="max-h-72 overflow-y-auto px-1">