primevue 3.16.2 → 3.17.0

package/dropdown/dropdown.js

@@ -20,11 +20,11 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             optionDisabled: null,
             optionGroupLabel: null,
             optionGroupChildren: null,
-    		scrollHeight: {
-    			type: String,
-    			default: '200px'
-    		},
-    		filter: Boolean,
+            scrollHeight: {
+                type: String,
+                default: '200px'
+            },
+            filter: Boolean,
             filterPlaceholder: String,
             filterLocale: String,
             filterMatchMode: {
@@ -35,20 +35,56 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 type: Array,
                 default: null
             },
-    		editable: Boolean,
-    		placeholder: String,
-    		disabled: Boolean,
+            editable: Boolean,
+            placeholder: {
+                type: String,
+                default: null
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
             dataKey: null,
-            showClear: Boolean,
-            inputId: String,
-            inputStyle: null,
-            inputClass: null,
-            inputProps: null,
-            panelStyle: null,
-            panelClass: null,
-            panelProps: null,
-            filterInputProps: null,
-            clearIconProps: null,
+            showClear: {
+                type: Boolean,
+                default: false
+            },
+            inputId: {
+                type: String,
+                default: null
+            },
+            inputClass: {
+                type: String,
+                default: null
+            },
+            inputStyle: {
+                type: null,
+                default: null
+            },
+            inputProps: {
+                type: null,
+                default: null
+            },
+            panelClass: {
+                type: String,
+                default: null
+            },
+            panelStyle: {
+                type: null,
+                default: null
+            },
+            panelProps: {
+                type: null,
+                default: null
+            },
+            filterInputProps: {
+                type: null,
+                default: null
+            },
+            clearIconProps: {
+                type: null,
+                default: null
+            },
             appendTo: {
                 type: String,
                 default: 'body'
@@ -61,6 +97,10 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 type: String,
                 default: 'pi pi-spinner pi-spin'
             },
+            resetFilterOnHide: {
+                type: Boolean,
+                default: false
+            },
             virtualScrollerOptions: {
                 type: Object,
                 default: null
@@ -69,6 +109,14 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 type: Boolean,
                 default: true
             },
+            autoFilterFocus: {
+                type: Boolean,
+                default: false
+            },
+            selectOnFocus: {
+                type: Boolean,
+                default: false
+            },
             filterMessage: {
                 type: String,
                 default: null
@@ -111,16 +159,14 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
         searchTimeout: null,
         searchValue: null,
         isModelValueChanged: false,
-        selectOnFocus: false,
         focusOnHover: false,
         data() {
             return {
-                id: utils.UniqueComponentId(),
                 focused: false,
                 focusedOptionIndex: -1,
                 filterValue: null,
                 overlayVisible: false
-            }
+            };
         },
         watch: {
             modelValue() {
@@ -131,8 +177,6 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             }
         },
         mounted() {
-            this.id = this.$attrs.id || this.id;
-
             this.autoUpdateModel();
         },
         updated() {
@@ -158,7 +202,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
         },
         methods: {
             getOptionIndex(index, fn) {
-                return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+                return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
             },
             getOptionLabel(option) {
                 return this.optionLabel ? utils.ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
@@ -182,14 +226,14 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 return utils.ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
             },
             getAriaPosInset(index) {
-                return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
+                return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
             },
             show(isFocus) {
                 this.$emit('before-show');
                 this.overlayVisible = true;
-                this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
+                this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
 
-                isFocus && this.$refs.focusInput.focus();
+                isFocus && utils.DomHandler.focus(this.$refs.focusInput);
             },
             hide(isFocus) {
                 const _hide = () => {
@@ -198,10 +242,13 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                     this.focusedOptionIndex = -1;
                     this.searchValue = '';
 
-                    isFocus && this.$refs.focusInput.focus();
+                    this.resetFilterOnHide && (this.filterValue = null);
+                    isFocus && utils.DomHandler.focus(this.$refs.focusInput);
                 };
 
-                setTimeout(() => { _hide(); }, 0); // For ScreenReaders
+                setTimeout(() => {
+                    _hide();
+                }, 0); // For ScreenReaders
             },
             onFocus(event) {
                 this.focused = true;
@@ -216,6 +263,8 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 this.$emit('blur', event);
             },
             onKeyDown(event) {
+                const metaKey = event.metaKey || event.ctrlKey;
+
                 switch (event.code) {
                     case 'ArrowDown':
                         this.onArrowDownKey(event);
@@ -272,7 +321,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                         break;
 
                     default:
-                        if (utils.ObjectUtils.isPrintableCharacter(event.key)) {
+                        if (!metaKey && utils.ObjectUtils.isPrintableCharacter(event.key)) {
                             !this.overlayVisible && this.show();
                             !this.editable && this.searchOptions(event, event.key);
                         }
@@ -285,6 +334,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
 
                 this.searchValue = '';
                 const matched = this.searchOptions(event, value);
+
                 !matched && (this.focusedOptionIndex = -1);
 
                 this.$emit('update:modelValue', value);
@@ -296,8 +346,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
 
                 if (utils.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
                     return;
-                }
-                else if (!this.overlay || !this.overlay.contains(event.target)) {
+                } else if (!this.overlay || !this.overlay.contains(event.target)) {
                     this.overlayVisible ? this.hide(true) : this.show(true);
                 }
             },
@@ -309,20 +358,20 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
 
                 if (relatedTarget === this.$refs.focusInput) {
                     const firstFocusableEl = utils.DomHandler.getFirstFocusableElement(this.overlay, ':not(.p-hidden-focusable)');
-                    firstFocusableEl && firstFocusableEl.focus();
-                }
-                else {
-                    this.$refs.focusInput.focus();
+
+                    utils.DomHandler.focus(firstFocusableEl);
+                } else {
+                    utils.DomHandler.focus(this.$refs.focusInput);
                 }
             },
             onLastHiddenFocus() {
-                this.$refs.firstHiddenFocusableElementOnOverlay.focus();
+                utils.DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
             },
-            onOptionSelect(event, option) {
+            onOptionSelect(event, option, isHide = true) {
                 const value = this.getOptionValue(option);
 
                 this.updateModel(event, value);
-                this.hide(true);
+                isHide && this.hide(true);
             },
             onOptionMouseMove(event, index) {
                 if (this.focusOnHover) {
@@ -411,8 +460,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
 
                     this.overlayVisible && this.hide();
                     event.preventDefault();
-                }
-                else {
+                } else {
                     const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
 
                     this.changeFocusedOptionIndex(event, optionIndex);
@@ -428,8 +476,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 if (pressedInInputText) {
                     event.currentTarget.setSelectionRange(0, 0);
                     this.focusedOptionIndex = -1;
-                }
-                else {
+                } else {
                     this.changeFocusedOptionIndex(event, this.findFirstOptionIndex());
 
                     !this.overlayVisible && this.show();
@@ -441,10 +488,10 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 if (pressedInInputText) {
                     const target = event.currentTarget;
                     const len = target.value.length;
+
                     target.setSelectionRange(len, len);
                     this.focusedOptionIndex = -1;
-                }
-                else {
+                } else {
                     this.changeFocusedOptionIndex(event, this.findLastOptionIndex());
 
                     !this.overlayVisible && this.show();
@@ -463,8 +510,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             onEnterKey(event) {
                 if (!this.overlayVisible) {
                     this.onArrowDownKey(event);
-                }
-                else {
+                } else {
                     if (this.focusedOptionIndex !== -1) {
                         this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                     }
@@ -484,11 +530,10 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             onTabKey(event, pressedInInputText = false) {
                 if (!pressedInInputText) {
                     if (this.overlayVisible && this.hasFocusableElements()) {
-                        this.$refs.firstHiddenFocusableElementOnOverlay.focus();
+                        utils.DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
 
                         event.preventDefault();
-                    }
-                    else {
+                    } else {
                         if (this.focusedOptionIndex !== -1) {
                             this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                         }
@@ -506,6 +551,8 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 utils.ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
                 this.alignOverlay();
                 this.scrollInView();
+
+                this.autoFilterFocus && utils.DomHandler.focus(this.$refs.filterInput);
             },
             onOverlayAfterEnter() {
                 this.bindOutsideClickListener();
@@ -528,8 +575,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             alignOverlay() {
                 if (this.appendTo === 'self') {
                     utils.DomHandler.relativePosition(this.overlay, this.$el);
-                }
-                else {
+                } else {
                     this.overlay.style.minWidth = utils.DomHandler.getOuterWidth(this.$el) + 'px';
                     utils.DomHandler.absolutePosition(this.overlay, this.$el);
                 }
@@ -541,6 +587,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                             this.hide();
                         }
                     };
+
                     document.addEventListener('click', this.outsideClickListener);
                 }
             },
@@ -573,6 +620,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                             this.hide();
                         }
                     };
+
                     window.addEventListener('resize', this.resizeListener);
                 }
             },
@@ -598,28 +646,32 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 return utils.ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
             },
             findFirstOptionIndex() {
-                return this.visibleOptions.findIndex(option => this.isValidOption(option));
+                return this.visibleOptions.findIndex((option) => this.isValidOption(option));
             },
             findLastOptionIndex() {
-                return utils.ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidOption(option));
+                return utils.ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
             },
             findNextOptionIndex(index) {
-                const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidOption(option)) : -1;
+                const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
+
                 return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
             },
             findPrevOptionIndex(index) {
-                const matchedOptionIndex = index > 0 ? utils.ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidOption(option)) : -1;
+                const matchedOptionIndex = index > 0 ? utils.ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
+
                 return matchedOptionIndex > -1 ? matchedOptionIndex : index;
             },
             findSelectedOptionIndex() {
-                return this.hasSelectedOption ? this.visibleOptions.findIndex(option => this.isValidSelectedOption(option)) : -1;
+                return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
             },
             findFirstFocusedOptionIndex() {
                 const selectedIndex = this.findSelectedOptionIndex();
+
                 return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
             },
             findLastFocusedOptionIndex() {
                 const selectedIndex = this.findSelectedOptionIndex();
+
                 return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
             },
             searchOptions(event, char) {
@@ -629,11 +681,10 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 let matched = false;
 
                 if (this.focusedOptionIndex !== -1) {
-                    optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex(option => this.isOptionMatched(option));
-                    optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex(option => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
-                }
-                else {
-                    optionIndex = this.visibleOptions.findIndex(option => this.isOptionMatched(option));
+                    optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
+                    optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
+                } else {
+                    optionIndex = this.visibleOptions.findIndex((option) => this.isOptionMatched(option));
                 }
 
                 if (optionIndex !== -1) {
@@ -665,17 +716,17 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                     this.scrollInView();
 
                     if (this.selectOnFocus) {
-                        this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
+                        this.onOptionSelect(event, this.visibleOptions[index], false);
                     }
                 }
             },
             scrollInView(index = -1) {
                 const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
                 const element = utils.DomHandler.findSingle(this.list, `li[id="${id}"]`);
+
                 if (element) {
                     element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
-                }
-                else if (!this.virtualScrollerDisabled) {
+                } else if (!this.virtualScrollerDisabled) {
                     setTimeout(() => {
                         this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
                     }, 0);
@@ -684,8 +735,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             autoUpdateModel() {
                 if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
                     this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
-                    const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
-                    this.updateModel(null, value);
+                    this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
                 }
             },
             updateModel(event, value) {
@@ -697,7 +747,8 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                     result.push({ optionGroup: option, group: true, index });
 
                     const optionGroupChildren = this.getOptionGroupChildren(option);
-                    optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
+
+                    optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
 
                     return result;
                 }, []);
@@ -715,32 +766,43 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
         },
         computed: {
             containerClass() {
-                return ['p-dropdown p-component p-inputwrapper', {
-                    'p-disabled': this.disabled,
-                    'p-dropdown-clearable': this.showClear && !this.disabled,
-                    'p-focus': this.focused,
-                    'p-inputwrapper-filled': this.modelValue,
-                    'p-inputwrapper-focus': this.focused || this.overlayVisible,
-                    'p-overlay-open': this.overlayVisible
-                }];
+                return [
+                    'p-dropdown p-component p-inputwrapper',
+                    {
+                        'p-disabled': this.disabled,
+                        'p-dropdown-clearable': this.showClear && !this.disabled,
+                        'p-focus': this.focused,
+                        'p-inputwrapper-filled': this.modelValue,
+                        'p-inputwrapper-focus': this.focused || this.overlayVisible,
+                        'p-overlay-open': this.overlayVisible
+                    }
+                ];
             },
             inputStyleClass() {
-                return ['p-dropdown-label p-inputtext', this.inputClass, {
-                    'p-placeholder': !this.editable && this.label === this.placeholder,
-                    'p-dropdown-label-empty': !this.editable && !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
-                }];
+                return [
+                    'p-dropdown-label p-inputtext',
+                    this.inputClass,
+                    {
+                        'p-placeholder': !this.editable && this.label === this.placeholder,
+                        'p-dropdown-label-empty': !this.editable && !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
+                    }
+                ];
             },
             panelStyleClass() {
-                return ['p-dropdown-panel p-component', this.panelClass, {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }];
+                return [
+                    'p-dropdown-panel p-component',
+                    this.panelClass,
+                    {
+                        'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                        'p-ripple-disabled': this.$primevue.config.ripple === false
+                    }
+                ];
             },
             dropdownIconClass() {
-                return ['p-dropdown-trigger-icon', (this.loading ? this.loadingIcon : 'pi pi-chevron-down')];
+                return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
             },
             visibleOptions() {
-                const options = this.optionGroupLabel ? this.flatOptions(this.options) : (this.options || []);
+                const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
 
                 return this.filterValue ? api.FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : options;
             },
@@ -749,11 +811,13 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             },
             label() {
                 const selectedOptionIndex = this.findSelectedOptionIndex();
-                return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : (this.placeholder || 'p-emptylabel');
+
+                return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.placeholder || 'p-emptylabel';
             },
             editableInputValue() {
                 const selectedOptionIndex = this.findSelectedOptionIndex();
-                return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : (this.modelValue || '');
+
+                return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.modelValue || '';
             },
             equalityKey() {
                 return this.optionValue ? null : this.dataKey;
@@ -782,22 +846,25 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             selectedMessageText() {
                 return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
             },
+            id() {
+                return this.$attrs.id || utils.UniqueComponentId();
+            },
             focusedOptionId() {
                 return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
             },
             ariaSetSize() {
-                return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
+                return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
             },
             virtualScrollerDisabled() {
                 return !this.virtualScrollerOptions;
             }
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            ripple: Ripple__default["default"]
         },
         components: {
-            'VirtualScroller': VirtualScroller__default["default"],
-            'Portal': Portal__default["default"]
+            VirtualScroller: VirtualScroller__default["default"],
+            Portal: Portal__default["default"]
         }
     };
 
@@ -849,7 +916,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
 
       return (vue.openBlock(), vue.createElementBlock("div", {
         ref: "container",
-        id: $data.id,
+        id: $options.id,
         class: vue.normalizeClass($options.containerClass),
         onClick: _cache[16] || (_cache[16] = (...args) => ($options.onContainerClick && $options.onContainerClick(...args)))
       }, [
@@ -871,7 +938,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
               "aria-labelledby": _ctx.ariaLabelledby,
               "aria-haspopup": "listbox",
               "aria-expanded": $data.overlayVisible,
-              "aria-controls": $data.id + '_list',
+              "aria-controls": $options.id + '_list',
               "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
               onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onFocus && $options.onFocus(...args))),
               onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
@@ -890,7 +957,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
               "aria-labelledby": _ctx.ariaLabelledby,
               "aria-haspopup": "listbox",
               "aria-expanded": $data.overlayVisible,
-              "aria-controls": $data.id + '_list',
+              "aria-controls": $options.id + '_list',
               "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
               "aria-disabled": $props.disabled,
               onFocus: _cache[4] || (_cache[4] = (...args) => ($options.onFocus && $options.onFocus(...args))),
@@ -954,15 +1021,15 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                         ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
                             vue.createElementVNode("div", _hoisted_6, [
                               vue.createElementVNode("input", vue.mergeProps({
-                                type: "text",
                                 ref: "filterInput",
+                                type: "text",
                                 value: $data.filterValue,
                                 onVnodeUpdated: _cache[9] || (_cache[9] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
                                 class: "p-dropdown-filter p-inputtext p-component",
                                 placeholder: $props.filterPlaceholder,
                                 role: "searchbox",
                                 autocomplete: "off",
-                                "aria-owns": $data.id + '_list',
+                                "aria-owns": $options.id + '_list',
                                 "aria-activedescendant": $options.focusedOptionId,
                                 onKeydown: _cache[10] || (_cache[10] = (...args) => ($options.onFilterKeyDown && $options.onFilterKeyDown(...args))),
                                 onBlur: _cache[11] || (_cache[11] = (...args) => ($options.onFilterBlur && $options.onFilterBlur(...args))),
@@ -975,18 +1042,18 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                         : vue.createCommentVNode("", true),
                       vue.createElementVNode("div", {
                         class: "p-dropdown-items-wrapper",
-                        style: vue.normalizeStyle({'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : ''})
+                        style: vue.normalizeStyle({ 'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : '' })
                       }, [
                         vue.createVNode(_component_VirtualScroller, vue.mergeProps({ ref: $options.virtualScrollerRef }, $props.virtualScrollerOptions, {
                           items: $options.visibleOptions,
-                          style: {'height': $props.scrollHeight},
+                          style: { height: $props.scrollHeight },
                           tabindex: -1,
                           disabled: $options.virtualScrollerDisabled
                         }), vue.createSlots({
                           content: vue.withCtx(({ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }) => [
                             vue.createElementVNode("ul", {
                               ref: (el) => $options.listRef(el, contentRef),
-                              id: $data.id + '_list',
+                              id: $options.id + '_list',
                               class: vue.normalizeClass(['p-dropdown-items', styleClass]),
                               style: vue.normalizeStyle(contentStyle),
                               role: "listbox"
@@ -998,8 +1065,8 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                                   ($options.isOptionGroup(option))
                                     ? (vue.openBlock(), vue.createElementBlock("li", {
                                         key: 0,
-                                        id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
-                                        style: vue.normalizeStyle({height: itemSize ? itemSize + 'px' : undefined}),
+                                        id: $options.id + '_' + $options.getOptionIndex(i, getItemOptions),
+                                        style: vue.normalizeStyle({ height: itemSize ? itemSize + 'px' : undefined }),
                                         class: "p-dropdown-item-group",
                                         role: "option"
                                       }, [
@@ -1012,9 +1079,9 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                                       ], 12, _hoisted_11))
                                     : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
                                         key: 1,
-                                        id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
-                                        style: vue.normalizeStyle({height: itemSize ? itemSize + 'px' : undefined}),
-                                        class: vue.normalizeClass(['p-dropdown-item', {'p-highlight': $options.isSelected(option), 'p-focus': $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions), 'p-disabled': $options.isOptionDisabled(option)}]),
+                                        id: $options.id + '_' + $options.getOptionIndex(i, getItemOptions),
+                                        style: vue.normalizeStyle({ height: itemSize ? itemSize + 'px' : undefined }),
+                                        class: vue.normalizeClass(['p-dropdown-item', { 'p-highlight': $options.isSelected(option), 'p-focus': $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions), 'p-disabled': $options.isOptionDisabled(option) }]),
                                         role: "option",
                                         "aria-label": $options.getOptionLabel(option),
                                         "aria-selected": $options.isSelected(option),
@@ -1041,7 +1108,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                                       vue.createTextVNode(vue.toDisplayString($options.emptyFilterMessageText), 1)
                                     ])
                                   ]))
-                                : ((!$props.options || ($props.options && $props.options.length === 0)))
+                                : (!$props.options || ($props.options && $props.options.length === 0))
                                   ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_14, [
                                       vue.renderSlot(_ctx.$slots, "empty", {}, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.emptyMessageText), 1)
@@ -1049,7 +1116,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                                     ]))
                                   : vue.createCommentVNode("", true)
                             ], 14, _hoisted_10),
-                            ((!$props.options || ($props.options && $props.options.length === 0)))
+                            (!$props.options || ($props.options && $props.options.length === 0))
                               ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15, vue.toDisplayString($options.emptyMessageText), 1))
                               : vue.createCommentVNode("", true),
                             vue.createElementVNode("span", _hoisted_16, vue.toDisplayString($options.selectedMessageText), 1)
@@ -1061,7 +1128,8 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                                 name: "loader",
                                 fn: vue.withCtx(({ options }) => [
                                   vue.renderSlot(_ctx.$slots, "loader", { options: options })
-                                ])
+                                ]),
+                                key: "0"
                               }
                             : undefined
                         ]), 1040, ["items", "style", "disabled"])
@@ -1116,7 +1184,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
       }
     }
 
