Shadcn Combobox Not Scrolling
shadcnradix-uireact
While working on my new personal budgeting app, I noticed that the Shadcn UI combobox was not scrollable.
That's not great UX (a <select> without scroll?), so I wanted to find out if there was a fix for it.
After some digging, I found this issue on Radix UI's GitHub, and it seems like the fix is pretty simple:
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
onWheel={(e) => {
// This fixes a bug where the popover would not scroll:
// https://github.com/radix-ui/primitives/issues/1159
e.stopPropagation();
}}
className={cn(
// ...
)}
{...props}
/>
The onWheel handler is added to the PopoverPrimitive.Content component, which is the component that the combobox uses to render the popover.
This seems like a Radix UI bug, but at the same time, Shadcn UI should contain the fix by default.