VirtualScroller: Unstyled mode broke core functionality

[ITSFerroli]

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

[DBolderman]

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.

[EdisonHarada]

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