PocketArC LogoPocketArC

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.