primevue 3.16.2 → 3.17.0

package/autocomplete/autocomplete.js

@@ -19,8 +19,9 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 type: Array,
                 default: null
             },
-            field: { // TODO: Deprecated since v3.16.0
-                type: [String,Function],
+            field: {
+                // TODO: Deprecated since v3.16.0
+                type: [String, Function],
                 default: null
             },
             optionLabel: null,
@@ -39,7 +40,8 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 type: String,
                 default: 'blank'
             },
-            autoHighlight: { // TODO: Deprecated since v3.16.0
+            autoHighlight: {
+                // TODO: Deprecated since v3.16.0. Use selectOnFocus property instead.
                 type: Boolean,
                 default: false
             },
@@ -79,13 +81,34 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 type: Boolean,
                 default: false
             },
-            inputId: String,
-            inputStyle: null,
-            inputClass: null,
-            inputProps: null,
-            panelStyle: null,
-            panelClass: null,
-            panelProps: null,
+            inputId: {
+                type: String,
+                default: null
+            },
+            inputStyle: {
+                type: null,
+                default: null
+            },
+            inputClass: {
+                type: String,
+                default: null
+            },
+            inputProps: {
+                type: null,
+                default: null
+            },
+            panelStyle: {
+                type: null,
+                default: null
+            },
+            panelClass: {
+                type: String,
+                default: null
+            },
+            panelProps: {
+                type: null,
+                default: null
+            },
             loadingIcon: {
                 type: String,
                 default: 'pi pi-spinner'
@@ -98,6 +121,10 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 type: Boolean,
                 default: true
             },
