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>
This commit is contained in:
Dotta
2026-03-06 08:04:35 -06:00
parent d4eb502389
commit 9d570b3ed7
3 changed files with 22 additions and 14 deletions

View File

@@ -21,6 +21,8 @@ interface InlineEntitySelectorProps {
className?: string; className?: string;
renderTriggerValue?: (option: InlineEntityOption | null) => ReactNode; renderTriggerValue?: (option: InlineEntityOption | null) => ReactNode;
renderOption?: (option: InlineEntityOption, isSelected: boolean) => 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>( export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySelectorProps>(
@@ -37,6 +39,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
className, className,
renderTriggerValue, renderTriggerValue,
renderOption, renderOption,
disablePortal,
}, },
ref, ref,
) { ) {
@@ -114,6 +117,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
side="bottom" side="bottom"
collisionPadding={16} collisionPadding={16}
className="w-[min(20rem,calc(100vw-2rem))] p-1" className="w-[min(20rem,calc(100vw-2rem))] p-1"
disablePortal={disablePortal}
onOpenAutoFocus={(event) => { onOpenAutoFocus={(event) => {
event.preventDefault(); event.preventDefault();
// On touch devices, don't auto-focus the search input to avoid // On touch devices, don't auto-focus the search input to avoid

View File

@@ -649,6 +649,7 @@ export function NewIssueDialog() {
value={assigneeId} value={assigneeId}
options={assigneeOptions} options={assigneeOptions}
placeholder="Assignee" placeholder="Assignee"
disablePortal
noneLabel="No assignee" noneLabel="No assignee"
searchPlaceholder="Search assignees..." searchPlaceholder="Search assignees..."
emptyMessage="No assignees found." emptyMessage="No assignees found."
@@ -683,6 +684,7 @@ export function NewIssueDialog() {
value={projectId} value={projectId}
options={projectOptions} options={projectOptions}
placeholder="Project" placeholder="Project"
disablePortal
noneLabel="No project" noneLabel="No project"
searchPlaceholder="Search projects..." searchPlaceholder="Search projects..."
emptyMessage="No projects found." emptyMessage="No projects found."
@@ -738,6 +740,7 @@ export function NewIssueDialog() {
value={assigneeModelOverride} value={assigneeModelOverride}
options={modelOverrideOptions} options={modelOverrideOptions}
placeholder="Default model" placeholder="Default model"
disablePortal
noneLabel="Default model" noneLabel="Default model"
searchPlaceholder="Search models..." searchPlaceholder="Search models..."
emptyMessage="No models found." emptyMessage="No models found."

View File

@@ -19,22 +19,23 @@ function PopoverContent({
className, className,
align = "center", align = "center",
sideOffset = 4, sideOffset = 4,
disablePortal = false,
...props ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) { }: React.ComponentProps<typeof PopoverPrimitive.Content> & { disablePortal?: boolean }) {
return ( const content = (
<PopoverPrimitive.Portal> <PopoverPrimitive.Content
<PopoverPrimitive.Content data-slot="popover-content"
data-slot="popover-content" align={align}
align={align} sideOffset={sideOffset}
sideOffset={sideOffset} className={cn(
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",
"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
className )}
)} {...props}
{...props} />
/>
</PopoverPrimitive.Portal>
) )
if (disablePortal) return content
return <PopoverPrimitive.Portal>{content}</PopoverPrimitive.Portal>
} }
function PopoverAnchor({ function PopoverAnchor({