[BUG] - Double scrollbar appears on Select component

[FranzaLeny]

HeroUI Version

2.8.5

Describe the bug

When using the Select component with isVirtualized and maxListboxHeight props, enabling scrollShadowProps.hideScrollBar={false} results in two scrollbars appearing. One scrollbar belongs to the ul element inside the listbox, and the other belongs to the outer div wrapper.

If hideScrollBar is left as true (the default), the extra scrollbar is hidden, but this is not desirable when a visible scrollbar is needed.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use the Select component with these props:

const SelectComponent = (
  <Select
    isVirtualized
    label="Role"
    maxListboxHeight={150}
    selectionMode="multiple"
    showScrollIndicators
    variant="bordered"
    classNames={{ listbox: `p-0!` }}
    onSelectionChange={handleSelectChange}
    scrollShadowProps={{ hideScrollBar: false }}
  >
    {({ key, label }) => <SelectItem key={key}>{label}</SelectItem>}
  </Select>
)

Expected behavior

As a user, I expected the Select component dropdown to display only one scrollbar when the content exceeds the max height. The scrollbar should be clearly visible or hidden based on the scrollShadowProps.hideScrollBar setting. However, currently, there are always two scrollbars visible, or if I hide the scrollbar, the scroll indicators are not shown properly, causing a confusing and cluttered UI.

Screenshots or Videos

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-2863