+            selectOnFocus: {
+                type: Boolean,
+                default: false
+            },
             searchLocale: {
                 type: String,
                 default: undefined
@@ -137,18 +164,16 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
         overlay: null,
         virtualScroller: null,
         searchTimeout: null,
-        selectOnFocus: false,
         focusOnHover: false,
         dirty: false,
         data() {
             return {
-                id: utils.UniqueComponentId(),
                 focused: false,
                 focusedOptionIndex: -1,
                 focusedMultipleOptionIndex: -1,
                 overlayVisible: false,
                 searching: false
-            }
+            };
         },
         watch: {
             suggestions() {
@@ -162,8 +187,6 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             }
         },
         mounted() {
-            this.id = this.$attrs.id || this.id;
-
             this.autoUpdateModel();
         },
         updated() {
@@ -187,7 +210,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
         },
         methods: {
             getOptionIndex(index, fn) {
-                return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+                return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
             },
             getOptionLabel(option) {
                 return this.field || this.optionLabel ? utils.ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option;
@@ -211,15 +234,15 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 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.dirty = true;
                 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 = () => {
@@ -228,10 +251,12 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                     this.overlayVisible = false;
                     this.focusedOptionIndex = -1;
 
-                    isFocus && this.$refs.focusInput.focus();
+                    isFocus && utils.DomHandler.focus(this.$refs.focusInput);
                 };
 
-                setTimeout(() => { _hide(); }, 0); // For ScreenReaders
+                setTimeout(() => {
+                    _hide();
+                }, 0); // For ScreenReaders
             },
             onFocus(event) {
                 if (!this.dirty && this.completeOnFocus) {
@@ -307,6 +332,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 }
 
                 let query = event.target.value;
+
                 if (!this.multiple) {
                     this.updateModel(event, query);
                 }
@@ -314,16 +340,14 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 if (query.length === 0) {
                     this.hide();
                     this.$emit('clear');
-                }
-                else {
+                } else {
                     if (query.length >= this.minLength) {
                         this.focusedOptionIndex = -1;
 
                         this.searchTimeout = setTimeout(() => {
                             this.search(event, query, 'input');
                         }, this.delay);
-                    }
-                    else {
+                    } else {
                         this.hide();
                     }
                 }
@@ -332,8 +356,8 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 if (this.forceSelection) {
                     let valid = false;
 
-                    if (this.visibleOptions)  {
-                        const matchedValue = this.visibleOptions.find(option => this.isOptionMatched(option, event.target.value));
+                    if (this.visibleOptions) {
+                        const matchedValue = this.visibleOptions.find((option) => this.isOptionMatched(option, event.target.value));
 
                         if (matchedValue !== undefined) {
                             valid = true;
@@ -376,7 +400,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 }
 
                 if (!this.overlay || !this.overlay.contains(event.target)) {
-                    this.$refs.focusInput.focus();
+                    utils.DomHandler.focus(this.$refs.focusInput);
                 }
             },
             onDropdownClick(event) {
@@ -384,20 +408,17 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
 
                 if (this.overlayVisible) {
                     this.hide(true);
-                }
-                else {
-                    this.$refs.focusInput.focus();
+                } else {
+                    utils.DomHandler.focus(this.$refs.focusInput);
                     query = this.$refs.focusInput.value;
 
-                    if (this.dropdownMode === 'blank')
-                        this.search(event, '', 'dropdown');
-                    else if (this.dropdownMode === 'current')
-                        this.search(event, query, 'dropdown');
+                    if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown');
+                    else if (this.dropdownMode === 'current') this.search(event, query, 'dropdown');
                 }
 
                 this.$emit('dropdown-click', { originalEvent: event, query });
             },
-            onOptionSelect(event, option) {
+            onOptionSelect(event, option, isHide = true) {
                 const value = this.getOptionValue(option);
 
                 if (this.multiple) {
@@ -406,14 +427,13 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                     if (!this.isSelected(option)) {
                         this.updateModel(event, [...(this.modelValue || []), value]);
                     }
-                }
-                else {
+                } else {
                     this.updateModel(event, value);
                 }
 
                 this.$emit('item-select', { originalEvent: event, value: option });
 
-                this.hide(true);
+                isHide && this.hide(true);
             },
             onOptionMouseMove(event, index) {
                 if (this.focusOnHover) {
@@ -456,8 +476,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
 
                     this.overlayVisible && this.hide();
                     event.preventDefault();
-                }
-                else {
+                } else {
                     const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
 
                     this.changeFocusedOptionIndex(event, optionIndex);
@@ -467,14 +486,14 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             },
             onArrowLeftKey(event) {
                 const target = event.currentTarget;
+
                 this.focusedOptionIndex = -1;
 
                 if (this.multiple) {
                     if (utils.ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
-                        this.$refs.multiContainer.focus();
+                        utils.DomHandler.focus(this.$refs.multiContainer);
                         this.focusedMultipleOptionIndex = this.modelValue.length;
-                    }
-                    else {
+                    } else {
                         event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
                     }
                 }
@@ -493,6 +512,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             onEndKey(event) {
                 const target = event.currentTarget;
                 const len = target.value.length;
+
                 target.setSelectionRange(len, len);
                 this.focusedOptionIndex = -1;
 
@@ -509,8 +529,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             onEnterKey(event) {
                 if (!this.overlayVisible) {
                     this.onArrowDownKey(event);
-                }
-                else {
+                } else {
                     if (this.focusedOptionIndex !== -1) {
                         this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                     }
@@ -550,9 +569,9 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             onArrowRightKeyOnMultiple() {
                 this.focusedMultipleOptionIndex++;
 
-                if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
+                if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
                     this.focusedMultipleOptionIndex = -1;
-                    this.$refs.focusInput.focus();
+                    utils.DomHandler.focus(this.$refs.focusInput);
                 }
             },
             onBackspaceKeyOnMultiple(event) {
@@ -584,10 +603,10 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             },
             alignOverlay() {
                 let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput;
+
                 if (this.appendTo === 'self') {
                     utils.DomHandler.relativePosition(this.overlay, target);
-                }
-                else {
+                } else {
                     this.overlay.style.minWidth = utils.DomHandler.getOuterWidth(target) + 'px';
                     utils.DomHandler.absolutePosition(this.overlay, target);
                 }
@@ -599,6 +618,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                             this.hide();
                         }
                     };
+
                     document.addEventListener('click', this.outsideClickListener);
                 }
             },
@@ -631,6 +651,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                             this.hide();
                         }
                     };
+
                     window.addEventListener('resize', this.resizeListener);
                 }
             },
@@ -644,13 +665,11 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
             },
             isInputClicked(event) {
-                if (this.multiple)
-                    return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
-                else
-                    return event.target === this.$refs.focusInput;
+                if (this.multiple) return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
+                else return event.target === this.$refs.focusInput;
             },
             isDropdownClicked(event) {
-                return this.$refs.dropdownButton ? (event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.$el.contains(event.target)) : false;
+                return this.$refs.dropdownButton ? event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.$el.contains(event.target) : false;
             },
             isOptionMatched(option, value) {
                 return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
@@ -665,28 +684,32 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 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;
             },
             search(event, query, source) {
@@ -705,12 +728,12 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             },
             removeOption(event, index) {
                 const removedOption = this.modelValue[index];
-                const value = this.modelValue.filter((_, i) => i !== index).map(option => this.getOptionValue(option));
+                const value = this.modelValue.filter((_, i) => i !== index).map((option) => this.getOptionValue(option));
 
                 this.updateModel(event, value);
                 this.$emit('item-unselect', { originalEvent: event, value: removedOption });
                 this.dirty = true;
-                this.$refs.focusInput.focus();
+                utils.DomHandler.focus(this.$refs.focusInput);
             },
             changeFocusedOptionIndex(event, index) {
                 if (this.focusedOptionIndex !== index) {
@@ -718,17 +741,17 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                     this.scrollInView();
 
                     if (this.selectOnFocus || this.autoHighlight) {
-                        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);
@@ -737,8 +760,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             autoUpdateModel() {
                 if ((this.selectOnFocus || this.autoHighlight) && this.autoOptionFocus && !this.hasSelectedOption) {
                     this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
-                    const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
-                    this.updateModel(null, this.multiple ? [value] : value);
+                    this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
                 }
             },
             updateModel(event, value) {
@@ -750,7 +772,8 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                     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;
                 }, []);
@@ -768,47 +791,57 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
         },
         computed: {
             containerClass() {
-                return ['p-autocomplete p-component p-inputwrapper', {
-                    'p-disabled': this.disabled,
-                    'p-focus': this.focused,
-                    'p-autocomplete-dd': this.dropdown,
-                    'p-autocomplete-multiple': this.multiple,
-                    'p-inputwrapper-filled': this.modelValue || utils.ObjectUtils.isNotEmpty(this.inputValue),
-                    'p-inputwrapper-focus': this.focused,
-                    'p-overlay-open': this.overlayVisible
-                }];
+                return [
+                    'p-autocomplete p-component p-inputwrapper',
+                    {
+                        'p-disabled': this.disabled,
+                        'p-focus': this.focused,
+                        'p-autocomplete-dd': this.dropdown,
+                        'p-autocomplete-multiple': this.multiple,
+                        'p-inputwrapper-filled': this.modelValue || utils.ObjectUtils.isNotEmpty(this.inputValue),
+                        'p-inputwrapper-focus': this.focused,
+                        'p-overlay-open': this.overlayVisible
+                    }
+                ];
             },
             inputStyleClass() {
-                return ['p-autocomplete-input p-inputtext p-component', this.inputClass, {
-                    'p-autocomplete-dd-input': this.dropdown
-                }];
+                return [
+                    'p-autocomplete-input p-inputtext p-component',
+                    this.inputClass,
+                    {
+                        'p-autocomplete-dd-input': this.dropdown
+                    }
+                ];
             },
             multiContainerClass() {
                 return ['p-autocomplete-multiple-container p-component p-inputtext'];
             },
             panelStyleClass() {
-                return ['p-autocomplete-panel p-component', this.panelClass, {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }];
+                return [
+                    'p-autocomplete-panel p-component',
+                    this.panelClass,
+                    {
+                        'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                        'p-ripple-disabled': this.$primevue.config.ripple === false
+                    }
+                ];
             },
             loadingIconClass() {
                 return ['p-autocomplete-loader pi-spin', this.loadingIcon];
             },
             visibleOptions() {
-                return this.optionGroupLabel ? this.flatOptions(this.suggestions) : (this.suggestions || []);
+                return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
             },
             inputValue() {
                 if (this.modelValue) {
                     if (typeof this.modelValue === 'object') {
                         const label = this.getOptionLabel(this.modelValue);
+
                         return label != null ? label : this.modelValue;
-                    }
-                    else {
+                    } else {
                         return this.modelValue;
                     }
-                }
-                else {
+                } else {
                     return '';
                 }
             },
@@ -836,6 +869,9 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
             selectedMessageText() {
                 return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
             },
+            id() {
+                return this.$attrs.id || utils.UniqueComponentId();
+            },
             focusedOptionId() {
                 return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
             },
@@ -843,19 +879,19 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                 return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
             },
             ariaSetSize() {
-                return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
+                return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
             },
             virtualScrollerDisabled() {
                 return !this.virtualScrollerOptions;
             }
         },
         components: {
-            'Button': Button__default["default"],
-            'VirtualScroller': VirtualScroller__default["default"],
-            'Portal': Portal__default["default"]
+            Button: Button__default["default"],
+            VirtualScroller: VirtualScroller__default["default"],
+            Portal: Portal__default["default"]
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            ripple: Ripple__default["default"]
         }
     };
 
