primevue 3.9.1 → 3.12.0

package/message/Message.d.ts

@@ -1,19 +1,65 @@
 import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-interface MessageProps {
-    severity?: string;
-    closable?: boolean;
-    sticky?: boolean;
-    life?: number;
-    icon?: string;
+type MessageSeverityType = 'success' | 'info' | 'warn' | 'error' | undefined;
+
+export interface MessageProps {
+    /**
+     * Severity level of the message.
+     * @see MessageSeverityType
+     * Default value is 'info'.
+     */
+    severity?: MessageSeverityType;
+    /**
+     * Whether the message can be closed manually using the close icon.
+     * Default value is true.
+     */
+    closable?: boolean | undefined;
+    /**
+     * When enabled, message is not removed automatically.
+     */
+    sticky?: boolean | undefined;
+    /**
+     * Delay in milliseconds to close the message automatically.
+     * Default value is 3000.
+     */
+    life?: number | undefined;
+    /**
+     * Display a custom icon for the message.
+     */
+    icon?: string | undefined;
+}
+
+export interface MessageSlots {
+    /**
+     * Default custom slot.
+     */
+    default: () => VNode[];
 }
 
-declare class Message {
-    $props: MessageProps;
-    $emit(eventName: 'close', event: Event): this;
-    $slots: {
-        '': VNode[];
+export declare type MessageEmits = {
+    /**
+     * Callback to invoke when a message is closed.
+     * @param {Event} event - Browser event.
+     */
+    'close': (event: Event) => void;
+}
+
+declare class Message extends ClassComponent<MessageProps, MessageSlots, MessageEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Message: GlobalComponentConstructor<Message>
     }
 }
 
+/**
+ *
+ * Messages is used to display inline messages with various severities.
+ *
+ * Demos:
+ *
+ * - [Message](https://www.primefaces.org/primevue/showcase/#/message)
+ *
+ */
 export default Message;

package/message/message.cjs.js

@@ -65,7 +65,7 @@ var script = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
     }
 };
 

package/message/message.esm.js

@@ -137,4 +137,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/message/message.esm.min.js

@@ -1 +1 @@
-import e from"primevue/ripple";import{resolveDirective as s,openBlock as t,createBlock as i,Transition as n,withCtx as a,withDirectives as l,createVNode as o,renderSlot as p,createCommentVNode as r,vShow as c}from"vue";var m={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||setTimeout((()=>{this.visible=!1}),this.life)},methods:{close(e){this.visible=!1,this.$emit("close",e)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconClass(){return["p-message-icon pi",this.icon?this.icon:{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]}},directives:{ripple:e}};const d={class:"p-message-wrapper"},g={class:"p-message-text"},u=o("i",{class:"p-message-close-icon pi pi-times"},null,-1);!function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-message-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    -webkit-transition: opacity .3s;\n    transition: opacity .3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    -webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .15s;\n    transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),m.render=function(e,m,f,y,h,v){const b=s("ripple");return t(),i(n,{name:"p-message",appear:""},{default:a((()=>[l(o("div",{class:v.containerClass,role:"alert"},[o("div",d,[o("span",{class:v.iconClass},null,2),o("div",g,[p(e.$slots,"default")]),f.closable?l((t(),i("button",{key:0,class:"p-message-close p-link",onClick:m[1]||(m[1]=e=>v.close(e)),type:"button"},[u],512)),[[b]]):r("",!0)])],2),[[c,h.visible]])])),_:3})};export default m;
+import e from"primevue/ripple";import{resolveDirective as s,openBlock as t,createBlock as i,Transition as n,withCtx as a,withDirectives as l,createVNode as o,renderSlot as p,createCommentVNode as r,vShow as c}from"vue";var m={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||setTimeout((()=>{this.visible=!1}),this.life)},methods:{close(e){this.visible=!1,this.$emit("close",e)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconClass(){return["p-message-icon pi",this.icon?this.icon:{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]}},directives:{ripple:e}};const d={class:"p-message-wrapper"},g={class:"p-message-text"},u=o("i",{class:"p-message-close-icon pi pi-times"},null,-1);!function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-message-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    -webkit-transition: opacity .3s;\n    transition: opacity .3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    -webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .15s;\n    transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),m.render=function(e,m,f,y,h,v){const b=s("ripple");return t(),i(n,{name:"p-message",appear:""},{default:a((()=>[l(o("div",{class:v.containerClass,role:"alert"},[o("div",d,[o("span",{class:v.iconClass},null,2),o("div",g,[p(e.$slots,"default")]),f.closable?l((t(),i("button",{key:0,class:"p-message-close p-link",onClick:m[1]||(m[1]=e=>v.close(e)),type:"button"},[u],512)),[[b]]):r("",!0)])],2),[[c,h.visible]])])),_:3})};export{m as default};

