primevue 3.16.2 → 3.18.0

package/autocomplete/autocomplete.esm.js

@@ -1,9 +1,9 @@
-import { UniqueComponentId, ObjectUtils, ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler } from 'primevue/utils';
-import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
+import OverlayEventBus from 'primevue/overlayeventbus';
+import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
+import { ObjectUtils, ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
-import Portal from 'primevue/portal';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, mergeProps, createCommentVNode, Fragment, renderList, renderSlot, createElementVNode, toDisplayString, createBlock, createVNode, withCtx, Transition, createSlots, normalizeStyle, createTextVNode, withDirectives } from 'vue';
 
 var script = {
@@ -15,8 +15,9 @@ var script = {
             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,
@@ -35,7 +36,8 @@ var script = {
             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
         },
@@ -75,17 +77,46 @@ var script = {
             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
+        },
+        dropdownIcon: {
+            type: String,
+            default: 'pi pi-chevron-down'
+        },
         loadingIcon: {
             type: String,
             default: 'pi pi-spinner'
         },
+        removeTokenIcon: {
+            type: String,
+            default: 'pi pi-times-circle'
+        },
         virtualScrollerOptions: {
             type: Object,
             default: null
@@ -94,6 +125,10 @@ var script = {
             type: Boolean,
             default: true
         },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
         searchLocale: {
             type: String,
             default: undefined
@@ -133,18 +168,16 @@ var script = {
     overlay: null,
     virtualScroller: null,
     searchTimeout: null,
-    selectOnFocus: false,
     focusOnHover: false,
     dirty: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionIndex: -1,
             focusedMultipleOptionIndex: -1,
             overlayVisible: false,
             searching: false
-        }
+        };
     },
     watch: {
         suggestions() {
@@ -158,8 +191,6 @@ var script = {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     updated() {
@@ -183,7 +214,7 @@ var script = {
     },
     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 ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option;
@@ -207,15 +238,15 @@ var script = {
             return 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 && DomHandler.focus(this.$refs.focusInput);
         },
         hide(isFocus) {
             const _hide = () => {
@@ -224,10 +255,12 @@ var script = {
                 this.overlayVisible = false;
                 this.focusedOptionIndex = -1;
 
-                isFocus && this.$refs.focusInput.focus();
+                isFocus && DomHandler.focus(this.$refs.focusInput);
             };
 
-            setTimeout(() => { _hide(); }, 0); // For ScreenReaders
+            setTimeout(() => {
+                _hide();
+            }, 0); // For ScreenReaders
         },
         onFocus(event) {
             if (!this.dirty && this.completeOnFocus) {
@@ -236,7 +269,7 @@ var script = {
 
             this.dirty = true;
             this.focused = true;
-            this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
             this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
             this.$emit('focus', event);
         },
@@ -303,6 +336,7 @@ var script = {
             }
 
             let query = event.target.value;
+
             if (!this.multiple) {
                 this.updateModel(event, query);
             }
@@ -310,16 +344,14 @@ var script = {
             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();
                 }
             }
@@ -328,8 +360,8 @@ var script = {
             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;
@@ -372,7 +404,7 @@ var script = {
             }
 
             if (!this.overlay || !this.overlay.contains(event.target)) {
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
             }
         },
         onDropdownClick(event) {
@@ -380,20 +412,17 @@ var script = {
 
             if (this.overlayVisible) {
                 this.hide(true);
-            }
-            else {
-                this.$refs.focusInput.focus();
+            } else {
+                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) {
@@ -402,14 +431,13 @@ var script = {
                 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) {
@@ -452,8 +480,7 @@ var script = {
 
                 this.overlayVisible && this.hide();
                 event.preventDefault();
-            }
-            else {
+            } else {
                 const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
 
                 this.changeFocusedOptionIndex(event, optionIndex);
@@ -463,14 +490,14 @@ var script = {
         },
         onArrowLeftKey(event) {
             const target = event.currentTarget;
+
             this.focusedOptionIndex = -1;
 
             if (this.multiple) {
                 if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
-                    this.$refs.multiContainer.focus();
+                    DomHandler.focus(this.$refs.multiContainer);
                     this.focusedMultipleOptionIndex = this.modelValue.length;
-                }
-                else {
+                } else {
                     event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
                 }
             }
@@ -489,6 +516,7 @@ var script = {
         onEndKey(event) {
             const target = event.currentTarget;
             const len = target.value.length;
+
             target.setSelectionRange(len, len);
             this.focusedOptionIndex = -1;
 
@@ -505,8 +533,7 @@ var script = {
         onEnterKey(event) {
             if (!this.overlayVisible) {
                 this.onArrowDownKey(event);
-            }
-            else {
+            } else {
                 if (this.focusedOptionIndex !== -1) {
                     this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                 }
@@ -546,9 +573,9 @@ var script = {
         onArrowRightKeyOnMultiple() {
             this.focusedMultipleOptionIndex++;
 
-            if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
+            if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
                 this.focusedMultipleOptionIndex = -1;
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
             }
         },
         onBackspaceKeyOnMultiple(event) {
@@ -580,10 +607,10 @@ var script = {
         },
         alignOverlay() {
             let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput;
+
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, target);
-            }
-            else {
+            } else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
                 DomHandler.absolutePosition(this.overlay, target);
             }
@@ -595,6 +622,7 @@ var script = {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -627,6 +655,7 @@ var script = {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -640,13 +669,11 @@ var script = {
             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);
@@ -661,28 +688,32 @@ var script = {
             return 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 ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidOption(option));
+            return 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 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index > 0 ? 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) {
@@ -701,12 +732,12 @@ var script = {
         },
         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();
+            DomHandler.focus(this.$refs.focusInput);
         },
         changeFocusedOptionIndex(event, index) {
             if (this.focusedOptionIndex !== index) {
@@ -714,17 +745,17 @@ var script = {
                 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 = 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);
@@ -733,8 +764,7 @@ var script = {
         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) {
@@ -746,7 +776,8 @@ var script = {
                 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;
             }, []);
@@ -764,47 +795,57 @@ var script = {
     },
     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 || 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 || 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 '';
             }
         },
@@ -832,6 +873,9 @@ var script = {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },
@@ -839,19 +883,19 @@ var script = {
             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,
-        'VirtualScroller': VirtualScroller,
-        'Portal': Portal
+        Button: Button,
+        VirtualScroller: VirtualScroller,
+        Portal: Portal
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
 };
 
@@ -909,7 +953,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "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))),
@@ -934,8 +978,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           (openBlock(true), createElementBlock(Fragment, null, renderList($props.modelValue, (option, i) => {
             return (openBlock(), createElementBlock("li", {
               key: i,
-              id: $data.id + '_multiple_option_' + i,
-              class: normalizeClass(['p-autocomplete-token', {'p-focus': $data.focusedMultipleOptionIndex === i}]),
+              id: $options.id + '_multiple_option_' + i,
+              class: normalizeClass(['p-autocomplete-token', { 'p-focus': $data.focusedMultipleOptionIndex === i }]),
               role: "option",
               "aria-label": $options.getOptionLabel(option),
               "aria-selected": true,
@@ -946,10 +990,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 createElementVNode("span", _hoisted_4, toDisplayString($options.getOptionLabel(option)), 1)
               ]),
               createElementVNode("span", {
-                class: "p-autocomplete-token-icon pi pi-times-circle",
+                class: normalizeClass(['p-autocomplete-token-icon', $props.removeTokenIcon]),
                 onClick: $event => ($options.removeOption($event, i)),
                 "aria-hidden": "true"
-              }, null, 8, _hoisted_5)
+              }, null, 10, _hoisted_5)
             ], 10, _hoisted_3))
           }), 128)),
           createElementVNode("li", _hoisted_6, [
@@ -969,7 +1013,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               "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))),
@@ -992,13 +1036,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           key: 3,
           ref: "dropdownButton",
           type: "button",
-          icon: "pi pi-chevron-down",
+          icon: $props.dropdownIcon,
           class: "p-autocomplete-dropdown",
           tabindex: "-1",
           disabled: $props.disabled,
           "aria-hidden": "true",
           onClick: $options.onDropdownClick
-        }, null, 8, ["disabled", "onClick"]))
+        }, null, 8, ["icon", "disabled", "onClick"]))
       : createCommentVNode("", true),
     createElementVNode("span", _hoisted_8, toDisplayString($options.searchResultMessageText), 1),
     createVNode(_component_Portal, { appendTo: $props.appendTo }, {
@@ -1016,7 +1060,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   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), [
@@ -1025,7 +1069,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     suggestions: $options.visibleOptions
                   }),
                   createVNode(_component_VirtualScroller, mergeProps({ ref: $options.virtualScrollerRef }, $props.virtualScrollerOptions, {
-                    style: {'height': $props.scrollHeight},
+                    style: { height: $props.scrollHeight },
                     items: $options.visibleOptions,
                     tabindex: -1,
                     disabled: $options.virtualScrollerDisabled
@@ -1033,7 +1077,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     content: withCtx(({ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }) => [
                       createElementVNode("ul", {
                         ref: (el) => $options.listRef(el, contentRef),
-                        id: $data.id + '_list',
+                        id: $options.id + '_list',
                         class: normalizeClass(['p-autocomplete-items', styleClass]),
                         style: normalizeStyle(contentStyle),
                         role: "listbox"
@@ -1045,8 +1089,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             ($options.isOptionGroup(option))
                               ? (openBlock(), createElementBlock("li", {
                                   key: 0,
-                                  id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
-                                  style: normalizeStyle({height: itemSize ? itemSize + 'px' : undefined}),
+                                  id: $options.id + '_' + $options.getOptionIndex(i, getItemOptions),
+                                  style: normalizeStyle({ height: itemSize ? itemSize + 'px' : undefined }),
                                   class: "p-autocomplete-item-group",
                                   role: "option"
                                 }, [
@@ -1060,9 +1104,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 ], 12, _hoisted_10))
                               : withDirectives((openBlock(), createElementBlock("li", {
                                   key: 1,
-                                  id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
-                                  style: normalizeStyle({height: itemSize ? itemSize + 'px' : undefined}),
-                                  class: 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: normalizeStyle({ height: itemSize ? itemSize + 'px' : undefined }),
+                                  class: 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),
@@ -1102,7 +1146,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           name: "loader",
                           fn: withCtx(({ options }) => [
                             renderSlot(_ctx.$slots, "loader", { options: options })
-                          ])
+                          ]),
+                          key: "0"
                         }
                       : undefined
                   ]), 1040, ["style", "items", "disabled"]),
@@ -1148,7 +1193,7 @@ function styleInject(css, ref) {
   }
 }
 
-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;