@@ -913,7 +949,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
               "aria-haspopup": "listbox",
               "aria-autocomplete": "list",
               "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))),
@@ -938,8 +974,8 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.modelValue, (option, i) => {
                 return (vue.openBlock(), vue.createElementBlock("li", {
                   key: i,
-                  id: $data.id + '_multiple_option_' + i,
-                  class: vue.normalizeClass(['p-autocomplete-token', {'p-focus': $data.focusedMultipleOptionIndex === i}]),
+                  id: $options.id + '_multiple_option_' + i,
+                  class: vue.normalizeClass(['p-autocomplete-token', { 'p-focus': $data.focusedMultipleOptionIndex === i }]),
                   role: "option",
                   "aria-label": $options.getOptionLabel(option),
                   "aria-selected": true,
@@ -973,7 +1009,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                   "aria-haspopup": "listbox",
                   "aria-autocomplete": "list",
                   "aria-expanded": $data.overlayVisible,
-                  "aria-controls": $data.id + '_list',
+                  "aria-controls": $options.id + '_list',
                   "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
                   onFocus: _cache[5] || (_cache[5] = (...args) => ($options.onFocus && $options.onFocus(...args))),
                   onBlur: _cache[6] || (_cache[6] = (...args) => ($options.onBlur && $options.onBlur(...args))),
@@ -1020,7 +1056,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                       key: 0,
                       ref: $options.overlayRef,
                       class: $options.panelStyleClass,
-                      style: {...$props.panelStyle, 'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : ''},
+                      style: { ...$props.panelStyle, 'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : '' },
                       onClick: _cache[13] || (_cache[13] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
                       onKeydown: _cache[14] || (_cache[14] = (...args) => ($options.onOverlayKeyDown && $options.onOverlayKeyDown(...args)))
                     }, $props.panelProps), [
@@ -1029,7 +1065,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                         suggestions: $options.visibleOptions
                       }),
                       vue.createVNode(_component_VirtualScroller, vue.mergeProps({ ref: $options.virtualScrollerRef }, $props.virtualScrollerOptions, {
-                        style: {'height': $props.scrollHeight},
+                        style: { height: $props.scrollHeight },
                         items: $options.visibleOptions,
                         tabindex: -1,
                         disabled: $options.virtualScrollerDisabled
@@ -1037,7 +1073,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                         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-autocomplete-items', styleClass]),
                             style: vue.normalizeStyle(contentStyle),
                             role: "listbox"
@@ -1049,8 +1085,8 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                                 ($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-autocomplete-item-group",
                                       role: "option"
                                     }, [
@@ -1064,9 +1100,9 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                                     ], 12, _hoisted_10))
                                   : 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-autocomplete-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-autocomplete-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),
@@ -1106,7 +1142,8 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
                               name: "loader",
                               fn: vue.withCtx(({ options }) => [
                                 vue.renderSlot(_ctx.$slots, "loader", { options: options })
-                              ])
+                              ]),
+                              key: "0"
                             }
                           : undefined
                       ]), 1040, ["style", "items", "disabled"]),
