fix(ui): cmdk wheel-scroll on macOS + match dropdown widths to trigger
Radix Popover swallowed wheel events on cmdk-backed comboboxes for macOS users — the country / timezone dropdowns were unscrollable with a Magic Mouse / trackpad. Add an `onWheel` translator on `CommandList` plus `overscroll-contain` so the list captures the delta directly. Lights up every cmdk popover (Companies, Residential Clients, Clients, Yachts, settings). Country and Timezone comboboxes now constrain popover content to `w-[var(--radix-popper-anchor-width)]` with sensible `min-w-*` floors so wide triggers get correspondingly wide popovers. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -118,7 +118,10 @@ export function CountryCombobox({
|
|||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[280px] p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popper-anchor-width)] min-w-[280px] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput placeholder="Search country or code…" />
|
<CommandInput placeholder="Search country or code…" />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
|
|||||||
@@ -92,7 +92,10 @@ export function TimezoneCombobox({
|
|||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[360px] p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popper-anchor-width)] min-w-[360px] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput placeholder="Search timezones…" />
|
<CommandInput placeholder="Search timezones…" />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
|
|||||||
@@ -57,10 +57,19 @@ CommandInput.displayName = CommandPrimitive.Input.displayName
|
|||||||
const CommandList = React.forwardRef<
|
const CommandList = React.forwardRef<
|
||||||
React.ElementRef<typeof CommandPrimitive.List>,
|
React.ElementRef<typeof CommandPrimitive.List>,
|
||||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, onWheel, ...props }, ref) => (
|
||||||
|
// Inside a Radix Popover, native wheel scrolling is intercepted by the
|
||||||
|
// focus-scope and never reaches the cmdk list — so trackpad/mousewheel
|
||||||
|
// scrolling on the country dropdown silently no-ops. Translate the wheel
|
||||||
|
// event ourselves so the list scrolls regardless of focus state.
|
||||||
<CommandPrimitive.List
|
<CommandPrimitive.List
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
|
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden overscroll-contain", className)}
|
||||||
|
onWheel={(event) => {
|
||||||
|
onWheel?.(event)
|
||||||
|
if (event.defaultPrevented) return
|
||||||
|
event.currentTarget.scrollTop += event.deltaY
|
||||||
|
}}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
|
|||||||
Reference in New Issue
Block a user