From 9d570b3ed790ecdfd8e88ce2eae268a1d6559d69 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Fri, 6 Mar 2026 08:04:35 -0600
Subject: [PATCH] fix(ui): enable scroll wheel in selectors inside dialogs

Radix Dialog wraps content in react-remove-scroll, which blocks wheel
events on portaled Popover content (rendered outside the Dialog DOM
tree). Add a disablePortal option to PopoverContent and use it for all
InlineEntitySelector instances inside NewIssueDialog so the Popover
stays in the Dialog's DOM tree and scrolling works.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/InlineEntitySelector.tsx |  4 +++
 ui/src/components/NewIssueDialog.tsx       |  3 +++
 ui/src/components/ui/popover.tsx           | 29 +++++++++++-----------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/InlineEntitySelector.tsx b/ui/src/components/InlineEntitySelector.tsx
index 24991f9a..db453b7d 100644
--- a/ui/src/components/InlineEntitySelector.tsx
+++ b/ui/src/components/InlineEntitySelector.tsx
@@ -21,6 +21,8 @@ interface InlineEntitySelectorProps {
   className?: string;
   renderTriggerValue?: (option: InlineEntityOption | null) => ReactNode;
   renderOption?: (option: InlineEntityOption, isSelected: boolean) => ReactNode;
+  /** Skip the Portal so the popover stays in the DOM tree (fixes scroll inside Dialogs). */
+  disablePortal?: boolean;
 }
 
 export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySelectorProps>(
@@ -37,6 +39,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
       className,
       renderTriggerValue,
       renderOption,
+      disablePortal,
     },
     ref,
   ) {
@@ -114,6 +117,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
           side="bottom"
           collisionPadding={16}
           className="w-[min(20rem,calc(100vw-2rem))] p-1"
+          disablePortal={disablePortal}
           onOpenAutoFocus={(event) => {
             event.preventDefault();
             // On touch devices, don't auto-focus the search input to avoid
diff --git a/ui/src/components/NewIssueDialog.tsx b/ui/src/components/NewIssueDialog.tsx
index fd3d004b..b396bbe4 100644
--- a/ui/src/components/NewIssueDialog.tsx
+++ b/ui/src/components/NewIssueDialog.tsx
@@ -649,6 +649,7 @@ export function NewIssueDialog() {
                 value={assigneeId}
                 options={assigneeOptions}
                 placeholder="Assignee"
+                disablePortal
                 noneLabel="No assignee"
                 searchPlaceholder="Search assignees..."
                 emptyMessage="No assignees found."
@@ -683,6 +684,7 @@ export function NewIssueDialog() {
                 value={projectId}
                 options={projectOptions}
                 placeholder="Project"
+                disablePortal
                 noneLabel="No project"
                 searchPlaceholder="Search projects..."
                 emptyMessage="No projects found."
@@ -738,6 +740,7 @@ export function NewIssueDialog() {
                     value={assigneeModelOverride}
                     options={modelOverrideOptions}
                     placeholder="Default model"
+                    disablePortal
                     noneLabel="Default model"
                     searchPlaceholder="Search models..."
                     emptyMessage="No models found."
diff --git a/ui/src/components/ui/popover.tsx b/ui/src/components/ui/popover.tsx
index 103bec3e..c250a7d9 100644
--- a/ui/src/components/ui/popover.tsx
+++ b/ui/src/components/ui/popover.tsx
@@ -19,22 +19,23 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  disablePortal = false,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & { disablePortal?: boolean }) {
+  const content = (
+    <PopoverPrimitive.Content
+      data-slot="popover-content"
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      )}
+      {...props}
+    />
   )
+  if (disablePortal) return content
+  return <PopoverPrimitive.Portal>{content}</PopoverPrimitive.Portal>
 }
 
 function PopoverAnchor({