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:
@@ -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
|
||||||
|
|||||||
@@ -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."
|
||||||
|
|||||||
@@ -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({
|
||||||
|
|||||||
Reference in New Issue
Block a user