package/message/message.js

@@ -64,7 +64,7 @@ this.primevue.message = (function (Ripple, vue) {
             }
         },
         directives: {
-            'ripple': Ripple__default['default']
+            'ripple': Ripple__default["default"]
         }
     };
 
@@ -144,4 +144,4 @@ this.primevue.message = (function (Ripple, vue) {
 
     return script;
 
-}(primevue.ripple, Vue));
+})(primevue.ripple, Vue);

package/multiselect/MultiSelect.d.ts

@@ -1,111 +1,391 @@
 import { VNode } from 'vue';
-import VirtualScrollerProps from '../virtualscroller';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { VirtualScrollerProps, VirtualScrollerItemOptions } from '../virtualscroller';
 
 type MultiSelectOptionLabelType = string | ((data: any) => string) | undefined;
+
 type MultiSelectOptionValueType = string | ((data: any) => any) | undefined;
+
 type MultiSelectOptionDisabledType = string | ((data: any) => boolean) | undefined;
+
 type MultiSelectOptionChildrenType = string | ((data: any) => any[]) | undefined;
 
-interface MultiSelectProps {
-    modelValue?: any;
-    options?: any[];
-    optionLabel?: MultiSelectOptionLabelType;
-    optionValue?: MultiSelectOptionValueType;
-    optionDisabled?: MultiSelectOptionDisabledType;
-    optionGroupLabel?: MultiSelectOptionLabelType;
-    optionGroupChildren?: MultiSelectOptionChildrenType;
-    scrollHeight?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    tabindex?: string;
-    inputId?: string;
-    dataKey?: string;
-    filter?: boolean;
-    filterPlaceholder?: string;
-    filterLocale?: string;
-    filterMatchMode?: string;
-    filterFields?: string[];
-    ariaLabelledBy?: string;
-    appendTo?: string;
-    emptyFilterMessage?: string;
-    emptyMessage?: string;
-    display?: string;
-    panelClass?: string;
-    selectedItemsLabel?: string;
-    maxSelectedLabels?: number;
-    selectionLimit?: number;
-    showToggleAll?: boolean;
-    loading?: boolean;
-    loadingIcon?: string;
-    virtualScrollerOptions?: VirtualScrollerProps;
-    selectAll?: boolean;
-}
+type MultiSelectFilterMatchModeType = 'contains' | 'startsWith' | 'endsWith' | undefined;
 
-interface MultiSelectValueSlotInterface {
-    value: any;
-    placeholder: string;
-}
+type MultiSelectAppendToType = 'body' | 'self' | string | undefined;
+
+type MultiSelectDisplayType = 'comma' | 'chip' | undefined;
 
-interface MultiSelectHeaderSlotInterface {
+export interface MultiSelectChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Selected option value
+     */
     value: any;
-    options: any[];
 }
 
-interface MultiSelectFooterSlotInterface {
-    value: any;
-    options: any[];
+export interface MultiSelectAllChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Whether all data is selected.
+     */
+    checked: boolean;
 }
 
