Refactor #5437 - For scrollHeight

components/lib/listbox/BaseListbox.vue

@@ -14,6 +14,10 @@ export default {
         optionGroupLabel: null,
         optionGroupChildren: null,
         listStyle: null,
+        scrollHeight: {
+            type: String,
+            default: '14rem'
+        },
         invalid: {
             type: Boolean,
             default: false

components/lib/listbox/Listbox.d.ts

@@ -271,6 +271,11 @@ export interface ListboxProps {
      * Inline style of inner list element.
      */
     listStyle?: string | undefined;
+    /**
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     * @defaultValue 14rem
+     */
+    scrollHeight?: string | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false

components/lib/listbox/Listbox.vue

@@ -43,8 +43,8 @@
                 {{ filterResultMessageText }}
             </span>
         </div>
-        <div ref="listWrapper" :class="cx('wrapper')" :style="listStyle" v-bind="ptm('wrapper')">
-            <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
+        <div :class="cx('wrapper')" :style="[{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }, listStyle]" v-bind="ptm('wrapper')">
+            <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="[{ height: scrollHeight }, listStyle]" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
                 <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
                     <ul
                         :ref="(el) => listRef(el, contentRef)"