Fixed #2064 - contentStyle defect on VirtualScroller

src/components/autocomplete/AutoComplete.vue

@@ -21,8 +21,8 @@
                 <div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
                     <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{'height': scrollHeight}" :items="suggestions" :disabled="virtualScrollerDisabled">
-                        <template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
+                        <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle }">
-                            <ul :id="listId" :ref="(el) => listRef(el, contentRef)" :class="['p-autocomplete-items', styleClass]" role="listbox">
+                            <ul :id="listId" :ref="(el) => listRef(el, contentRef)" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
                                 <template v-if="!optionGroupLabel">
                                     <li v-for="(item, i) of items" class="p-autocomplete-item" :key="getOptionRenderKey(item)" @click="selectItem($event, item)" role="option" v-ripple :data-index="getOptionIndex(i, getItemOptions)">
                                         <slot name="item" :item="item" :index="getOptionIndex(i, getItemOptions)">{{getItemContent(item)}}</slot>

src/components/dropdown/Dropdown.vue

@@ -27,8 +27,8 @@
                     </div>
                     <div :ref="itemsWrapperRef" class="p-dropdown-items-wrapper" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}">
                         <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{'height': scrollHeight}" :disabled="virtualScrollerDisabled">
-                            <template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
+                            <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle }">
-                                <ul :ref="contentRef" :class="['p-dropdown-items', styleClass]" role="listbox">
+                                <ul :ref="contentRef" :class="['p-dropdown-items', styleClass]" :style="contentStyle" role="listbox">
                                     <template v-if="!optionGroupLabel">
                                         <li v-for="(option, i) of items" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
                                             :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)">

src/components/listbox/Listbox.vue

@@ -9,8 +9,8 @@
         </div>
         <div class="p-listbox-list-wrapper" :style="listStyle">
             <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :disabled="virtualScrollerDisabled">
-                <template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
+                <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle }">
-                    <ul :ref="contentRef" :class="['p-listbox-list', styleClass]" role="listbox" aria-multiselectable="multiple">
+                    <ul :ref="contentRef" :class="['p-listbox-list', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="multiple">
                         <template v-if="!optionGroupLabel">
                             <li v-for="(option, i) of items" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
                                 :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" >

src/components/multiselect/MultiSelect.vue

@@ -12,9 +12,9 @@
                     </template>
                     <template v-else-if="display === 'chip'">
                         <div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
-                             <slot name="chip" :value="item">
+                            <slot name="chip" :value="item">
                                 <span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
-                             </slot>
+                            </slot>
                             <span v-if="!disabled" class="p-multiselect-token-icon pi pi-times-circle" @click="removeChip(item)"></span>
                         </div>
                         <template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>
@@ -50,8 +50,8 @@
                     </div>
                     <div class="p-multiselect-items-wrapper" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}">
                         <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{'height': scrollHeight}" :disabled="virtualScrollerDisabled">
-                            <template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
+                            <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle}">
-                                <ul :ref="contentRef" :class="['p-multiselect-items p-component', styleClass]" role="listbox" aria-multiselectable="true">
+                                <ul :ref="contentRef" :class="['p-multiselect-items p-component', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true">
                                     <template v-if="!optionGroupLabel">
                                         <li v-for="(option, i) of items" :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" role="option" :aria-selected="isSelected(option)"
                                             :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @keydown="onOptionKeyDown($event, option)" :tabindex="tabindex||'0'" :aria-label="getOptionLabel(option)"  v-ripple>

src/components/virtualscroller/VirtualScroller.vue

@@ -284,7 +284,7 @@ export default {
             }
         },
         getLast(last = 0, isCols) {
-             if (this.items) {
+            if (this.items) {
                 return Math.min((isCols ? (this.columns || this.items[0]).length : this.items.length), last);
             }
 

src/views/dropdown/DropdownDemo.vue

@@ -48,10 +48,10 @@
                 <h5>Loading State</h5>
                 <Dropdown placeholder="Loading..." loading></Dropdown>
 
-                <h5>Virtual Scroll (1000 Items)</h5>
+                <h5>Virtual Scroll (100000 Items)</h5>
                 <Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
 
-                <h5>Virtual Scroll (1000 Items) and Lazy</h5>
+                <h5>Virtual Scroll (100000 Items) and Lazy</h5>
                 <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
                     <template v-slot:loader="{ options }">
                         <div class="flex align-items-center p-2" style="height: 31px" >
@@ -125,8 +125,8 @@ export default {
                     {label: 'Yokohama', value: 'Yokohama'}
                 ]
             }],
-            items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
-            lazyItems: Array.from({ length: 1000 })
+            lazyItems: Array.from({ length: 100000 })
         }
     },
     loadLazyTimeout: null,

src/views/dropdown/DropdownDoc.vue

@@ -632,8 +632,8 @@ export default {
                     {label: 'Yokohama', value: 'Yokohama'}
                 ]
             }],
-            items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
-            lazyItems: Array.from({ length: 1000 })
+            lazyItems: Array.from({ length: 100000 })
         }
     },
     loadLazyTimeout: null,
@@ -793,8 +793,8 @@ export default {
             }
         ]);
 
-        const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+        const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
-        const lazyItems = ref(Array.from({ length: 1000 }));
+        const lazyItems = ref(Array.from({ length: 100000 }));
 
         return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
     },
@@ -953,8 +953,8 @@ export default {
                     }
                 ]);
 
-                const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+                const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
-                const lazyItems = ref(Array.from({ length: 1000 }));
+                const lazyItems = ref(Array.from({ length: 100000 }));
 
                 return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
             },

src/views/listbox/ListboxDemo.vue

@@ -33,7 +33,7 @@
                     </template>
                 </Listbox>
 
-                <h5>Virtual Scroll (1000 Items)</h5>
+                <h5>Virtual Scroll (100000 Items)</h5>
                 <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
             </div>
         </div>
@@ -98,7 +98,7 @@ export default {
                     {label: 'Yokohama', value: 'Yokohama'}
                 ]
             }],
-            items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
         }
     },
     components: {

src/views/listbox/ListboxDoc.vue

@@ -465,7 +465,7 @@ export default {
                     {label: 'Yokohama', value: 'Yokohama'}
                 ]
             }],
-            items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
         }
     }
 }
@@ -490,15 +490,15 @@ export default {
             </template>
         </Listbox>
 
-       <h5>Advanced with Templating, Filtering and Multiple Selection</h5>
+        <h5>Advanced with Templating, Filtering and Multiple Selection</h5>
-       <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
+        <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
-           <template #option="slotProps">
+            <template #option="slotProps">
-               <div class="country-item">
+                <div class="country-item">
-                   <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
-                   <div>{{slotProps.option.name}}</div>
+                    <div>{{slotProps.option.name}}</div>
-               </div>
+                </div>
-           </template>
+            </template>
-       </Listbox>
+        </Listbox>
 
         <h5>Virtual Scroll (1000 Items)</h5>
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
@@ -563,7 +563,7 @@ export default {
                 }
             ]);
 
-        const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+        const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
 
         return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities, items, selectedItem }
     }
@@ -660,7 +660,7 @@ export default {
                         }
                     ]);
 
-                const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+                const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
 
                 return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities, items, selectedItem }
             },