-interface MultiSelectOptionSlotInterface {
-    option: any;
-    index: number;
+export interface MultiSelectFilterEvent {
+    /**
+     * Original event
+     */
+    originalEvent: Event;
+    /**
+     * Filter value
+     */
+    value: string;
 }
 
-interface MultiSelectOptionGroupSlotInterface {
-    option: any;
-    index: number;
+export interface MultiSelectProps {
+    /**
+     * Value of the component.
+     */
+    modelValue?: any;
+    /**
+     * An array of selectitems to display as the available options.
+     */
+    options?: any[] | undefined;
+    /**
+     * Property name or getter function to use as the label of an option.
+     */
+    optionLabel?: MultiSelectOptionLabelType;
+    /**
+     * Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
+     */
+    optionValue?: MultiSelectOptionValueType;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     */
+    optionDisabled?: MultiSelectOptionDisabledType;
+    /**
+     * Property name or getter function to use as the label of an option group.
+     */
+    optionGroupLabel?: MultiSelectOptionLabelType;
+    /**
+     * Property name or getter function that refers to the children options of option group.
+     */
+    optionGroupChildren?: MultiSelectOptionChildrenType;
+    /**
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     * Default value is '200px'.
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * Label to display when there are no selections.
+     */
+    placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: string | number | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * A property to uniquely identify an option.
+     */
+    dataKey?: string | undefined;
+    /**
+     * When specified, displays a filter input at header.
+     */
+    filter?: boolean | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Defines the filtering algorithm to use when searching the options.
+     * @see MultiSelectFilterMatchModeType
+     * Default value is 'contains'.
+     */
+    filterMatchMode?: MultiSelectFilterMatchModeType;
+    /**
+     * Fields used when filtering the options, defaults to optionLabel.
+     */
+    filterFields?: string[] | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
+     * @see MultiSelectAppendToType
+     * Default value is 'body'.
+     */
+    appendTo?: MultiSelectAppendToType;
+    /**
+     * Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No results found'.
+     */
+    emptyFilterMessage?: string | undefined;
+    /**
+     * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No results found'.
+     */
+    emptyMessage?: string | undefined;
+    /**
+     * Defines how the selected items are displayed.
+     * @see MultiSelectDisplayType
+     * Default value is 'comma'.
+     */
+    display?: MultiSelectDisplayType;
+    /**
+     * Style class of the overlay panel.
+     */
+    panelClass?: any;
+    /**
+     * Label to display after exceeding max selected labels.
+     * Default value is '{0} items selected'.
+     */
+    selectedItemsLabel?: string | undefined;
+    /**
+     * Decides how many selected item labels to show at most.
+     */
+    maxSelectedLabels?: number | undefined;
+    /**
+     * Maximum number of selectable items.
+     */
+    selectionLimit?: number | undefined;
+    /**
+     * Whether to show the header checkbox to toggle the selection of all items at once.
+     * Default value is true.
+     */
+    showToggleAll?: boolean | undefined;
+    /**
+     * Whether the multiselect is in loading state.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Icon to display in loading state.
+     * Default value is 'pi pi-spinner pi-spin'.
+     */
+    loadingIcon?: string | undefined;
+    /**
+     * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
+     * @see VirtualScroller.VirtualScrollerProps
+     */
+    virtualScrollerOptions?: VirtualScrollerProps;
+    /**
+     * Whether all data is selected.
+     */
+    selectAll?: boolean | undefined;
 }
 
-interface MultiSelectChipSlotContent {
-    value: any;
+export interface MultiSelectSlots {
+    /**
+     * Custom value template.
+     * @param {Object} scope - value slot's params.
+     */
+    value: (scope: {
+        /**
+         * Value of the component
+         */
+        value: any;
+        /**
+         * Placeholder prop value
+         */
+        placeholder: string;
+    }) => VNode[];
+    /**
+     * Custom header template.
+     * @param {Object} scope - header slot's params.
+     */
+    header: (scope: {
+        /**
+         * Value of the component
+         */
+        value: any;
+        /**
+         * Displayed options
+         */
+        options: any[];
+    }) => VNode[];
+     /**
+     * Custom footer template.
+     * @param {Object} scope - footer slot's params.
+     */
+    footer: (scope: {
+        /**
+         * Value of the component
+         */
+        value: any;
+        /**
+         * Displayed options
+         */
+        options: any[];
+    }) => VNode[];
+    /**
+     * Custom emptyfilter template.
+     */
+    emptyfilter: () => VNode[];
+     /**
+     * Custom empty template.
+     */
+    empty: () => VNode[];
+    /**
+     * Custom option template.
+     * @param {Object} scope - option slot's params.
+     */
+    option: (scope: {
+        /**
+         * Option instance
+         */
+        option: any;
+        /**
+         * Index of the option
+         */
+        index: number;
+    }) => VNode[];
+    /**
+     * Custom option group template.
+     * @param {Object} scope - option group slot's params.
+     */
+    optiongroup: (scope: {
+        /**
+         * Option instance
+         */
+        option: any;
+        /**
+         * Index of the option
+         */
+        index: number;
+    }) => VNode[];
+     /**
+     * Custom chip template.
+     * @param {Object} scope - chip slot's params.
+     */
+    chip: (scope: {
+        /**
+         * A value in the selection
+         */
+        value: any;
+    }) => VNode[];
+    /**
+     * Custom content template.
+     * @param {Object} scope - content slot's params.
+     */
+    content: (scope: {
+        /**
+         * An array of objects to display for virtualscroller
+         */
+        items: any;
+        /**
+         * Style class of the component
+         */
+        styleClass: string;
+        /**
+         * Referance of the content
+         * @param {HTMLElement} el - Element of 'ref' property
+         */
+        contentRef(el: any): void;
+        /**
+         * Options of the items
+         * @param {number} index - Rendered index
+         * @return {@link VirtualScroller.VirtualScrollerItemOptions}
+         */
+        getItemOptions(index: number): VirtualScrollerItemOptions;
+    }) => VNode[];
+    /**
+     * Custom loader template.
+     * @param {Object} scope - loader slot's params.
+     */
+    loader: (scope: {
+        /**
+         * Options of the loader items for virtualscroller
+         */
+        options: any[];
+    }) => VNode[];
+    /**
+     * Custom indicator template.
+     */
+    indicator: () => VNode[];
 }
 
-interface MultiSelectContentInterface {
-    items: any;
-    styleClass: string;
-    contentRef: string;
-    getItemOptions: any;
+export declare type MultiSelectEmits = {
+    /**
+     * Emitted when the value changes.
+     * @param {*} value - New value.
+     */
+    'update:modelValue': (value: any) => void;
+    /**
+     * Callback to invoke on value change.
+     * @param {MultiSelectChangeEvent} event - Custom change event.
+     */
+    'change': (event: MultiSelectChangeEvent) => void;
+    /**
+     * Callback to invoke before the overlay is shown.
+     */
+    'before-show': () => void;
+    /**
+     * Callback to invoke before the overlay is hidden.
+     */
+    'before-hide': () => void;
+    /**
+     * Callback to invoke when the overlay is shown.
+     */
+    'show': () => void;
+    /**
+     * Callback to invoke when the overlay is hidden.
+     */
+    'hide': () => void;
+    /**
+     * Callback to invoke on filter input.
+     * @param {MultiSelectFilterEvent} event - Custom filter event.
+     */
+    'filter': (event: MultiSelectFilterEvent) => void;
+    /**
+     * Callback to invoke when all data is selected.
+     * @param {MultiSelectAllChangeEvent} event - Custom select all change event.
+     */
+    'selectall-change': (event: MultiSelectAllChangeEvent) => void;
 }
 
-interface MultiSelectLoaderSlotInterface {
-    options: any[];
+declare class MultiSelect extends ClassComponent<MultiSelectProps, MultiSelectSlots, MultiSelectEmits> {
+    /**
+     * Shows the overlay.
+     */
+    show: () => void;
+    /**
+     * Hides the overlay.
+     */
+    hide: () => void;
 }
 
-declare class MultiSelect {
-    $props: MultiSelectProps;
-    $emit(eventName: 'update:modelValue', value: any): this;
-    $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
-    $emit(eventName: 'before-show'): this;
-    $emit(eventName: 'before-leave'): this;
-    $emit(eventName: 'show'): this;
-    $emit(eventName: 'hide'): this;
-    $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
-    $emit(eventName: 'selectall-change', e: { originalEvent: Event, checked: boolean }): this;
-    show(): void;
-    hide(): void;
-    $slots: {
-        value: MultiSelectValueSlotInterface;
-        header: MultiSelectHeaderSlotInterface;
-        footer: MultiSelectFooterSlotInterface;
-        emptyfilter: VNode[];
-        empty: VNode[];
-        option: MultiSelectOptionSlotInterface;
-        optiongroup: MultiSelectOptionGroupSlotInterface;
-        chip: MultiSelectChipSlotContent;
-        content: MultiSelectContentInterface;
-        loader: MultiSelectLoaderSlotInterface;
-        indicator: VNode[];
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        MultiSelect: GlobalComponentConstructor<MultiSelect>
     }
 }
 
+/**
+ *
+ * MultiSelect is used to multiple values from a list of options.
+ *
+ * Demos:
+ *
+ * - [MultiSelect](https://www.primefaces.org/primevue/showcase/#/multiselect)
+ *
+ */
 export default MultiSelect;

package/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>
@@ -28,7 +28,7 @@
             </slot>
         </div>
         <Teleport :to="appendTarget" :disabled="appendDisabled">
-            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div class="p-multiselect-header" v-if="(showToggleAll && selectionLimit == null) || filter">
@@ -41,7 +41,7 @@
                             </div>
                         </div>
                         <div v-if="filter" class="p-multiselect-filter-container">
-                            <input type="text" ref="filterInput" v-model="filterValue" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder" @input="onFilterChange">
+                            <input type="text" ref="filterInput" v-model="filterValue" autoComplete="on" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder" @input="onFilterChange">
                             <span class="p-multiselect-filter-icon pi pi-search"></span>
                         </div>
                         <button class="p-multiselect-close p-link" @click="onCloseClick" type="button" v-ripple>
@@ -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 }">
-                                <ul :ref="contentRef" :class="['p-multiselect-items p-component', styleClass]" role="listbox" aria-multiselectable="true">
+                            <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle}">
+                                <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>
@@ -420,6 +420,17 @@ export default {
         onOverlayEnter(el) {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             this.alignOverlay();
+
+            if (!this.virtualScrollerDisabled) {
+                const selectedIndex = this.getSelectedOptionIndex();
+                if (selectedIndex !== -1) {
+                    setTimeout(() => {
+                        this.virtualScroller && this.virtualScroller.scrollToIndex(selectedIndex)
+                    }, 0);
+                }
+            }
+        },
+        onOverlayAfterEnter() {
             this.bindOutsideClickListener();
             this.bindScrollListener();
             this.bindResizeListener();
@@ -428,13 +439,6 @@ export default {
                 this.$refs.filterInput.focus();
             }
 
-            if (!this.virtualScrollerDisabled) {
-                const selectedIndex = this.getSelectedOptionIndex();
-                if (selectedIndex !== -1) {
-                    this.virtualScroller.scrollToIndex(selectedIndex);
-                }
-            }
-
             this.$emit('show');
         },
         onOverlayLeave() {