primevue 3.15.0 → 3.16.2

package/autocomplete/autocomplete.esm.js

@@ -1,25 +1,26 @@
-import { ZIndexUtils, ObjectUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
+import { UniqueComponentId, ObjectUtils, ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
 import Portal from 'primevue/portal';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, mergeProps, createCommentVNode, Fragment, renderList, renderSlot, createElementVNode, toDisplayString, createBlock, createVNode, withCtx, Transition, createSlots, withDirectives, createTextVNode } from 'vue';
+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 = {
     name: 'AutoComplete',
-    inheritAttrs: false,
-    emits: ['update:modelValue', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
     props: {
         modelValue: null,
         suggestions: {
             type: Array,
             default: null
         },
-        field: {
+        field: { // TODO: Deprecated since v3.16.0
             type: [String,Function],
             default: null
         },
+        optionLabel: null,
+        optionDisabled: null,
         optionGroupLabel: null,
         optionGroupChildren: null,
         scrollHeight: {
@@ -34,7 +35,7 @@ var script = {
             type: String,
             default: 'blank'
         },
-        autoHighlight: {
+        autoHighlight: { // TODO: Deprecated since v3.16.0
             type: Boolean,
             default: false
         },
@@ -42,6 +43,18 @@ var script = {
             type: Boolean,
             default: false
         },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        dataKey: {
+            type: String,
+            default: null
+        },
         minLength: {
             type: Number,
             default: 1
@@ -62,45 +75,96 @@ var script = {
             type: Boolean,
             default: false
         },
-        inputClass: null,
+        inputId: String,
         inputStyle: null,
-        class: null,
-        style: null,
+        inputClass: null,
+        inputProps: null,
+        panelStyle: null,
         panelClass: null,
+        panelProps: null,
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner'
+        },
         virtualScrollerOptions: {
             type: Object,
             default: null
         },
-        loadingIcon: {
+        autoOptionFocus: {
+            type: Boolean,
+            default: true
+        },
+        searchLocale: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
+        },
+        searchMessage: {
+            type: String,
+            default: null
+        },
+        selectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySelectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySearchMessage: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
         }
     },
-    timeout: null,
     outsideClickListener: null,
     resizeListener: null,
     scrollHandler: null,
     overlay: null,
     virtualScroller: null,
+    searchTimeout: null,
+    selectOnFocus: false,
+    focusOnHover: false,
+    dirty: false,
     data() {
         return {
-            searching: false,
+            id: UniqueComponentId(),
             focused: false,
+            focusedOptionIndex: -1,
+            focusedMultipleOptionIndex: -1,
             overlayVisible: false,
-            inputTextValue: null,
-            highlightItem: null
-        };
+            searching: false
+        }
     },
     watch: {
         suggestions() {
             if (this.searching) {
-                if (this.suggestions && this.suggestions.length)
-                    this.showOverlay();
-                else
-                    this.hideOverlay();
-
+                ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : this.hide();
+                this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
                 this.searching = false;
             }
+
+            this.autoUpdateModel();
+        }
+    },
+    mounted() {
+        this.id = this.$attrs.id || this.id;
+
+        this.autoUpdateModel();
+    },
+    updated() {
+        if (this.overlayVisible) {
+            this.alignOverlay();
         }
     },
     beforeUnmount() {
@@ -117,20 +181,24 @@ var script = {
             this.overlay = null;
         }
     },
-    updated() {
-        if (this.overlayVisible) {
-            this.alignOverlay();
-        }
-    },
     methods: {
         getOptionIndex(index, fn) {
             return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
         },
-        getOptionRenderKey(option) {
-            return this.getItemContent(option);
+        getOptionLabel(option) {
+            return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option;
         },
-        getOptionGroupRenderKey(optionGroup) {
-            return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
+        getOptionValue(option) {
+            return option; // TODO: The 'optionValue' properties can be added.
+        },
+        getOptionRenderKey(option, index) {
+            return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
+        },
+        isOptionDisabled(option) {
+            return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
+        },
+        isOptionGroup(option) {
+            return this.optionGroupLabel && option.optionGroup && option.group;
         },
         getOptionGroupLabel(optionGroup) {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
@@ -138,28 +206,380 @@ var script = {
         getOptionGroupChildren(optionGroup) {
             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;
+        },
+        show(isFocus) {
+            this.$emit('before-show');
+            this.dirty = true;
+            this.overlayVisible = true;
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
+
+            isFocus && this.$refs.focusInput.focus();
+        },
+        hide(isFocus) {
+            const _hide = () => {
+                this.$emit('before-hide');
+                this.dirty = isFocus;
+                this.overlayVisible = false;
+                this.focusedOptionIndex = -1;
+
+                isFocus && this.$refs.focusInput.focus();
+            };
+
+            setTimeout(() => { _hide(); }, 0); // For ScreenReaders
+        },
+        onFocus(event) {
+            if (!this.dirty && this.completeOnFocus) {
+                this.search(event, event.target.value, 'focus');
+            }
+
+            this.dirty = true;
+            this.focused = true;
+            this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+            this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.dirty = false;
+            this.focused = false;
+            this.focusedOptionIndex = -1;
+            this.$emit('blur', event);
+        },
+        onKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    this.onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    this.onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    this.onPageUpKey(event);
+                    break;
+
+                case 'Enter':
+                    this.onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    this.onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    this.onTabKey(event);
+                    break;
+
+                case 'Backspace':
+                    this.onBackspaceKey(event);
+                    break;
+            }
+        },
+        onInput(event) {
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+
+            let query = event.target.value;
+            if (!this.multiple) {
+                this.updateModel(event, query);
+            }
+
+            if (query.length === 0) {
+                this.hide();
+                this.$emit('clear');
+            }
+            else {
+                if (query.length >= this.minLength) {
+                    this.focusedOptionIndex = -1;
+
+                    this.searchTimeout = setTimeout(() => {
+                        this.search(event, query, 'input');
+                    }, this.delay);
+                }
+                else {
+                    this.hide();
+                }
+            }
+        },
+        onChange(event) {
+            if (this.forceSelection) {
+                let valid = false;
+
+                if (this.visibleOptions)  {
+                    const matchedValue = this.visibleOptions.find(option => this.isOptionMatched(option, event.target.value));
+
+                    if (matchedValue !== undefined) {
+                        valid = true;
+                        !this.isSelected(matchedValue) && this.onOptionSelect(event, matchedValue);
+                    }
+                }
+
+                if (!valid) {
+                    this.$refs.focusInput.value = '';
+                    this.$emit('clear');
+                    !this.multiple && this.updateModel(event, null);
+                }
+            }
+        },
+        onMultipleContainerFocus() {
+            this.focused = true;
+        },
+        onMultipleContainerBlur() {
+            this.focusedMultipleOptionIndex = -1;
+            this.focused = false;
+        },
+        onMultipleContainerKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowLeft':
+                    this.onArrowLeftKeyOnMultiple(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKeyOnMultiple(event);
+                    break;
+
+                case 'Backspace':
+                    this.onBackspaceKeyOnMultiple(event);
+                    break;
+            }
+        },
+        onContainerClick(event) {
+            if (this.disabled || this.searching || this.isInputClicked(event) || this.isDropdownClicked(event)) {
+                return;
+            }
+
+            if (!this.overlay || !this.overlay.contains(event.target)) {
+                this.$refs.focusInput.focus();
+            }
+        },
+        onDropdownClick(event) {
+            let query = undefined;
+
+            if (this.overlayVisible) {
+                this.hide(true);
+            }
+            else {
+                this.$refs.focusInput.focus();
+                query = this.$refs.focusInput.value;
+
+                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) {
+            const value = this.getOptionValue(option);
+
+            if (this.multiple) {
+                this.$refs.focusInput.value = '';
+
+                if (!this.isSelected(option)) {
+                    this.updateModel(event, [...(this.modelValue || []), value]);
+                }
+            }
+            else {
+                this.updateModel(event, value);
+            }
+
+            this.$emit('item-select', { originalEvent: event, value: option });
+
+            this.hide(true);
+        },
+        onOptionMouseMove(event, index) {
+            if (this.focusOnHover) {
+                this.changeFocusedOptionIndex(event, index);
+            }
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
+        },
+        onOverlayKeyDown(event) {
+            switch (event.code) {
+                case 'Escape':
+                    this.onEscapeKey(event);
+                    break;
+            }
+        },
+        onArrowDownKey(event) {
+            if (!this.overlayVisible) {
+                return;
+            }
+
+            const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();
+
+            this.changeFocusedOptionIndex(event, optionIndex);
+
+            event.preventDefault();
+        },
+        onArrowUpKey(event) {
+            if (!this.overlayVisible) {
+                return;
+            }
+
+            if (event.altKey) {
+                if (this.focusedOptionIndex !== -1) {
+                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                }
+
+                this.overlayVisible && this.hide();
+                event.preventDefault();
+            }
+            else {
+                const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
+
+                this.changeFocusedOptionIndex(event, optionIndex);
+
+                event.preventDefault();
+            }
+        },
+        onArrowLeftKey(event) {
+            const target = event.currentTarget;
+            this.focusedOptionIndex = -1;
+
+            if (this.multiple) {
+                if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
+                    this.$refs.multiContainer.focus();
+                    this.focusedMultipleOptionIndex = this.modelValue.length;
+                }
+                else {
+                    event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
+                }
+            }
+        },
+        onArrowRightKey(event) {
+            this.focusedOptionIndex = -1;
+
+            this.multiple && event.stopPropagation(); // To prevent onArrowRightKeyOnMultiple method
+        },
+        onHomeKey(event) {
+            event.currentTarget.setSelectionRange(0, 0);
+            this.focusedOptionIndex = -1;
+
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            const target = event.currentTarget;
+            const len = target.value.length;
+            target.setSelectionRange(len, len);
+            this.focusedOptionIndex = -1;
+
+            event.preventDefault();
+        },
+        onPageUpKey(event) {
+            this.scrollInView(0);
+            event.preventDefault();
+        },
+        onPageDownKey(event) {
+            this.scrollInView(this.visibleOptions.length - 1);
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            if (!this.overlayVisible) {
+                this.onArrowDownKey(event);
+            }
+            else {
+                if (this.focusedOptionIndex !== -1) {
+                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                }
+
+                this.hide();
+            }
+
+            event.preventDefault();
+        },
+        onEscapeKey(event) {
+            this.overlayVisible && this.hide(true);
+            event.preventDefault();
+        },
+        onTabKey(event) {
+            if (this.focusedOptionIndex !== -1) {
+                this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+            }
+
+            this.overlayVisible && this.hide();
+        },
+        onBackspaceKey(event) {
+            if (this.multiple) {
+                if (ObjectUtils.isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) {
+                    const removedValue = this.modelValue[this.modelValue.length - 1];
+                    const newValue = this.modelValue.slice(0, -1);
+
+                    this.$emit('update:modelValue', newValue);
+                    this.$emit('item-unselect', { originalEvent: event, value: removedValue });
+                }
+
+                event.stopPropagation(); // To prevent onBackspaceKeyOnMultiple method
+            }
+        },
+        onArrowLeftKeyOnMultiple() {
+            this.focusedMultipleOptionIndex = this.focusedMultipleOptionIndex < 1 ? 0 : this.focusedMultipleOptionIndex - 1;
+        },
+        onArrowRightKeyOnMultiple() {
+            this.focusedMultipleOptionIndex++;
+
+            if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
+                this.focusedMultipleOptionIndex = -1;
+                this.$refs.focusInput.focus();
+            }
+        },
+        onBackspaceKeyOnMultiple(event) {
+            if (this.focusedMultipleOptionIndex !== -1) {
+                this.removeOption(event, this.focusedMultipleOptionIndex);
+            }
+        },
         onOverlayEnter(el) {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             this.alignOverlay();
+        },
+        onOverlayAfterEnter() {
             this.bindOutsideClickListener();
             this.bindScrollListener();
             this.bindResizeListener();
 
-            if (this.autoHighlight && this.suggestions && this.suggestions.length) {
-                DomHandler.addClass(this.list.firstElementChild, 'p-highlight');
-            }
+            this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
+
+            this.$emit('hide');
             this.overlay = null;
         },
         onOverlayAfterLeave(el) {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
+            let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput;
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, target);
             }
@@ -172,17 +592,23 @@ var script = {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     if (this.overlayVisible && this.overlay && this.isOutsideClicked(event)) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 };
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
         bindScrollListener() {
             if (!this.scrollHandler) {
                 this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
                     if (this.overlayVisible) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 });
             }
@@ -198,7 +624,7 @@ var script = {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
                     if (this.overlayVisible && !DomHandler.isTouchDevice()) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 };
                 window.addEventListener('resize', this.resizeListener);
@@ -217,79 +643,47 @@ var script = {
             if (this.multiple)
                 return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
             else
-                return event.target === this.$refs.input;
+                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;
         },
-        unbindOutsideClickListener() {
-            if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
-                this.outsideClickListener = null;
-            }
+        isOptionMatched(option, value) {
+            return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
         },
-        selectItem(event, item) {
-            if (this.multiple) {
-                this.$refs.input.value = '';
-                this.inputTextValue = '';
-
-                if (!this.isSelected(item)) {
-                    let newValue = this.modelValue ? [...this.modelValue, item] : [item];
-                    this.$emit('update:modelValue', newValue);
-                }
-            }
-            else {
-                this.$emit('update:modelValue', item);
-            }
-
-            this.$emit('item-select', {
-                originalEvent: event,
-                value: item
-            });
-
-            this.focus();
-            this.hideOverlay();
+        isValidOption(option) {
+            return option && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
         },
-        onMultiContainerClick(event) {
-            this.focus();
-            if(this.completeOnFocus) {
-                this.search(event, '', 'click');
-            }
+        isValidSelectedOption(option) {
+            return this.isValidOption(option) && this.isSelected(option);
         },
-        removeItem(event, index) {
-            let removedValue = this.modelValue[index];
-            let newValue = this.modelValue.filter((val, i) => (index !== i));
-            this.$emit('update:modelValue', newValue);
-            this.$emit('item-unselect', {
-                originalEvent: event,
-                value: removedValue
-            });
+        isSelected(option) {
+            return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
         },
-        onDropdownClick(event) {
-            this.focus();
-            const query = this.$refs.input.value;
-
-            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: query
-            });
+        findFirstOptionIndex() {
+            return this.visibleOptions.findIndex(option => this.isValidOption(option));
         },
-        getItemContent(item) {
-            return this.field ? ObjectUtils.resolveFieldData(item, this.field) : item;
+        findLastOptionIndex() {
+            return ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidOption(option));
         },
-        showOverlay() {
-            this.overlayVisible = true;
+        findNextOptionIndex(index) {
+            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;
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+        },
+        findSelectedOptionIndex() {
+            return this.hasSelectedOption ? this.visibleOptions.findIndex(option => this.isValidSelectedOption(option)) : -1;
         },
-        hideOverlay() {
-            this.overlayVisible = false;
+        findFirstFocusedOptionIndex() {
+            const selectedIndex = this.findSelectedOptionIndex();
+            return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
         },
-        focus() {
-            this.$refs.input.focus();
+        findLastFocusedOptionIndex() {
+            const selectedIndex = this.findSelectedOptionIndex();
+            return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
         search(event, query, source) {
             //allow empty string but not undefined or null
@@ -303,242 +697,93 @@ var script = {
             }
 
             this.searching = true;
-            this.$emit('complete', {
-                originalEvent: event,
-                query: query
-            });
+            this.$emit('complete', { originalEvent: event, query });
         },
-        onInputClicked(event) {
-            if(this.completeOnFocus) {
-                this.search(event, '', 'click');
-            }
-        },
-        onInput(event) {
-            this.inputTextValue = event.target.value;
-
-            if (this.timeout) {
-                clearTimeout(this.timeout);
-            }
-
-            let query = event.target.value;
-            if (!this.multiple) {
-                this.$emit('update:modelValue', query);
-            }
+        removeOption(event, index) {
+            const removedOption = this.modelValue[index];
+            const value = this.modelValue.filter((_, i) => i !== index).map(option => this.getOptionValue(option));
 
-            if (query.length === 0) {
-                this.hideOverlay();
-                this.$emit('clear');
-            }
-            else {
-                if (query.length >= this.minLength) {
-                    this.timeout = setTimeout(() => {
-                        this.search(event, query, 'input');
-                    }, this.delay);
-                }
-                else {
-                    this.hideOverlay();
-                }
-            }
-        },
-        onFocus() {
-            this.focused = true;
-        },
-        onBlur() {
-            this.focused = false;
+            this.updateModel(event, value);
+            this.$emit('item-unselect', { originalEvent: event, value: removedOption });
+            this.dirty = true;
+            this.$refs.focusInput.focus();
         },
-        onKeyDown(event) {
-            if (this.overlayVisible) {
-                let highlightItem = DomHandler.findSingle(this.list, 'li.p-highlight');
-
-                switch(event.which) {
-                    //down
-                    case 40:
-                        if (highlightItem) {
-                            let nextElement = this.findNextItem(highlightItem);
-                            if (nextElement) {
-                                DomHandler.addClass(nextElement, 'p-highlight');
-                                DomHandler.removeClass(highlightItem, 'p-highlight');
-                                nextElement.scrollIntoView({ block: 'nearest', inline: 'start' });
-                            }
-                        }
-                        else {
-                            highlightItem = this.list.firstElementChild;
-                            if (DomHandler.hasClass(highlightItem, 'p-autocomplete-item-group')) {
-                                highlightItem = this.findNextItem(highlightItem);
-                            }
-
-                            if (highlightItem) {
-                                DomHandler.addClass(highlightItem, 'p-highlight');
-                            }
-                        }
-
-                        event.preventDefault();
-                    break;
-
-                    //up
-                    case 38:
-                        if (highlightItem) {
-                            let previousElement = this.findPrevItem(highlightItem);
-                            if (previousElement) {
-                                DomHandler.addClass(previousElement, 'p-highlight');
-                                DomHandler.removeClass(highlightItem, 'p-highlight');
-                                previousElement.scrollIntoView({ block: 'nearest', inline: 'start' });
-                            }
-                        }
-
-                        event.preventDefault();
-                    break;
-
-                    //enter
-                    case 13:
-                        if (highlightItem) {
-                            this.selectHighlightItem(event, highlightItem);
-                            this.hideOverlay();
-                        }
-
-                        event.preventDefault();
-                    break;
+        changeFocusedOptionIndex(event, index) {
+            if (this.focusedOptionIndex !== index) {
+                this.focusedOptionIndex = index;
+                this.scrollInView();
 
-                    //escape
-                    case 27:
-                        this.hideOverlay();
-                        event.preventDefault();
-                    break;
-
-                    //tab
-                    case 9:
-                        if (highlightItem) {
-                            this.selectHighlightItem(event, highlightItem);
-                        }
-
-                        this.hideOverlay();
-                    break;
-                }
-            }
-
-            if (this.multiple) {
-                switch(event.which) {
-                    //backspace
-                    case 8:
-                        if (this.modelValue && this.modelValue.length && !this.$refs.input.value) {
-                            let removedValue = this.modelValue[this.modelValue.length - 1];
-                            let newValue = this.modelValue.slice(0, -1);
-
-                            this.$emit('update:modelValue', newValue);
-                            this.$emit('item-unselect', {
-                                originalEvent: event,
-                                value: removedValue
-                            });
-                        }
-                    break;
+                if (this.selectOnFocus || this.autoHighlight) {
+                    this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
                 }
             }
         },
-        selectHighlightItem(event, item) {
-            if (this.optionGroupLabel) {
-                let optionGroup = this.suggestions[item.dataset.group];
-                this.selectItem(event, this.getOptionGroupChildren(optionGroup)[item.dataset.index]);
+        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 {
-                this.selectItem(event, this.suggestions[item.dataset.index]);
+            else if (!this.virtualScrollerDisabled) {
+                setTimeout(() => {
+                    this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
+                }, 0);
             }
         },
-        findNextItem(item) {
-            let nextItem = item.nextElementSibling;
-
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-autocomplete-item-group') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+        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);
+            }
         },
-        findPrevItem(item) {
-            let prevItem = item.previousElementSibling;
-
-            if (prevItem)
-                return DomHandler.hasClass(prevItem, 'p-autocomplete-item-group') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+        updateModel(event, value) {
+            this.$emit('update:modelValue', value);
+            this.$emit('change', { originalEvent: event, value });
         },
-        onChange(event) {
-            if (this.forceSelection) {
-                let valid = false;
-                let inputValue = event.target.value.trim();
-
-                if (this.suggestions)  {
-                    for (let item of this.suggestions) {
-                        let itemValue = this.field ? ObjectUtils.resolveFieldData(item, this.field) : item;
-                        if (itemValue && inputValue === itemValue.trim()) {
-                            valid = true;
-                            this.selectItem(event, item);
-                            break;
-                        }
-                    }
-                }
+        flatOptions(options) {
+            return (options || []).reduce((result, option, index) => {
+                result.push({ optionGroup: option, group: true, index });
 
-                if (!valid) {
-                    this.$refs.input.value = '';
-                    this.inputTextValue = '';
-                    this.$emit('clear');
-                    if (!this.multiple) {
-                        this.$emit('update:modelValue', null);
-                    }
-                }
-            }
-        },
-        isSelected(val) {
-            let selected = false;
-            if (this.modelValue && this.modelValue.length) {
-                for (let i = 0; i < this.modelValue.length; i++) {
-                    if (ObjectUtils.equals(this.modelValue[i], val)) {
-                        selected = true;
-                        break;
-                    }
-                }
-            }
+                const optionGroupChildren = this.getOptionGroupChildren(option);
+                optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
 
-            return selected;
+                return result;
+            }, []);
         },
         overlayRef(el) {
             this.overlay = el;
         },
         listRef(el, contentRef) {
             this.list = el;
-            contentRef && contentRef(el); // for virtualScroller
+            contentRef && contentRef(el); // For VirtualScroller
         },
         virtualScrollerRef(el) {
             this.virtualScroller = el;
-        },
-        onOverlayClick(event) {
-            OverlayEventBus.emit('overlay-click', {
-                originalEvent: event,
-                target: this.$el
-            });
         }
     },
     computed: {
         containerClass() {
-            return ['p-autocomplete p-component p-inputwrapper', this.class, {
+            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) || (this.inputTextValue && this.inputTextValue.length)),
-                'p-inputwrapper-focus': this.focused
+                'p-inputwrapper-filled': this.modelValue || ObjectUtils.isNotEmpty(this.inputValue),
+                'p-inputwrapper-focus': this.focused,
+                'p-overlay-open': this.overlayVisible
             }];
         },
-        inputFieldClass() {
+        inputStyleClass() {
             return ['p-autocomplete-input p-inputtext p-component', this.inputClass, {
-                'p-autocomplete-dd-input': this.dropdown,
-                'p-disabled': this.$attrs.disabled
+                'p-autocomplete-dd-input': this.dropdown
             }];
         },
         multiContainerClass() {
-            return ['p-autocomplete-multiple-container p-component p-inputtext', {
-                'p-disabled': this.$attrs.disabled,
-                'p-focus': this.focused
-            }];
+            return ['p-autocomplete-multiple-container p-component p-inputtext'];
         },
         panelStyleClass() {
-            return [
-                'p-autocomplete-panel p-component', this.panelClass, {
+            return ['p-autocomplete-panel p-component', this.panelClass, {
                 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
@@ -546,21 +791,55 @@ var script = {
         loadingIconClass() {
             return ['p-autocomplete-loader pi-spin', this.loadingIcon];
         },
+        visibleOptions() {
+            return this.optionGroupLabel ? this.flatOptions(this.suggestions) : (this.suggestions || []);
+        },
         inputValue() {
             if (this.modelValue) {
-                if (this.field && typeof this.modelValue === 'object') {
-                    const resolvedFieldData = ObjectUtils.resolveFieldData(this.modelValue, this.field);
-                    return resolvedFieldData != null ? resolvedFieldData : 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 {
                 return '';
             }
         },
-        listId() {
-            return UniqueComponentId() + '_list';
+        hasSelectedOption() {
+            return ObjectUtils.isNotEmpty(this.modelValue);
+        },
+        equalityKey() {
+            return this.dataKey; // TODO: The 'optionValue' properties can be added.
+        },
+        searchResultMessageText() {
+            return ObjectUtils.isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText;
+        },
+        searchMessageText() {
+            return this.searchMessage || this.$primevue.config.locale.searchMessage || '';
+        },
+        emptySearchMessageText() {
+            return this.emptySearchMessage || this.$primevue.config.locale.emptySearchMessage || '';
+        },
+        selectionMessageText() {
+            return this.selectionMessage || this.$primevue.config.locale.selectionMessage || '';
+        },
+        emptySelectionMessageText() {
+            return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
+        },
+        selectedMessageText() {
+            return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
+        },
+        focusedOptionId() {
+            return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
+        },
+        focusedMultipleOptionId() {
+            return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
+        },
+        ariaSetSize() {
+            return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
@@ -576,16 +855,29 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["aria-owns", "aria-expanded"];
-const _hoisted_2 = ["value", "aria-controls"];
-const _hoisted_3 = { class: "p-autocomplete-token-label" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = { class: "p-autocomplete-input-token" };
-const _hoisted_6 = ["aria-controls"];
-const _hoisted_7 = ["id"];
-const _hoisted_8 = ["onClick", "data-index"];
-const _hoisted_9 = { class: "p-autocomplete-item-group" };
-const _hoisted_10 = ["onClick", "data-group", "data-index"];
+const _hoisted_1 = ["id", "value", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant"];
+const _hoisted_2 = ["aria-activedescendant"];
+const _hoisted_3 = ["id", "aria-label", "aria-setsize", "aria-posinset"];
+const _hoisted_4 = { class: "p-autocomplete-token-label" };
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  class: "p-autocomplete-input-token",
+  role: "option"
+};
+const _hoisted_7 = ["id", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant"];
+const _hoisted_8 = {
+  role: "status",
+  "aria-live": "polite",
+  class: "p-hidden-accessible"
+};
+const _hoisted_9 = ["id"];
+const _hoisted_10 = ["id"];
+const _hoisted_11 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove"];
+const _hoisted_12 = {
+  role: "status",
+  "aria-live": "polite",
+  class: "p-hidden-accessible"
+};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Button = resolveComponent("Button");
@@ -593,78 +885,106 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = resolveComponent("Portal");
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createElementBlock("span", {
+  return (openBlock(), createElementBlock("div", {
     ref: "container",
     class: normalizeClass($options.containerClass),
-    "aria-haspopup": "listbox",
-    "aria-owns": $options.listId,
-    "aria-expanded": $data.overlayVisible,
-    style: normalizeStyle($props.style)
+    onClick: _cache[15] || (_cache[15] = (...args) => ($options.onContainerClick && $options.onContainerClick(...args)))
   }, [
     (!$props.multiple)
       ? (openBlock(), createElementBlock("input", mergeProps({
           key: 0,
-          ref: "input",
-          class: $options.inputFieldClass,
-          style: $props.inputStyle
-        }, _ctx.$attrs, {
-          value: $options.inputValue,
-          onClick: _cache[0] || (_cache[0] = (...args) => ($options.onInputClicked && $options.onInputClicked(...args))),
-          onInput: _cache[1] || (_cache[1] = (...args) => ($options.onInput && $options.onInput(...args))),
-          onFocus: _cache[2] || (_cache[2] = (...args) => ($options.onFocus && $options.onFocus(...args))),
-          onBlur: _cache[3] || (_cache[3] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-          onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
-          onChange: _cache[5] || (_cache[5] = (...args) => ($options.onChange && $options.onChange(...args))),
+          ref: "focusInput",
+          id: $props.inputId,
           type: "text",
-          autoComplete: "off",
-          role: "searchbox",
+          style: $props.inputStyle,
+          class: $options.inputStyleClass,
+          value: $options.inputValue,
+          placeholder: $props.placeholder,
+          tabindex: !$props.disabled ? $props.tabindex : -1,
+          disabled: $props.disabled,
+          autocomplete: "off",
+          role: "combobox",
+          "aria-label": _ctx.ariaLabel,
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-haspopup": "listbox",
           "aria-autocomplete": "list",
-          "aria-controls": $options.listId
-        }), null, 16, _hoisted_2))
+          "aria-expanded": $data.overlayVisible,
+          "aria-controls": $data.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))),
+          onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
+          onInput: _cache[3] || (_cache[3] = (...args) => ($options.onInput && $options.onInput(...args))),
+          onChange: _cache[4] || (_cache[4] = (...args) => ($options.onChange && $options.onChange(...args)))
+        }, $props.inputProps), null, 16, _hoisted_1))
       : createCommentVNode("", true),
     ($props.multiple)
       ? (openBlock(), createElementBlock("ul", {
           key: 1,
           ref: "multiContainer",
           class: normalizeClass($options.multiContainerClass),
-          onClick: _cache[11] || (_cache[11] = (...args) => ($options.onMultiContainerClick && $options.onMultiContainerClick(...args)))
+          tabindex: "-1",
+          role: "listbox",
+          "aria-orientation": "horizontal",
+          "aria-activedescendant": $data.focused ? $options.focusedMultipleOptionId : undefined,
+          onFocus: _cache[10] || (_cache[10] = (...args) => ($options.onMultipleContainerFocus && $options.onMultipleContainerFocus(...args))),
+          onBlur: _cache[11] || (_cache[11] = (...args) => ($options.onMultipleContainerBlur && $options.onMultipleContainerBlur(...args))),
+          onKeydown: _cache[12] || (_cache[12] = (...args) => ($options.onMultipleContainerKeyDown && $options.onMultipleContainerKeyDown(...args)))
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList($props.modelValue, (item, i) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList($props.modelValue, (option, i) => {
             return (openBlock(), createElementBlock("li", {
               key: i,
-              class: "p-autocomplete-token"
+              id: $data.id + '_multiple_option_' + i,
+              class: normalizeClass(['p-autocomplete-token', {'p-focus': $data.focusedMultipleOptionIndex === i}]),
+              role: "option",
+              "aria-label": $options.getOptionLabel(option),
+              "aria-selected": true,
+              "aria-setsize": $props.modelValue.length,
+              "aria-posinset": i + 1
             }, [
-              renderSlot(_ctx.$slots, "chip", { value: item }, () => [
-                createElementVNode("span", _hoisted_3, toDisplayString($options.getItemContent(item)), 1)
+              renderSlot(_ctx.$slots, "chip", { value: option }, () => [
+                createElementVNode("span", _hoisted_4, toDisplayString($options.getOptionLabel(option)), 1)
               ]),
               createElementVNode("span", {
                 class: "p-autocomplete-token-icon pi pi-times-circle",
-                onClick: $event => ($options.removeItem($event, i))
-              }, null, 8, _hoisted_4)
-            ]))
+                onClick: $event => ($options.removeOption($event, i)),
+                "aria-hidden": "true"
+              }, null, 8, _hoisted_5)
+            ], 10, _hoisted_3))
           }), 128)),
-          createElementVNode("li", _hoisted_5, [
+          createElementVNode("li", _hoisted_6, [
             createElementVNode("input", mergeProps({
-              ref: "input",
+              ref: "focusInput",
+              id: $props.inputId,
               type: "text",
-              autoComplete: "off"
-            }, _ctx.$attrs, {
-              onInput: _cache[6] || (_cache[6] = (...args) => ($options.onInput && $options.onInput(...args))),
-              onFocus: _cache[7] || (_cache[7] = (...args) => ($options.onFocus && $options.onFocus(...args))),
-              onBlur: _cache[8] || (_cache[8] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-              onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
-              onChange: _cache[10] || (_cache[10] = (...args) => ($options.onChange && $options.onChange(...args))),
-              role: "searchbox",
+              style: $props.inputStyle,
+              class: $props.inputClass,
+              placeholder: $props.placeholder,
+              tabindex: !$props.disabled ? $props.tabindex : -1,
+              disabled: $props.disabled,
+              autocomplete: "off",
+              role: "combobox",
+              "aria-label": _ctx.ariaLabel,
+              "aria-labelledby": _ctx.ariaLabelledby,
+              "aria-haspopup": "listbox",
               "aria-autocomplete": "list",
-              "aria-controls": $options.listId
-            }), null, 16, _hoisted_6)
+              "aria-expanded": $data.overlayVisible,
+              "aria-controls": $data.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))),
+              onKeydown: _cache[7] || (_cache[7] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
+              onInput: _cache[8] || (_cache[8] = (...args) => ($options.onInput && $options.onInput(...args))),
+              onChange: _cache[9] || (_cache[9] = (...args) => ($options.onChange && $options.onChange(...args)))
+            }, $props.inputProps), null, 16, _hoisted_7)
           ])
-        ], 2))
+        ], 42, _hoisted_2))
       : createCommentVNode("", true),
     ($data.searching)
       ? (openBlock(), createElementBlock("i", {
           key: 2,
-          class: normalizeClass($options.loadingIconClass)
+          class: normalizeClass($options.loadingIconClass),
+          "aria-hidden": "true"
         }, null, 2))
       : createCommentVNode("", true),
     ($props.dropdown)
@@ -674,97 +994,106 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           type: "button",
           icon: "pi pi-chevron-down",
           class: "p-autocomplete-dropdown",
-          disabled: _ctx.$attrs.disabled,
+          tabindex: "-1",
+          disabled: $props.disabled,
+          "aria-hidden": "true",
           onClick: $options.onDropdownClick
         }, null, 8, ["disabled", "onClick"]))
       : createCommentVNode("", true),
+    createElementVNode("span", _hoisted_8, toDisplayString($options.searchResultMessageText), 1),
     createVNode(_component_Portal, { appendTo: $props.appendTo }, {
       default: withCtx(() => [
         createVNode(Transition, {
           name: "p-connected-overlay",
           onEnter: $options.onOverlayEnter,
+          onAfterEnter: $options.onOverlayAfterEnter,
           onLeave: $options.onOverlayLeave,
           onAfterLeave: $options.onOverlayAfterLeave
         }, {
           default: withCtx(() => [
             ($data.overlayVisible)
-              ? (openBlock(), createElementBlock("div", {
+              ? (openBlock(), createElementBlock("div", mergeProps({
                   key: 0,
                   ref: $options.overlayRef,
-                  class: normalizeClass($options.panelStyleClass),
-                  style: normalizeStyle({'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : ''}),
-                  onClick: _cache[12] || (_cache[12] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-                }, [
+                  class: $options.panelStyleClass,
+                  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), [
                   renderSlot(_ctx.$slots, "header", {
                     value: $props.modelValue,
-                    suggestions: $props.suggestions
+                    suggestions: $options.visibleOptions
                   }),
                   createVNode(_component_VirtualScroller, mergeProps({ ref: $options.virtualScrollerRef }, $props.virtualScrollerOptions, {
                     style: {'height': $props.scrollHeight},
-                    items: $props.suggestions,
+                    items: $options.visibleOptions,
+                    tabindex: -1,
                     disabled: $options.virtualScrollerDisabled
                   }), createSlots({
-                    content: withCtx(({ styleClass, contentRef, items, getItemOptions, contentStyle }) => [
+                    content: withCtx(({ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }) => [
                       createElementVNode("ul", {
-                        id: $options.listId,
                         ref: (el) => $options.listRef(el, contentRef),
+                        id: $data.id + '_list',
                         class: normalizeClass(['p-autocomplete-items', styleClass]),
                         style: normalizeStyle(contentStyle),
                         role: "listbox"
                       }, [
-                        (!$props.optionGroupLabel)
-                          ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(items, (item, i) => {
-                              return withDirectives((openBlock(), createElementBlock("li", {
-                                class: "p-autocomplete-item",
-                                key: $options.getOptionRenderKey(item),
-                                onClick: $event => ($options.selectItem($event, item)),
-                                role: "option",
-                                "data-index": $options.getOptionIndex(i, getItemOptions)
-                              }, [
-                                renderSlot(_ctx.$slots, "item", {
-                                  item: item,
-                                  index: $options.getOptionIndex(i, getItemOptions)
-                                }, () => [
-                                  createTextVNode(toDisplayString($options.getItemContent(item)), 1)
-                                ])
-                              ], 8, _hoisted_8)), [
-                                [_directive_ripple]
-                              ])
-                            }), 128))
-                          : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(items, (optionGroup, i) => {
-                              return (openBlock(), createElementBlock(Fragment, {
-                                key: $options.getOptionGroupRenderKey(optionGroup)
-                              }, [
-                                createElementVNode("li", _hoisted_9, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(items, (option, i) => {
+                          return (openBlock(), createElementBlock(Fragment, {
+                            key: $options.getOptionRenderKey(option, $options.getOptionIndex(i, getItemOptions))
+                          }, [
+                            ($options.isOptionGroup(option))
+                              ? (openBlock(), createElementBlock("li", {
+                                  key: 0,
+                                  id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
+                                  style: normalizeStyle({height: itemSize ? itemSize + 'px' : undefined}),
+                                  class: "p-autocomplete-item-group",
+                                  role: "option"
+                                }, [
                                   renderSlot(_ctx.$slots, "optiongroup", {
-                                    item: optionGroup,
+                                    option: option.optionGroup,
+                                    item: option.optionGroup,
                                     index: $options.getOptionIndex(i, getItemOptions)
                                   }, () => [
-                                    createTextVNode(toDisplayString($options.getOptionGroupLabel(optionGroup)), 1)
+                                    createTextVNode(toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 1)
                                   ])
-                                ]),
-                                (openBlock(true), createElementBlock(Fragment, null, renderList($options.getOptionGroupChildren(optionGroup), (item, j) => {
-                                  return withDirectives((openBlock(), createElementBlock("li", {
-                                    class: "p-autocomplete-item",
-                                    key: j,
-                                    onClick: $event => ($options.selectItem($event, item)),
-                                    role: "option",
-                                    "data-group": i,
-                                    "data-index": $options.getOptionIndex(j, getItemOptions)
-                                  }, [
-                                    renderSlot(_ctx.$slots, "item", {
-                                      item: item,
-                                      index: $options.getOptionIndex(j, getItemOptions)
-                                    }, () => [
-                                      createTextVNode(toDisplayString($options.getItemContent(item)), 1)
-                                    ])
-                                  ], 8, _hoisted_10)), [
-                                    [_directive_ripple]
-                                  ])
-                                }), 128))
-                              ], 64))
-                            }), 128))
-                      ], 14, _hoisted_7)
+                                ], 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)}]),
+                                  role: "option",
+                                  "aria-label": $options.getOptionLabel(option),
+                                  "aria-selected": $options.isSelected(option),
+                                  "aria-disabled": $options.isOptionDisabled(option),
+                                  "aria-setsize": $options.ariaSetSize,
+                                  "aria-posinset": $options.getAriaPosInset($options.getOptionIndex(i, getItemOptions)),
+                                  onClick: $event => ($options.onOptionSelect($event, option)),
+                                  onMousemove: $event => ($options.onOptionMouseMove($event, $options.getOptionIndex(i, getItemOptions)))
+                                }, [
+                                  (_ctx.$slots.option)
+                                    ? renderSlot(_ctx.$slots, "option", {
+                                        key: 0,
+                                        option: option,
+                                        index: $options.getOptionIndex(i, getItemOptions)
+                                      }, () => [
+                                        createTextVNode(toDisplayString($options.getOptionLabel(option)), 1)
+                                      ])
+                                    : renderSlot(_ctx.$slots, "item", {
+                                        key: 1,
+                                        item: option,
+                                        index: $options.getOptionIndex(i, getItemOptions)
+                                      }, () => [
+                                        createTextVNode(toDisplayString($options.getOptionLabel(option)), 1)
+                                      ])
+                                ], 46, _hoisted_11)), [
+                                  [_directive_ripple]
+                                ])
+                          ], 64))
+                        }), 128))
+                      ], 14, _hoisted_9),
+                      createElementVNode("span", _hoisted_12, toDisplayString($options.selectedMessageText), 1)
                     ]),
                     _: 2
                   }, [
@@ -779,17 +1108,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   ]), 1040, ["style", "items", "disabled"]),
                   renderSlot(_ctx.$slots, "footer", {
                     value: $props.modelValue,
-                    suggestions: $props.suggestions
+                    suggestions: $options.visibleOptions
                   })
-                ], 6))
+                ], 16))
               : createCommentVNode("", true)
           ]),
           _: 3
-        }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+        }, 8, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])
       ]),
       _: 3
     }, 8, ["appendTo"])
-  ], 14, _hoisted_1))
+  ], 2))
 }
 
 function styleInject(css, ref) {