ScrollArea thumb not updating when the data loads dynamically.

[Shashank-Salian]

I have created a Combobox which fetches next page data when scrolling to the bottom, and I have used ScrollArea wrapped around CommandList. Now the problem is when a new data loads the scrollarea thumb doesn't update to adjust to the new size of the list.

I am not sure weather this is a issue or this is simply not possible.

I have slightly modified the CommandList component as well (removed overflow-x-hidden and overflow-y-auto):

function CommandList({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
  return (
    <CommandPrimitive.List
      data-slot="command-list"
      className={cn("max-h-[300px]", className)}
      {...props}
    />
  );
}

Reproduced the bug here:
https://codesandbox.io/p/devbox/q3qzjk?migrateFrom=c8jdkn

[nicolas-m-design]

The remaining max-h-[300px] on CommandList can cause this. I reproduced the same symptom in a reduced example with cmdk@1.1.1 and @radix-ui/react-scroll-area@1.4.0.

Let the inner list grow with the items and put the height constraint on the outer ScrollArea:

<ScrollArea className="h-[300px]">
  <CommandList className="max-h-none overflow-visible">
    {/* Your existing CommandGroup / CommandItem children */}
  </CommandList>
</ScrollArea>

This assumes the usual shadcn ScrollArea wrapper, whose viewport fills the root. Alternatively, remove max-h-[300px] from your modified CommandList implementation altogether. There should be one scroll container here: the ScrollArea viewport.

Why it matters: Radix observes its content wrapper's size to recalculate the thumb. Once the inner list reaches its max-height, appending items can increase the viewport's scrollHeight through visible overflow without increasing that wrapper's measured height. The resize observer then has no size change to report. The relevant observers are in the ScrollArea implementation.

In the reduced example, adding 15 rows changed scrollHeight from 480 to 960 px. With the capped list, the thumb stayed at 118 px; with the cap removed, it changed from 118 to 59 px. Filtering the corrected list also worked. This was a separate reproduction of the structure in your snippet, not a run of your original sandbox.

For infinite loading, also attach your scroll listener or intersection-observer root to the actual ScrollArea viewport rather than CommandList, since CommandList no longer scrolls independently.