Refactor #5437 - For scrollHeight

components/lib/autocomplete/AutoComplete.d.ts

@@ -322,7 +322,7 @@ export interface AutoCompleteProps {
     optionGroupChildren?: string | ((data: any) => any[]) | undefined;
     /**
      * Maximum height of the suggestions panel.
-     * @defaultValue 200px
+     * @defaultValue 14rem
      */
     scrollHeight?: string | undefined;
     /**

components/lib/autocomplete/BaseAutoComplete.vue

@@ -22,7 +22,7 @@ export default {
         optionGroupChildren: null,
         scrollHeight: {
             type: String,
-            default: '200px'
+            default: '14rem'
         },
         dropdown: {
             type: Boolean,

components/lib/dropdown/BaseDropdown.vue

@@ -15,7 +15,7 @@ export default {
         optionGroupChildren: [String, Function],
         scrollHeight: {
             type: String,
-            default: '200px'
+            default: '14rem'
         },
         filter: Boolean,
         filterPlaceholder: String,

components/lib/dropdown/Dropdown.d.ts

@@ -302,7 +302,7 @@ export interface DropdownProps {
     optionGroupChildren?: string | ((data: any) => any[]) | undefined;
     /**
      * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
-     * @defaultValue 200px
+     * @defaultValue 14rem
      */
     scrollHeight?: string | undefined;
     /**

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')">
+        <div :class="cx('wrapper')" :style="[{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }, listStyle]" v-bind="ptm('wrapper')">
-            <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
+            <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)"

components/lib/multiselect/BaseMultiSelect.vue

@@ -15,7 +15,7 @@ export default {
         optionGroupChildren: null,
         scrollHeight: {
             type: String,
-            default: '200px'
+            default: '14rem'
         },
         placeholder: String,
         variant: {

components/lib/multiselect/MultiSelect.d.ts

@@ -332,7 +332,7 @@ export interface MultiSelectProps {
     optionGroupChildren?: string | ((data: any) => any[]) | undefined;
     /**
      * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
-     * @defaultValue 200px
+     * @defaultValue 14rem
      */
     scrollHeight?: string | undefined;
     /**

components/lib/orderlist/BaseOrderList.vue

@@ -46,6 +46,10 @@ export default {
             type: Boolean,
             default: false
         },
+        scrollHeight: {
+            type: String,
+            default: '14rem'
+        },
         buttonProps: {
             type: Object,
             default() {

components/lib/orderlist/OrderList.d.ts

@@ -226,6 +226,11 @@ export interface OrderListProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     * @defaultValue 14rem
+     */
+    scrollHeight?: string | undefined;
     /**
      * Used to pass all properties of the ButtonProps to the move up button inside the component.
      * @type {ButtonProps}

components/lib/orderlist/OrderList.vue

@@ -40,6 +40,7 @@
             multiple
             :metaKeySelection="metaKeySelection"
             :listStyle="listStyle"
+            :scrollHeight="scrollHeight"
             :tabindex="tabindex"
             :dataKey="dataKey"
             :autoOptionFocus="autoOptionFocus"

components/lib/picklist/BasePickList.vue

@@ -46,6 +46,10 @@ export default {
             type: Boolean,
             default: false
         },
+        scrollHeight: {
+            type: String,
+            default: '14rem'
+        },
         showSourceControls: {
             type: Boolean,
             default: true

components/lib/picklist/PickList.d.ts

@@ -341,6 +341,11 @@ export interface PickListProps {
      * @defaultValue 960px
      */
     breakpoint?: string | undefined;
+    /**
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     * @defaultValue 14rem
+     */
+    scrollHeight?: string | undefined;
     /**
      * Whether to displays rows with alternating colors.
      * @defaultValue false

components/lib/picklist/PickList.vue

@@ -41,6 +41,7 @@
                 multiple
                 :metaKeySelection="metaKeySelection"
                 :listStyle="listStyle"
+                :scrollHeight="scrollHeight"
                 :tabindex="sourceList && sourceList.length > 0 ? tabindex : -1"
                 :dataKey="dataKey"
                 :autoOptionFocus="autoOptionFocus"
@@ -104,6 +105,7 @@
                 multiple
                 :metaKeySelection="metaKeySelection"
                 :listStyle="listStyle"
+                :scrollHeight="scrollHeight"
                 :tabindex="targetList && targetList.length > 0 ? tabindex : -1"
                 :dataKey="dataKey"
                 :autoOptionFocus="autoOptionFocus"

components/lib/treeselect/BaseTreeSelect.vue

@@ -10,7 +10,7 @@ export default {
         options: Array,
         scrollHeight: {
             type: String,
-            default: '400px'
+            default: '14rem'
         },
         placeholder: {
             type: String,

components/lib/treeselect/TreeSelect.d.ts

@@ -12,7 +12,7 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { TreeExpandedKeys, TreePassThroughOptions } from '../tree';
 import { TreeNode } from '../treenode';
-import { ClassComponent, GlobalComponentConstructor, PassThrough, HintedString } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
 
 export declare type TreeSelectPassThroughOptionType = TreeSelectPassThroughAttributes | ((options: TreeSelectPassThroughMethodOptions) => TreeSelectPassThroughAttributes | string) | string | null | undefined;
 
@@ -172,7 +172,7 @@ export interface TreeSelectProps {
     options?: TreeNode[] | undefined;
     /**
      * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
-     * @defaultValue 200px
+     * @defaultValue 14rem
      */
     scrollHeight?: string | undefined;
     /**