-    var css_248z = "\n.p-dropdown {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-dropdown-clear-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n.p-dropdown-trigger {\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    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dropdown-label {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n    text-overflow: ellipsis;\n    cursor: pointer;\n}\n.p-dropdown-label-empty {\n    overflow: hidden;\n    opacity: 0;\n}\ninput.p-dropdown-label  {\n    cursor: default;\n}\n.p-dropdown .p-dropdown-panel {\n    min-width: 100%;\n}\n.p-dropdown-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-dropdown-items-wrapper {\n    overflow: auto;\n}\n.p-dropdown-item {\n    cursor: pointer;\n    font-weight: normal;\n    white-space: nowrap;\n    position: relative;\n    overflow: hidden;\n}\n.p-dropdown-item-group {\n    cursor: auto;\n}\n.p-dropdown-items {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n.p-dropdown-filter {\n    width: 100%;\n}\n.p-dropdown-filter-container {\n    position: relative;\n}\n.p-dropdown-filter-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n.p-fluid .p-dropdown {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-fluid .p-dropdown .p-dropdown-label {\n    width: 1%;\n}\n";
+    var css_248z = "\n.p-dropdown {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-dropdown-clear-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n.p-dropdown-trigger {\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    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dropdown-label {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n    text-overflow: ellipsis;\n    cursor: pointer;\n}\n.p-dropdown-label-empty {\n    overflow: hidden;\n    opacity: 0;\n}\ninput.p-dropdown-label {\n    cursor: default;\n}\n.p-dropdown .p-dropdown-panel {\n    min-width: 100%;\n}\n.p-dropdown-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-dropdown-items-wrapper {\n    overflow: auto;\n}\n.p-dropdown-item {\n    cursor: pointer;\n    font-weight: normal;\n    white-space: nowrap;\n    position: relative;\n    overflow: hidden;\n}\n.p-dropdown-item-group {\n    cursor: auto;\n}\n.p-dropdown-items {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n.p-dropdown-filter {\n    width: 100%;\n}\n.p-dropdown-filter-container {\n    position: relative;\n}\n.p-dropdown-filter-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n.p-fluid .p-dropdown {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-fluid .p-dropdown .p-dropdown-label {\n    width: 1%;\n}\n";
     styleInject(css_248z);
 
     script.render = render;