Select: Virtual scroll only rendering the first 12 values (Tailwind)

[1H-Alex]

Describe the bug

The Select component with virtual scroll activated only displays the first 12 values. After those values, the list is empty. The length of the list still seems to represent all of the values.

Please note that Stackblitz preview of the official demo of the virtual scroll for the Select component in the Tailwind version of Primevue is not working correctly due to main.js trying to import none-existing components. Even if sanitized, the virtual scroll functionality in the Select component is still not working. When running this example with the latest version of Primevue (4.0.5), as seen in the example below, the code is still not working as expected.

The 4.0.1 version with Tailwind is also not working, see example.

The 4.0.5 version without Tailwind seems to be working, see example.

Reproducer

https://stackblitz.com/edit/tmzwfq?file=package.json

PrimeVue version

4.0.5

Preset

Lara

Vue version

3.4.5

Language

ES6

Build / Runtime

Vite

Browser(s)

Chrome V 127, Safari V 17.5 (19618.2.12.11.6), FF V 128

Steps to reproduce the behavior

1. Click the Select input field
2. Scroll down
3. See that the list only shows the first 12 values and then an empty list.

Expected behavior

1. Click the Select input field
2. Scroll down
3. New values should appear as needed

[balindenberg]

+1

[Nagell]

+1

[darioillusorium]

Hi! Is a problem of VirtualScroll itself, not only in Select. I have experienced this problem on a DataTable using unstyled PrimeVue. VirtualScroller seems not to be adapted to unstyled so I have had to manually create the style of the virtualscroll within the tailwind presets (looking at the style of the classes that are used in styled mode). Specifically I use aura ( (github) ) so I have created "virtualscroller/index.js" within "presets/aura" with this content:

export default {
    root: {
        class: [
            'relative overflow-auto [contain:strict] [transform: translateZ(0)] will-change-scroll [outline: 0 none]'
        ]
    },
    content: {
        class: [
            'absolute top-0 left-0 min-h-full min-w-full will-change-transform',
        ]
    },
    spacer: {
        class: [
            'absolute top-0 left-0 h-px w-px [transform-origin: 0 0] pointer-events-none'
        ]
    }
};

This works for me. I hope it helps if you are using Tailwind Pressets from Github.

But it's a bug, I think it should be fixed.