@@ -1152,7 +1189,7 @@ this.primevue.autocomplete = (function (utils, OverlayEventBus, Button, Ripple,
       }
     }
 
-    var css_248z = "\n.p-autocomplete {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-autocomplete-loader {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n.p-autocomplete-dd .p-autocomplete-input {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n}\n.p-autocomplete-dd .p-autocomplete-input,\n.p-autocomplete-dd .p-autocomplete-multiple-container {\n     border-top-right-radius: 0;\n     border-bottom-right-radius: 0;\n}\n.p-autocomplete-dd .p-autocomplete-dropdown {\n     border-top-left-radius: 0;\n     border-bottom-left-radius: 0px;\n}\n.p-autocomplete .p-autocomplete-panel {\n    min-width: 100%;\n}\n.p-autocomplete-panel {\n    position: absolute;\n    overflow: auto;\n    top: 0;\n    left: 0;\n}\n.p-autocomplete-items {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n.p-autocomplete-item {\n    cursor: pointer;\n    white-space: nowrap;\n    position: relative;\n    overflow: hidden;\n}\n.p-autocomplete-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\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    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-autocomplete-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-autocomplete-token-icon {\n    cursor: pointer;\n}\n.p-autocomplete-input-token {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.p-autocomplete-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-autocomplete {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-fluid .p-autocomplete-dd .p-autocomplete-input {\n    width: 1%;\n}\n";
+    var css_248z = "\n.p-autocomplete {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-autocomplete-loader {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n.p-autocomplete-dd .p-autocomplete-input {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n}\n.p-autocomplete-dd .p-autocomplete-input,\n.p-autocomplete-dd .p-autocomplete-multiple-container {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n.p-autocomplete-dd .p-autocomplete-dropdown {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0px;\n}\n.p-autocomplete .p-autocomplete-panel {\n    min-width: 100%;\n}\n.p-autocomplete-panel {\n    position: absolute;\n    overflow: auto;\n    top: 0;\n    left: 0;\n}\n.p-autocomplete-items {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n.p-autocomplete-item {\n    cursor: pointer;\n    white-space: nowrap;\n    position: relative;\n    overflow: hidden;\n}\n.p-autocomplete-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\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    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-autocomplete-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-autocomplete-token-icon {\n    cursor: pointer;\n}\n.p-autocomplete-input-token {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.p-autocomplete-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-autocomplete {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-fluid .p-autocomplete-dd .p-autocomplete-input {\n    width: 1%;\n}\n";
     styleInject(css_248z);
 
     script.render = render;