Scrollbar for Select Component

[Anton-Plagemann]

Description

Currently, the Select components items popover does not display a scrollbar, even though the content is scrollable. This may confuse users, as they might not realize there are additional options available beyond what is initially visible. While in some cases the partial display of the last cut-off item may hint that more options are available, it is not ideal to rely on this visual cue alone.

Example from the Select Component docs:

It seems like Broccoli is the last item:

But it is not:

Additional context

https://ui.nuxt.com/components/select#items

[benjamincanac]

This is actually done by Reka UI: https://github.com/unovue/reka-ui/blob/v2/packages/core/src/Combobox/ComboboxViewport.vue#L49-L52, not sure why though 🤔

[Anton-Plagemann]

@benjamincanac Thank you for your research! I also came across this issue in the Reka UI repository. Should I open a new issue there, or is this something that can be fixed within this project, or perhaps something I can resolve as a user of Nuxt UI?

[benjamincanac]

We could remove the usage of the ComboboxViewport and SelectViewport components and simply use a div with overlow-y-auto but I wonder if this is the best behavior 🤔

[hasan-ozbey]

I'm starting to have serious doubts about the reka-ui package. It seems more focused on prettiness than on adding real functionality to HTML elements, and in some cases it even removes features. Why remove a scrollbar without any justification, simply to mimic other libraries? What are their motto? Pretty UI, worst UX?

[Ozan-Deniz]

I've also found the part reka-ui adds in console. I've been trying to overwrite that data from within main.css or by adding :ui data to the component but nothing works.
The part reka-ui adds is this:
<script> /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } [data-reka-select-viewport]::-webkit-scrollbar { display: none; } </script>

Did you guys find any solution?