Open ITSFerroli opened 2 weeks ago
Can confirm this issue. I upgraded to PrimeVue version 4.0.4 in unstyled
mode with Tailwind and this behaviour occurs in both the Select & MultiSelect components with the virtualScrollerOptions
applied. First options are shown when clicked open, but when you start scrolling down the content does not render anymore.
I had this issue as well, and we need to inject the CSS for virtual scroller. I copied it from the documentation website:
.p-virtualscroller {
position: relative;
overflow: auto;
contain: strict;
transform: translateZ(0);
will-change: scroll-position;
outline: 0 none;
}
.p-virtualscroller-content {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
will-change: transform;
}
.p-virtualscroller-spacer {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
transform-origin: 0 0;
pointer-events: none;
}
.p-virtualscroller-loader {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--p-virtualscroller-loader-mask-background);
color: var(--p-virtualscroller-loader-mask-color);
}
.p-virtualscroller-loader-mask {
display: flex;
align-items: center;
justify-content: center;
}
.p-virtualscroller-loading-icon {
font-size: var(--p-virtualscroller-loader-icon-size);
width: var(--p-virtualscroller-loader-icon-size);
height: var(--p-virtualscroller-loader-icon-size);
}
.p-virtualscroller-horizontal > .p-virtualscroller-content {
display: flex;
}
.p-virtualscroller-inline .p-virtualscroller-content {
position: static;
}
I tried with this CSS and seems to be working
Describe the bug
When the unstyle mode is set to true, the VirtualScroller component, and all others that use it (e.g., MultiSelect, etc.), do not function as they should.
Reproducer
https://stackblitz.com/edit/primevue-4-vite-issue-template-vn7zyw?file=src%2Fmain.js
PrimeVue version
4.0.5
Vue version
4.x
Language
ES6
Build / Runtime
Vite
Browser(s)
No response
Steps to reproduce the behavior
Please refer to the issue at the provided link and try updating the unstyle parameter in the main.js file. If it is set to false, the VirtualScroller works correctly; if it is set to true, it does not.
Expected behavior
I expect the component to work correctly regardless of the unstyled parameter in the main.js file